AI時代だからこそ、ホンモノの技術を。 プログラミング&デザインスクール「prepro(プリプロ)」のロゴ

〜現場で通用するフルスタックな解決力を手に入れる、
プログラミング&デザインスクール〜

#6|CSSで見た目もゲームらしく

⚠️ preproからのお願い

このチャンネルは「修行の場」です。「コピペは原則禁止」。

自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。

一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です!

〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜

ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ!

講師の東郷です。

第6回は、いよいよCSS(Cascading Style Sheets)を使って、ブラウザの見た目を整えていきます。

前回までに作成したHTMLやPHPのコードは、そのままでは素っ気ないテキストが並んでいるだけ。
そこにCSSという「魔法」をかけることで、文字を大きくしたり、ボタンを綺麗に並べたり、さらにはマウスを乗せた時の動き(アニメーション)まで作ることができちゃいます!

今回は、基本的なCSSの書き方を中心に色々なプロパティを書いてみたいと思います。

自分でスタイルを付けたり、ブラウザが標準で付けているスタイル(デフォルトCSS)を上書きしたり、色々な書き方で整えていきます。

「1回で全部覚えるのは無理!」と割り切って、まずはCSSでどんなことができるのか、その楽しさを一緒に体験していきましょう!

【この動画で学べること】

  • CSSの基本構造(セレクタ、プロパティ、値の書き方)
  • 中央寄せや幅の設定などレイアウト調整
  • 3等分に並べるGridレイアウト
  • 背景画像の設定とサイズ調整
  • CSSアニメーション

【preproのカリキュラム方針】

preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。

本編: 15分でサクサク進むメイン講義

0.5回シリーズ: 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義

この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。

もっと詳しく知りたい人のための
0.5回シリーズ

第6回は、いよいよCSS(Cascading Style Sheets)を使って、ブラウザの見た目を整えていきます。

前回までに作成したHTMLやPHPのコードは、そのままでは素っ気ないテキストが並んでいるだけ。
そこにCSSという「魔法」をかけることで、文字を大きくしたり、ボタンを綺麗に並べたり、さらにはマウスを乗せた時の動き(アニメーション)まで作ることができちゃいます!

今回は、基本的なCSSの書き方を中心に色々なプロパティを書いてみたいと思います。

自分でスタイルを付けたり、ブラウザが標準で付けているスタイル(デフォルトCSS)を上書きしたり、色々な書き方で整えていきます。

「1回で全部覚えるのは無理!」と割り切って、まずはCSSでどんなことができるのか、その楽しさを一緒に体験していきましょう!

【この動画で学べること】

  • CSSの基本構造(セレクタ、プロパティ、値の書き方)
  • 中央寄せや幅の設定などレイアウト調整
  • 3等分に並べるGridレイアウト
  • 背景画像の設定とサイズ調整
  • CSSアニメーション