プログラマーになる プロゲート無料HTMLCSS プロゲートのお問合せフォームのレイアウト(2)レッスンの解説とよくあるミス 2021年11月30日 お問合せフォームのレイアウト(2)レッスンではフォームの入力項目を作っていきます。 このレッスンで新しく学ぶことは inputタグtextareaタグ です。 inputはテキスト入力や送信ボタンを作る時に使います。 HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム...
プログラマーになる プロゲート無料HTMLCSS プロゲートのお問合せフォームのレイアウトレッスンの解説とよくあるミス 2021年11月29日 コアラフォームの本体はまだ作らずに、まずはレイアウトからだね ひつじのジョージそう。このレッスンではレイアウトだけだから主に復習になるよ お問合せフォームのレイアウトのレッスンではこれまでに学んだ知識を用いてフォームのレイアウトを作るので、主に復習になります。 復習する内容は 復習内容 paddingプロパティの使い方...
プログラマーになる プロゲート無料CSS プロゲートのpaddingとmarginレッスンの解説とよくあるミス 2021年11月26日 paddingとmarginレッスンでは主にpaddingとmarginを使ってレイアウトを整えます。 paddingは「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」で学びました。 少し復習するとpaddingは前回学んだ「ボーダー」の内側に余白を取るCSSでした。 今回新しく学ぶmarginはボーダーの外...
プログラマーになる プロゲート無料HTMLCSS プロゲートのボーダーレッスンの解説とよくあるミス 2021年11月25日 ボーダーレッスンで新しく学ぶことは線を引く方法です。 線を引くにはCSSのborderプロパティを使用します。borderプロパティの構文は border: 幅 種類 色 です。この構文に値を入れると次のようになります。 /* border: 幅 種類 色 */ border: 3px solid green; ↓結果...
プログラマーになる プロゲート無料HTML プロゲートのコンテンツの構造レッスンの解説とよくあるミス 2021年11月23日 コンテンツの構造レッスンでは今までに学んだ知識を使ってコンテンツを作っていきます。 このレッスンでは最近で使用していなかった画像をしようするので、画像レッスンを復習しておくとスムーズに進みます。 また、以下のコードのように同じクラスを付与したdivタグの使い方と意味も理解しましょう。 <div class="co...
プログラマーになる プロゲート無料HTMLCSS プロゲートのメインのレイアウトレッスンの解説とよくあるミス 2021年11月22日 メインレイアウトのレッスンでは前回の「フッターのレイアウト」レッスンと同様にこれまでに学んだ知識を用いてコードを書くため主に復習になります。 また、新しく学ぶことはHTMLのspanタグです。 spanタグ単体では意味を持ちませんが、囲んだ要素をグループ化することができます。 HTML の<span>要素は...
プログラマーになる プロゲート無料CSS プロゲートのフッターのレイアウトレッスンの解説とよくあるミス 2021年11月19日 コアラ今までに学んだことを活かす時が来たね ひつじのジョージ忘れたところは復習して知識を定着させようね フッターのレイアウトレッスンでは今までにヘッダーやフッターの構造レッスンで学んだことを活かしてレイアウトしていきます。 具体的には floatpadding入れ子になったHTMLタグを指定してCSSセレクタで装飾 の...
プログラマーになる プロゲート無料HTMLCSS プロゲートのフッターの構造レッスンの解説とよくあるミス 2021年11月18日 コアラこのレッスンの完成はヘッダーと同じような形だね ひつじのジョージヘッダーのレッスンで学んだことを活かして作っていくよ このレッスンではフッターの構造を作っていきます。 このレッスンで記述することはヘッダーで学んだことが活かされます。 ヘッダーの構造ヘッダーのレイアウトヘッダーの余白 またこのレッスンで新しく学ぶこ...
プログラマーになる プロゲート無料CSS プロゲートのヘッダーの余白レッスンの解説とよくあるミス 2021年11月17日 ヘッダーの余白レッスンではヘッダーのコンテンツのロゴとリストに対して余白を取り見栄えをよくします。 余白を取る方法はCSSのpaddingプロパティを使用します。 paddingはCSSの一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。https://developer.mozilla.org/j...
プログラマーになる プロゲート無料HTMLCSS プロゲートのヘッダーのレイアウトレッスンの解説とよくあるミス 2021年11月16日 コアラレイアウトを整えていくのはテンション上がるね。 ひつじのジョージ作っている気分を味わえるからね。レイアウトを整えるにはCSSのfloatプロパティを使うよ。 ヘッダーのレイアウトレッスンではヘッダー内にあるコンテンツを横並びにする方法を学びます。 ヘッダーコンテンツを横並びにするにはCSSのfloatプロパティを...