HTML/CSS入門編2: CSSの基礎を学ぼう

paiza会員になると、 受講状況、進捗度の表示、提出コードの保存、バッジの取得が出来ます。

下記の各チャプターに進むと左のようなレッスン画面が開きます。
動画エリアには 各チャプター約３分の動画 が配置されています。
補足テキストエリアには動画の補足情報や、解説している問題の問題文等が表示されます。 「演習課題へ進む」ボタン を押すと、そのチャプターの学習内容を元にした 類似問題が出題 されます。
コードエリアでは自由にコードの記述、実行が可能です。 動画の内容を実際に試してみましょう。
入出力エリアでは、 コード実行時に標準入力する入力値の設定と、実行後の出力値 が表示されます。
各エリアは、境界線上で ドラッグする事でサイズを変える 事が可能です。

「学習ステータス」では各講座の学習進捗状況が確認できます。
右上に表示されているゲージはその講座の学習が全体の何％まで進んでいるかを表します。

※公開中のレッスンすべてを受講することで100%となります。レッスンが追加になった場合は追加された分を含めて100％となるため、ゲージの数値が変動することがありますのでご注意ください
「学習レベル」は各チャプターを完了することでレベルアップします。
キャラクター画像は「ジョブ」によって変化します。「ジョブ」は各レッスンの演習問題をすべて正解して★を獲得する（模範解答を閲覧した場合、★は獲得できません）と上級ジョブにレベルアップすることができます。

※模範解答を閲覧した問題で★獲得を目指したいときは、そのチャプターの演習問題に最初から再挑戦してください

チャプター一覧

このレッスンでは、HTMLの見た目を定義するCSSについて、学習します。また、HTMLフレームワークのBootstrapを使って、スマホやタブレットでもカッコよくWebページを表示できる、レスポンシブデザインとグリッドについても解説します。

ここでは、Webページの色を変えてみます。そのために、CSSの色指定について学習します。

ここでは、Webページのテキストのサイズや種類をCSSで設定する方法について学習します。

ここではCSSを使ったパーツのレイアウトに挑戦します。そのために、CSSを使った余白や間隔の指定方法について学習しましょう。

ここでは、Bootstrapのコンテナという機能を使って、Webページのデザインを整えていきます。そして、PCでもスマートフォンでも、レイアウトが崩れにくいレスポンシブデザインを実現します。

Webページで柔軟なレイアウトを可能にする、Bootstrapのグリッドシステムを取り上げます。グリッドは、最近のWebページで主流になっている定番のデザインで、Bootstrapで簡単に実現できます。

講座追加情報や無料公開情報などもつぶやいています！