【独学で学ぶHTML5/CSS3】ヘッダー部分の位置調節 5日目【初心者】

2020年5月15日WEB

【ロゴとナビを並べる】

前回作ったナビを横に並べます。

cssでリストに対して
display: flex; をかける!!
なんだそれは??
と、はてな??でいっぱいになってきましたが、進みます!💦

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
余談ですがTwitterや友人の話を聞くと
とにかく手を動かす』『わからないこと、やりたいことはググって解決させる』
これがとても大切なようです。
僕も学習のはじめは参考書をノートに書いて勉強するとういう、学習の王道スタイルで取り組んでいました。
一生懸命に取り組む僕に友人は
『そんなことしなくていいから、とりあえずやってみたほうがいい』と
何度も言ってくれました。
『いやいや何もわからないのに始められないじゃん!!』
と頭の固い僕は頑なに参考書を読むことをやめませんでしたが、過去の僕に言いたい…
『わからなくても書きながら覚えるから!!!』
アドバイスをくれた友人に感謝です!
わからないところを調べながらコードを書く。
実際に書いたコードでページが変わっていく中で少しづつ覚えていく。
参考書にかじりつくよりもよっぽど早く知識が身に付いているのを感じられます!
長くなってしまいましたがそんな感じなので、なんだそれ?わからない…となっても、まったく気にしなくて大丈夫なんです!
僕も書いてみて、実際に変わったページを見て
『このコードはこんなことしてくれるんだー!!』
って毎回感動しながら取り組んでいます!笑
大切なのはやり続けることです!!
日々積み上げましょう!!
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

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

FlexBoxの基本的な使い方を検索すると詳しく解説されているサイトがたくさん出てきますので、参考にされてください。横並び以外にも様々な並ばせ方ができるようです!

実際にナビゲーションに対して指定すると…

このようになりました!
横並びにできました!!

【希望の場所に設置】

横並びにしたナビゲーションをきれいに並べます!
余白などの設定をし、きれいに並べます!
リストの1つ1つに対して余白を設定するため
CSSに新しく
nav ul li
という項目を作り、そこに
margin-left: 20px;
と記述します。
項目の左側に20pxの余白を設置するという指定です。

【ロゴとナビゲーションを横並びに設定する】

先ほどと同じように
display: flex;
を使います。
今回はheaderに対してこちらを指定しましょう!
ロゴとナビゲーションが横に並びました。

もっと細かく位置の指定をします
justify-content: space-between;
で、ロゴとナビゲーションの間隔をもち、
align-items: center;
で、高さを中央に揃えるように指定します。

ヘッダー部分がこうなりました!

次回はメイン画像を表示させていきます!

まだまだサイトのほんの一部しか作成できていませんが、
自分で書いたコードで実際にページが作られていくのがとても嬉しいです!!

まだまだ全然ですが、毎日少しづつ技術を積み上げていきたいです!!
僕は『Udemy』を利用して学習に取り組んでいます!
自宅で自分の生活リズムに合わせて学習に取り組めるので、おすすめです!!

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya