こんにちは、オノユウ(@yumaonodera_)です。
プログラミング初心者「Progateでプログラミングを学習しているけど、道場コースで詰みました。プログラミング初心者がつまずきやすいポイント教えてください。」
こういった方向けの記事。
本記事では、ProgateのHTML&CSS道場コースについて解説します。
まずは基本を進め方を確認し、その後、初級、中級、上級の順につまづきやすいポイントを見ていきましょう。
基本の進め方
下記の通りです。
- 仕様書を確認する
- HTMLを書く
- CSSを書く
- ヒントを見る
仕様書を確認する
ありがたいことに仕様書がありますので、まずは仕様書を開いて内容を確認しましょう。
仕様書を開くと、フォントサイズや要素の位置などが丁寧に書いてありますので、この通りにマークアップしていきましょう。
私は途中まで仕様書の存在に気づかないまま進めていまして、無駄に苦労しました。
HTMLを書く
先にHTMLを全て書きましょう。
HTMLとCSSを交互に書くと、いちいちタブを切り替える必要があり、時間がかかってしまうからです。
HTMLの書き方はだいたいこんな感じです。
HTMLの構成は、サイトに表示されないものを記述するhead部分と、サイトに表示されるbody部分に分かれます。
head部分に書くもの
- 文字コードの宣言
- サイトタイトル
- CSSの読み込み
body部分に書く時に意識すべきこと
- スタイリング用に要素を作るときは、divタグを用いる
- headerとfooter以外の一番外側のdivタグのclass名は、〇〇-wrapperとかが分かりやすい（例：top-wrapper、lesson-wrapperなど）
- header、footer、wrapperの内側のdivタグには、containerクラスを用いる
クラス名とかは、それなりに分かりやすければ好きな名前でいいのですが、自分なりにある程度マイルールを決めておくとやりやすいでしょう。
CSSを書く
HTMLが一通り書き終わったらCSSを書きます。
CSSを書くうえで意識すべき点は次の3つ。
- containerクラスはウィンドウサイズなどを書く
- wrapper系クラスは背景色、padding設定、文字色、文字の位置などを書く
- 要素の位置や色など、wrapperでは対応できない細かな部分は、それぞれクラスを定義して指定する。
上記の内容をおさえておくと、スムーズに書けるでしょう。
ヒントを見る
分からなかったら、いさぎよくヒントを見ましょう。
ヒントを見れば分からないところはだいたい解決します。
初級編
要素の横並びで詰まります。
解決方法は「float」です。
「float: left;」と指定すると、要素が左に寄り、その後に続く要素は右側に回り込みます。
この「右側に回り込む」という特性を活かすことで、要素を横並びにすることができるのです。
例えば、floatを指定しないとこんな感じになります。なお、文字色は分かりやすいように黒にしています。
通常の場合、要素は縦並びなので、リストがヘッダー内に収まっていない状態です。
そこで、まずは「header-list」のliタグに対して、float指定をしてあげます。
すると、リストの最初の項目が左寄せになり、その後に続く次の項目は右側に回り込みます。
これで「header-list」の中身は横並びになりました。
ただし、「header-logo」と「header-list」が縦並びになっているため、まだリストがヘッダーに収まっていません。
この場合は、先ほどと同様に、今度は「header-logo」に対してfloat指定してあげます。
「header-logo」が左寄りになったことで、その後に続く「header-list」が右側に回り込みました。
要素を横並びにする方法は他にも色々あるのですが、Progateではfloatが使われることが多いです。
floatはややこしい仕組みですが、覚えておいて損はないでしょう。
中級編
下記の4つで詰まるかと思います。
- 文字の間隔
- ボタンの大きさ指定
- ヘッダーの固定
- 画像に文字を重ねる
順番に解説していきます。
文字の間隔
「letter-spacing」で間隔指定すればOKです。
例：letter-spacing: 5px;
ボタンの大きさ指定
レッスンではボタンはaタグで作ると思うのですが、aタグはインライン要素といって、幅や高さが指定できなかったり、上下のmarginが指定できないなど不便な点があります。
そこで登場するのが、displayプロパティです。
ボタンに対して、「display: inline-block;」と指定することにより、幅や高さが指定できるようになり、さらに要素が横並びになります。
ヘッダーの固定
header要素に対して、「position: fixed;」と指定します。
ただし後に書かれた要素が上に重なるため、スクロールすると、ヘッダーに見出しやボタンが重なってしまいます。
これを解決するのが、「z-index」です。
z-indexは表示順を指定するプロパティで、数値が大きいほど前面に表示されます。
通常のz-indexは「0」なので、header要素に対して「z-index: 1;」と指定することで、他の要素よりも前面に表示されます。
画像に文字を重ねる
画像に重ねる文字に対して「position: absolute;」を指定しましょう。
position: absolute;を使うと、要素を重ねて表示することができます。
サイトの左上を基準とし、そこからの位置を「top: ○px」、「left: ○px」といったかたちで指定できます。
position: absolute;の基準位置はサイトの左上ですが、この基準位置は変更できます。
基準としたい親要素に対して、position: relativeと指定することで、その要素の左上部分が基準になります。
上級編
見出しの回り込み解除で詰まります。
上級編では、最初からこのように、見出しがレッスンの右側に回り込んだ状態で表示されています。
以前学習した時よりも期間あけてからやったため、正直言うと、この状態にはわりと戸惑いました。
原因はlessonクラスに設定されている「float: left;」の指定です。
lessonクラスで「float: left;」が設定されているため、その後に続く見出しが右側に回り込んでしまうのです。
この現象は、clearプロパティを使用することによって解決できます。
clear: left;を指定すると、float: left;の回り込みが無効に、clear: right;を指定するとfloat: rightの回り込みが無効になります。
まず、HTML側にclearクラスを持つ要素を追加します。
場所はcontainerクラスの配下です。
次にCSS側でclearクラスに対して、「clear: left;」を指定します。
こうすることで、lessonクラスで指定されている「float: left」の回り込みが無効化され、見出しが正しく表示されます。
HTML側に記述する「<div class=”clear”></div>」について、なぜcontainerの位置に書くべきなのか疑問に思う人もいるかもしれませんが、正直私もよく分かりません。
実際に使用するときは、レイアウトを確認しつつ、どこの要素に追加すべきか一箇所ずつ試していくしかないかなと思います。
まとめ
特にややこしいのは、float周りの仕様ですかね。
ただ、今はFlexboxとかでも代用できるので、実務でfloatを使うことはあまりないかなとも思います。
とはいえ、ProgateではFlexboxは非対応なので、floatの基本的な扱い方は覚えておくといいです。
道場コースが最後までクリアできれば、脱初心者レベルになったと言っていいでしょう。
というわけで、今回は以上となります。
基礎を固めたら、ぜひ道場コースにトライしてみてください。
コメント