気ままに趣味旅行

面白いコト「拡がる／拡げる」

トップ > HTML/CSS > 【初心者向け】HTML／CSSの基礎4

【初心者向け】HTML／CSSの基礎4

HTML/CSS

どうもhiroakiです。

 

今回は前回に続き、ウェブページを作るうえで大切な、HTML5/CSS3の基礎についてまとめていきます。

hiroakies.hatenablog.com

 

Lesson8

前回に続きヘッダ部分を変えてみましょう。

完成イメージ

f:id:hiroakies4463:20181118190810j:plain

  1. <-! ヘッダ部分 -->
  2. <div class="header">
  3.   <div class="header-logo">気ままに趣味旅行</div>
  4.   <div class="header-list">
  5.     <ul>
  6.       <li>HTML／CSS</li>
  7.       <li>Python</li>
  8.       <li>読書</li>
  9.       <li>映画</li>
  10.       <li>カフェ</li>
  11.     </ul>
  12.   </div>
  13. </div>
  1. .header-logo {font-size:30px;
  2.     float:left;
  3.     padding: 20px 20px 20px 0px;}
  4. .header-list {float:left;
  5.     padding: 30px 40px;}
  6. .header-list li{ list-style: none;
  7.     float:left;}

解説していきます。

まず、header-logoのプロパティを指定します。

「float」プロパティではセレクタの位置を変えることができます。左へ移動させましょう。「header-logo」と「header-list」を左へ移動します。「header-list li」内も「float」で左揃えにします。

次に「padding」についてです。これは範囲の内側余白を指定するプロパティです。２つの方法があります。

  1. .header-logo {padding: 20px 20px 20px 0px;}
  2. .header-list {padding: 30px 40px;}

1.ではtop（上）から右まわりで余白を指定します。

padding: 20px(top) 20px(right) 20px(bottom) 0px(left)

2.では上下、左右で余白を指定します。

padding: 30px(top,bottom) 40px(right,left)

他にも下記のように指定できます。

padding: 30px(top) 40px(right,left) 30px(bottom)

また、padding-方向のプロパティを使えばその方向の余白を指定できます。

 

同様にフッタも指定できます。

Lesson9

次にmain要素の中に「copy-container」「contents」「contact-form」の3つの要素を作っていきます。

完成イメージ

f:id:hiroakies4463:20181118221229j:plain

  1. <-! メイン部分 -->
  2. <div class="main">
  3.     <div class="copy-container">
  4.         <h1>気ままに趣味旅行<a> 面白いコト「拡がる／拡げる」</a></h1>
  5.         <h2>日常を楽しく生きよう</h2>
  6.     </div>
  7.     <div class="contents">
  8.      </div>
  9.     <div class="contact-form"> 
  10.     </div>
  11. </div>
  1. .main {padding:70px 60px;}
  2. .copy-container h1{font-size:60px;}
  3. .copy-container h2{font-size:40px;}
  4. .copy-container a{font-size:30px;
  5. color:#f5ab50;}

文中の一部にCSSを適用させたい場合は、<span>要素や<a>で囲みます。完成イメージでは、<a>タグにCSSを指定することで、文中の一部の文字色を変えています。また、インライン要素である<a>タグの前後には改行が入りません。

<div><h1><p>はブロック要素といい、幅一杯に広がり、改行します。

<span><a>はインライン要素といい、改行されません。

 

Lesson10

次にコンテンツ部分を作っていきます。

完成イメージ

f:id:hiroakies4463:20181118231618j:plain

  1. <-! メイン部分 -->
  2. <div class="contents">
  3.   <h3 class="section-tittle">案内</h3>
  4.   <div class="contents-item">
  5.     <img class="Bsquare"  title="f:id:hiroakies4463:20181113124234j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181113/20181113124234.jpg" alt="f:id:hiroakies4463:20181113124234j:plain" />
  6.     <p>中華そば青葉</p>
  7.   </div>
  8.   <div class="contents-item">
  9.     <img class="Bsquare" title="f:id:hiroakies4463:20181112153458j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181112/20181112153458.jpg" alt="f:id:hiroakies4463:20181112153458j:plain" />
  10.     <p>レナードの朝</p>
  11.   </div>
  12.   <div class="contents-item">
  13.     <img class="Bsquare" title="f:id:hiroakies4463:20181116165148j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181116/20181116165148.jpg" alt="f:id:hiroakies4463:20181116165148j:plain" />
  14.     <p>トムくん</p>
  15.   </div>
  16.   <div class="contents-item">
  17.     <img class="Bsquare" title="f:id:hiroakies4463:20181118023618j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiroakies4463/20181118/20181118023618.jpg" alt="f:id:hiroakies4463:20181118023618j:plain" />
  18.     <p>漂流家族</p>
  19.   </div>
  20. </div>
  1. .Bsquare{width:100px;
  2.     height:100px;}
  3. .section-title{border-bottom:2px solid #dee7ec;}
  4. .contents-item{height:200px;
  5.     float:left;}

Bsquareクラスを作ったのがポイントです。あとはこれまでの説明で分かるかと思います。

もし、分からなければ何度も繰り返しコードを打って確かめてみましょう。

 

今回はこの辺で！

次回も基礎的なことを紹介していきます。自分も学びながら紹介しているので、ご指摘やご意見ありましたら、コメントくださるとうれしいです。

 

では。