お問合せフォームのレイアウト(2)レッスンではフォームの入力項目を作っていきます。 このレッスンで新しく学ぶことは inputタグtextareaタグ です。 inputはテキスト入力や送信ボタンを作る時に使います。 HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム...

コアラフォームの本体はまだ作らずに、まずはレイアウトからだね ひつじのジョージそう。このレッスンではレイアウトだけだから主に復習になるよ お問合せフォームのレイアウトのレッスンではこれまでに学んだ知識を用いてフォームのレイアウトを作るので、主に復習になります。 復習する内容は 復習内容 paddingプロパティの使い方...

paddingとmarginレッスンでは主にpaddingとmarginを使ってレイアウトを整えます。 paddingは「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」で学びました。 少し復習するとpaddingは前回学んだ「ボーダー」の内側に余白を取るCSSでした。 今回新しく学ぶmarginはボーダーの外...

ボーダーレッスンで新しく学ぶことは線を引く方法です。 線を引くにはCSSのborderプロパティを使用します。borderプロパティの構文は border: 幅 種類 色 です。この構文に値を入れると次のようになります。 /* border: 幅 種類 色 */ border: 3px solid green; ↓結果...

コンテンツの構造レッスンでは今までに学んだ知識を使ってコンテンツを作っていきます。 このレッスンでは最近で使用していなかった画像をしようするので、画像レッスンを復習しておくとスムーズに進みます。 また、以下のコードのように同じクラスを付与したdivタグの使い方と意味も理解しましょう。 <div class="co...

メインレイアウトのレッスンでは前回の「フッターのレイアウト」レッスンと同様にこれまでに学んだ知識を用いてコードを書くため主に復習になります。 また、新しく学ぶことはHTMLのspanタグです。 spanタグ単体では意味を持ちませんが、囲んだ要素をグループ化することができます。 HTML の<span>要素は...

コアラ今までに学んだことを活かす時が来たね ひつじのジョージ忘れたところは復習して知識を定着させようね フッターのレイアウトレッスンでは今までにヘッダーやフッターの構造レッスンで学んだことを活かしてレイアウトしていきます。 具体的には floatpadding入れ子になったHTMLタグを指定してCSSセレクタで装飾 の...

コアラこのレッスンの完成はヘッダーと同じような形だね ひつじのジョージヘッダーのレッスンで学んだことを活かして作っていくよ このレッスンではフッターの構造を作っていきます。 このレッスンで記述することはヘッダーで学んだことが活かされます。 ヘッダーの構造ヘッダーのレイアウトヘッダーの余白 またこのレッスンで新しく学ぶこ...

ヘッダーの余白レッスンではヘッダーのコンテンツのロゴとリストに対して余白を取り見栄えをよくします。 余白を取る方法はCSSのpaddingプロパティを使用します。 paddingはCSSの一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。https://developer.mozilla.org/j...

コアラレイアウトを整えていくのはテンション上がるね。 ひつじのジョージ作っている気分を味わえるからね。レイアウトを整えるにはCSSのfloatプロパティを使うよ。 ヘッダーのレイアウトレッスンではヘッダー内にあるコンテンツを横並びにする方法を学びます。 ヘッダーコンテンツを横並びにするにはCSSのfloatプロパティを...