HTML&CSS入門8〜簡単なチュートリアル〜

 

 

こんにちは、すぐるです

 

 

入門7では、要素を中央寄せする方法について学びました入門8では、今までの知識を使って簡単なWebページのテンプレートをつくっていきます

 

入門は今回で最後になります。最後まで頑張りましょう

 

 

ーーーーーーーーーーーー

HTML&CSS入門8で学べること

 

♢ウェブページのテンプレートが作れる

ーーーーーーーーーーーー

 

テンプレートをデザインする

 

 

今回は、次のようなテンプレートをデザインします

 

今回意識してほしいところは次の二つです

・全体を中央寄せするところ

・メインコンテンツとサイドバーを横並びにするところ

 

では、早速はじめましょう

 

 

①全体の骨格をつくり、背景を指定する

 

まずは、全体の骨格を作ります。次の記述をhtmlファイルに追加してください

htmlファイル

上の図のようにhtmlタグをかいて、骨格を作ります。<div>タグは通常たくさん使うのでそれぞれid名をふってあげます

 

次にcssで要素に背景をつけます。次の記述を追加してください

cssファイル

わかりやすいように背景を指定しました

 

この段階でブラウザがどのようになっているか確認します

ブラウザ

しっかりとできています

 

 

②要素の高さと横幅をそれぞれ指定する

 

ヘッダー、メインコンテンツ、サイドバー、フッターの高さと横幅を指定していきます

 

cssファイルに次の記述を追加してください

cssファイル

高さと横幅を指定しました

 

ブラウザを確認してみましょう

しっかりと反映されています。ここで注目したいのが、全体を中央寄せさせるために作った親要素<div id=”wrapper”>タグの背景オレンジ色が見えているところです

 

 

③全体を中央寄せする

 

いま横いっぱいに広がっている親要素<div id=”wrapper”>タグの横幅を指定して、全体を中央に寄せます

 

次の記述をcssファイルに追加してください

cssファイル

親要素<div id=”wrapper”>タグの横幅を指定して、中央に寄せました

 

ブラウザを確認してみます

しっかりと中央に寄せられていることがわかります

 

 

④メインコンテンツとサイドバーを横に並べる

 

cssのfloatプロパティを使って、メインコンテンツとサイドバーを横に並べます。また親要素に対して、しっかりとoverflow: hidden; をかけてfloatを解除してあげます

 

次に記述をcssファイルに追加してください

cssファイル

floatをかけて、要素を右に寄せます。そして、親要素の<div id=”main”>タグに対してoverflow: hidden;をかけてfloatを解除してあげます

 

ブラウザを確認してみましょう

しっかりと横に並んでいます

 

 

⑤余白を調整して綺麗にする

 

最後は、marginプロパティを使って余白を調整していきます

 

cssファイルに次の記述を追加してください

cssファイル

marginを指定して、余白を綺麗に調整しました。また、サイドバーの横幅が少し狭かったので広げました。

 

ブラウザを確認してみましょう

きれいにできています

 

 

複雑なウェブページのデザインをするときも、もっと細かいデザインをするときも、今回やったことがすべての基本になります

 

HTML&CSS入門はこれで終わりです。おつかれさまでした

 

 

※一箇所だけミスがありました。上記のhtmlファイル内の、<div id=”main”>タグの閉じタグがしっかり閉じられていませんでした。うまくいかなかった場合、そこが原因かもしれません

 

 

 

本気でWebデザインを学ぶなら

 

本気でウェブデザインを学ぶなら、Udemyのオンライン講座 が超おすすめです

ぼくは19歳のときUdemyでWebデザインの勉強をはじめて

その半年後にフロントエンジニアとして仕事を取ることができました

 

こうなることができたのは、完全にUdemyのおかげだと思っています

Udemyのコースはどれも質が高くてすごい分かりやすいです

しかし、量が豊富なので、勉強するにはかなり骨が入りましたが(笑)

 

ちなみに、ぼくは今でも複数のコースで学んでいます

 

もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います

 

最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる! 」っていうコースです

未経験からプロのWebデザイナーになる!

 

かなり丁寧に解説されていて、19歳のポンコツな頭でも理解することができました

ついでにPhotoShopも応用的なところまでこのコースで学べます

 

他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください

 

Udemy  はこちらから!