【独学で学ぶHTML5/CSS3】こんにちはCSS! 3日目【初心者】

2020年5月14日WEB

毎日の積み上げってなかなか難しいですよね!
自分がどうなりたいのか!!そこをぶれることなく進んでいきたいと思います。
こんにちはCSS!ということで、今回からはCSSの記述も加わってきます!!

【CSSの準備】

HTMLと同時並行で進めるため、画面を分割して2画面にします!
こうすることで作業しやすいです。

前回までに作成したそれぞれのBOXの縦幅・横幅をCSSで指定していきます。

(初めからリセットCSSと.clearfixの記述がありますが、一旦あるんだなってくらいで先に進みます!)

背景色や文字の大きさなど全体にかけていいスタイルの記述までは終わっていますので、実際に設定していくBOXをCSSの方でも作成していきます!

フロントエンドエンジニアになりたい人の Webプログラミング入門

【CSSで指定していく】

Photoshopなどで大きさを測ります。
まずはヘッダーの幅を960px、高さを99px、背景色をピンクにします。
幅の指定はwidth、高さの指定はheight、背景色はbackground-colorにて指定します。

このようにCSSで指定した設定を反映させるためには
HTMLでリンクの指定も行わなくてはいけません。
HTML headの中に
<link rel="stylesheet" href="style.css">
このように記述して
CSSを読み込む設定にしましょう!

ここまで出来たら一度更新します。

実際にサイトを見るとヘッダーがピンクになったのが確認できるかと思います。

HTMLはこんな感じになってます。

そのほかのコンテンツも幅、高さ、背景色設定をしていきます。
この時に .main_imageのようにclass名の指定しておきます。
classにCSSの指定をするときの記述は .〇〇 のように初めにドットを付けます。
また、idで指定する場合は初めにを付けます。
headerやfooterはそのまま指定してもいいです。
footerの幅は画面いっぱいなので、ピクセルで指定するのではなく100%と、パーセンテージで指定しましょう。

左側がHTML  右側がCSS class名かそのままタグの名前で指定してあります!

実際のページを確認すると、このように表示されます!

【float-フロート-】

メインイメージとトップページ・店舗紹介のBOXを横並びにするためにこちらを使って指定します。
float: left; と、
.t_navと.infoの2ヶ所に記述します。

このまま更新してしまうとfooterも横並びになってしまうため
footerは下に来るように、横並びの設定を解除してあげます。

footerの前から解除したいので
HTMLのfooterより前に
<div class="clearfix"></div>
を追加
CSSに 
.clearfix {
clear: both;
}

と記述します。
これでこれから先は横並びの設定(float)は解除されたため、footerは下になっています。

CHECK!
floatをかけたら解除するのを忘れずに!!

フロントエンドエンジニアになりたい人の Webプログラミング入門

【余白を作る】

ページに設定されている余白を測り、設定していきます。
先ほど横並びにしたBOXの間の余白は30pxなので、
margin-right: 30px; と記述し余白の設定をします。
navの右側に余白を30px作ることができました。

最初に全体の大きさを測っていたため、余白を合わせるとページの幅がきれいに揃いました!

ほかのBOXも余白の設定をしていきます。
.main_image footerにそれぞれ余白設定を加えました。

【全体を中央揃えにする】

このままではページが左寄りになっているため、中央に揃えます。
全体的な設定となるため、全体を囲んでいる
<div id="wrapper">
に設定を加えます。
CSSに
#wrapper(id指定の場合は初めに#をつける)
を作ります。
記述の順番を意識して、全体を囲むタブなのでヘッダーの上に記述します。

横幅は960px、高さは変わってくるためオートで自動調整にします。
margin: 0 auto;
これは上下0、左右はオートという設定になっていますので、結果として全体的に左右に均等に振り分けることになり、中央揃えになります。
横幅の余白の余りを2つに割って算出するため、必ず横幅とセットで記述するのを忘れないようにしましょう!!
こうなりました!!

今回はここまで!

コーディングをしていてうまくいかないときはほぼほぼ凡ミスな僕。
スペルミスや閉じタグミスなど何度もしましたが、今回はインデックスの半角、全角ミスでした…
動かないとき、なにかおかしいときはどこかにそんなミスが隠れています!
落ち込まないで慣れていきましょうー!!

僕が学習に利用しているのは『Udemy』!
オンライン学習なので、自分の好きな時間に取り組むことができます!

フロントエンドエンジニアになりたい人の Webプログラミング入門

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya