簡単なコーディングを体験しよう[CSS編]
こんにちはkazutoです。今回は「簡単なコーディングを体験しよう[HTML編]」 の続編です。
※実際にコーディングをしたい方は下記のリンクに戻ってHTML編から進めてください。
完成品を見てみよう
前回は、HTMLを使って問題の骨組みを作りました。しかし、まだ何も装飾されておらず不完全な状態です。なのでCSSを使ってデザインしていきましょう。
まず、初めは現在の状況と完成品の状況を比較してみましょう。
[完成品]
こちらが今回、作成していただく完成品になります。難易度としては優しい内容になっておりますので落ち着いてコーディングしていけばできます。
[現在]
<div class="header">
<h1 class="header_text">kazuguramming</h1>
<ul class="lists">
<li class="list">自己紹介</li>
<li class="list">お問い合わせ</li>
<li class="list">概要</li>
</ul>
</div>
<div class="main">
<div class="contents">
<div class="content1">
<p class="content1__text">HTML&CSS</p>
</div>
<div class="content2">
<p>Ruby</p>
</div>
<div class="content3">
<p>Ruby on Rails</p>
</div>
<div class="content4">
<p>javascript</p>
</div>
</div>
</div>
<div class="footer">
@kazutotake
</div>上記が現在の状況です。CSSで、何も装飾していないので、少し何をしているかは、わからないです。なので、CSSのプロパティのbackground-colorを使ってブロック分けしましょう。
background-colorを使って3分割にしよう
完成品、現在の状況が確認できたら、background-colorを使ってHTML要素をブロック分けしていきましょう
background-colorを用いて、各ブロックを色分けする事で全体のレイアウトが把握しやすくなります。
また、初学者が難しく感じる余白の設定も、直感的に理解しやすくなります。
HTML構造から大きく3つのブロックに分かれていると思います。
- ヘッダー
- メイン
- フッター
なので上記の3つにbackground-colorで色分けしましょう。
色分けすると
以下のようになると思います。少しレイアウトが崩れていますが、CSSを使って修正していくので心配しなくても大丈夫です。
.header{
background-color:black;
width: 100%;
height: 100px;
}
.main{
height: 500px;
width: 100vw;
background-color:rgb(222, 220, 220);
}
footer{
background-color: black;
height: 100px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
color: white;
}ソースコードは上記の通りなっていればOKです。background-color を使う事で、全体のレイアウトが頭の中に入ったと思います。
なので、コーディングする際に、background-colorを用いてブロック分けをするのがおすすめです。
３分割にできたら細い部分を実装していきましょう。
ヘッダーを完成させよう
ヘッダー部分は、便利なFlex-boxを使ってコーディンしていきます。なのでまず初めにFlex-boxについて解説していきます。
Flex-boxとは❓
Flex-boxとは、複雑なレイアウトを簡単にコーディングできる便利な機能です。
例えば
- 横並びにしたい
- 中央寄せにしたい
- 均等に余白を取りたい
などの複雑なデザインをflex-boxを使うと容易に再現することができます。
上記はflex-boxのチートシートです。まずは、チートシートを見ながら慣れていきましょう。
もっとFlex-boxを深く知りたい方は下記のサイトをご覧ください
Flex-boxは、最初のうちは慣れないと思いますが、時間が経てば馴染んできて、CSSのレイアウトをするのがとても楽になります。
実装例
.header{
background-color:black;
width: 100%;
height: 100px;
color:white ;
display: flex;
justify-content: space-around;
position: fixed;
top:0;
left: 0;
}
.lists{
display: flex;
list-style: none;
line-height: 90px;
}
.list{
margin-right: 20px;
}以下のように記述して頂くと
上記の通りになると思います。
コーディングのポイントは、先ほど解説したFlex-boxです。
header{
display: flex;
justify-content: space-around;
}display: flex;は要素を横並びにするというプロパティです。
justify-content: space-around;は、スペースを均等に割り付けています。justify-content:はdisplay: flex;(横並び）をしてから使うという認識だと覚えやすいです。
しかし,header部分にdisplay: flex;を使っても画像のようにはなりません。
以下の様な状態になってしまいます。
理由としては、あくまでも横並びをしているのは、h1タグとulタグなので、それ以降の階層のhtml要素は、横並びにはならないです。
display: flex;は、子要素を横並びにする特性があります。なのでheaderタグの子要素を横に並べます。
※liタグはheaderタグの子要素ではないので横並びにはなりません。
[headerの子要素]
<h1 class="header_text">kazuguramming</h1>
<ul class="lists"></ul>なので、子要素に該当しないli要素は縦並びを保持した状態になってしまいます。
liタグを横並びにしたい場合は、display: flex;の特性に基づいてコーディングする必要があります。
したがって、liタグの親要素であるulタグにdisplay: flex;を追記すれば liタグが横並びになります。
.lists{
display: flex;
list-style: none;
line-height: 90px;
}list-style: none;は・を消しています。
line-height: 90px;は行間の調整しています。
.list{
margin-right: 20px;
}margin-right: 20px;は、liタグの余白を調整しています。この記述がないと以下の様な状態になってしまいます。
文字が繋がっている様に見えていて、歪な形になってしまいます。
なので余白を当てる必要があります。
メインを完成させよう
続いてメイン部分をコーディングしていきましょう。メイン実装のポイントはブロック要素の親子関係です。
なので親子関係を意識をして実装していきましょう。
以下の記事をご覧ください。
実装例
.main{
padding-top: 100px;
height: 500px;
width: 100vw;
background-color:rgb(222, 220, 220);
margin: auto;
padding-bottom: 100px;
}
.contents{
padding-top: 100px;
height: 100%;
width: 80%;
background-color: white;
display: flex;
justify-content: space-around;
margin: auto;
font-size: 20px;
}
.content1{
margin: auto;
height: 200px;
width:200px;
background-color: cadetblue;
text-align: center;
line-height: 150px;
}
.content2{
margin: auto;
height: 200px;
width:200px;
background-color: red;
text-align: center;
line-height: 150px;
}
.content3{
margin: auto;
height: 200px;
width:200px;
background-color:rgb(135, 71, 71);
text-align: center;
line-height: 150px;
}
.content4{
margin: auto;
height: 200px;
width:200px;
background-color: yellow;
text-align: center;
text-align: center;
line-height: 150px;
}
メインの実装が終わったら、上記の様な状態になっていればOKです。
それでは、順に解説をしていきます。
まず初めは HTML構造をご覧ください
<div class="main">
<div class="contents"></div>
</div> mainの中にcontentsが入っているのがわかると思います。完成品を見て頂くと、左右の余白がグレイになっています。
この状態を再現している方法としては、mainの背景色をグレイにして、contentsの背景色を白にして中央寄せしているだけです。
言葉だけではわからないと思うので、コードで確認してみましょう。
.main{
height: 500px;
width: 100vw;
background-color:rgb(222, 220, 220);
padding-bottom: 100px;
}
.contents{
padding-top: 100px;
height: 100%;
width: 80%;
background-color: white;
margin: auto;
font-size: 20px;
}
新しく出てきたプロパティはないので、解説を一部、省略させていただきます。
margin: auto;contentsを中央寄せにしています。
padding-top:100px;トップの余白を設定しています。
ただ中央寄せにしただけです。
続いてcontentsの子要素をデザインしていきましょう。
- content1
- content2
- content3
- content4
content1~4までを横並べにして中央寄せにするだけです。先ほどcontentsを中央寄せした方法と同じ容量です。
.contents{
・・・省略
display: flex;
justify-content: space-around;
}
.content1{
margin: auto;
height: 200px;
width:200px;
background-color: cadetblue;
text-align: center;
line-height: 150px;
}
.content2{
margin: auto;
height: 200px;
width:200px;
background-color: red;
text-align: center;
line-height: 150px;
}
.content3{
margin: auto;
height: 200px;
width:200px;
background-color:rgb(135, 71, 71);
text-align: center;
line-height: 150px;
}
.content4{
margin: auto;
height: 200px;
width:200px;
background-color: yellow;
text-align: center;
line-height: 150px;
} display: flex;
justify-content: space-around;
上記のプロパティでcontent1~4までを横並べにして中央寄せにしております。
text-align: center;
line-height: 150px;
上記のプロパティで中に入っているpタグを中央寄せにしています。
以上がメイン部分になります。ヘッダー部分を少し応用したイメージなので難しく感じると思いますが、徐々に手を動かして慣れていきましょう。
フッターを完成させよう
フッターは、ヘッダー、メインを実装してきたあなたのレベルだと簡単に実装できてしまいます。
まずは、自分で考えてみましょう。
ヒント
- フッターを固定する
- @kazutotakeを中央寄せする
実装例
.footer{
background-color: black;
height: 100px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
color: white;
text-align: center;
line-height: 100px;
}簡単に解説していきます。
position: fixed;
bottom: 0;
left: 0;
上記はフッターを固定しています。
bottom,leftを０と記述する事でフッターの位置を決めています。
フッターの説明は以上です。
まとめ：簡単なコーディングを体験しよう[CSS編]
お疲れ様でした。ここまでコーディングをできたあなたは
- Progate
- ドットインストール
で学習しても「意味がわからない・・・」にならずに考えながらコーディングができると思います。
なので自信を持ってください。
今回は
- Flexbox
- margin
- position: fixed
を使って実装していきました。また、詳しく知りたい方はググルなどして知識を補完してください。
以上kazutoでした。