#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回シリーズ
今回の番外編はCSSの強力な武器position: absolute;について徹底解説します。
Webサイトを作っていると「どうしてもこの要素をここに重ねたい！」「親要素を基準に右下に配置したい！」という場面が出てきます。
そんな時に役立つのがpositionプロパティです。
少しクセがありますが、マスターすればレイアウトの幅がぐっと広がります。
今回学ぶ「絶対値」と「相対値」の概念を理解して、Webデザインの必殺技を手に入れましょう！
【この動画で学べること】
- 要素を「絶対座標」で指定して重ねる方法（position: absolute;）
- コーディングルールとは？ ・効率的にスタイルを管理するCSSの書き方
- 基準点のコントロール（relativeを使った親要素を基準にするテクニック）
- top: 50%とtransformを使った黄金の配置法（上下左右中央配置）