HTML/CSS入門編3: HTML要素を学ぼう

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

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

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

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

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

チャプター一覧

ここでは、Webページに画像とリンクを追加します。Bootstrapを使うことで、リンクや画像を便利に表示することができます。

ここでは、Webページに箇条書きのリストを追加します。さらに、Bootstrapで箇条書きを使ってナビゲーションバーを作ります。このナビゲーションバーを使って、同じページ内でジャンプする方法も紹介します。

ここでは、Webページに表を追加します。Bootstrapを使うと、見栄えの良い表を簡単に作ることができます。

ここでは、会員登録や問い合わせなどに利用できるフォームを作ってみます。フォームを使えば、情報を見せるだけでなく、相手から連絡してもらうことができます。

ここでは、複数行のテキストエリアとプルダウンリストといった、いくつかのパーツをフォームに追加してみます。このようなパーツも、Bootstrapを使うことで、カッコいいデザインを簡単に設定できます。

Bootstrapのグリッドシステムを使って、フォームのレイアウトを整えてみましょう。

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