#14 枠の中に画像や色を入れる

画像表示はhtmlで配置する場合と、cssで配置する2パターン

まずは素材をダウンロードしましょう。
素材をダウンロード
ダウンロード→解凍が終わったら、imagesフォルダをindex.htmlと同じ階層に入れましょう。

画像の配置




.logo{
  width:200px;
  color:#52b6ac;
  font-size:12px;
  display:flex;
  align-items:center;
}
.logo img{
  width:50px;
  margin-right:10px;
}
htmlでは、画像を配置するときimgタグを使います。枠「logo」の中に<img>タグで画像を、続いて文字を入れます。
srcという属性タグはsourceソースの略です。
cssでは、親要素にdisplayプロパティflexを使い、ロゴと文字を横並びにするよう指示し、 align-itemsプロパティcenterで親要素の天地に対してセンター合わせになるよう指示します。

このようになります。

背景色の指示


header /*← 削除する */

.header{
  height:150px;
  margin-bottom:20px;
  /*border: 1px solid #000;*/
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
htmlでは、必要がなくなったheaderという文字を削除します。
cssでは、必要がなくなったborderプロパティを削除します。

子要素の配置について指示を書きます。displayプロパティflexを使いflexボックスにして、 align-itemsプロパティcenterをつかって親要素の天地に対してセンター合わせになるよう指示します

このようになります。

背景画像の配置


配置する画像のサイズは「幅1,000px・高さ667px」となっています。 枠「visual」は「幅980px・高さ400px」なので画像は切り取られて配置されます。どの部分を切り取るかは、cssで指示します。
また、ロゴのように配置したい場合は<img>タグを使って配置しますが、 画像の上に文字を置きたい場合は、cssでbackgroundプロパティを使い背景画像として配置します。


楽しく習得。
もっと学習。


.visual{
  height:400px;
  background: url("../images/top_bg.jpg") no-repeat center center;
  display: flex;
  align-items: center;
}
.copy{
  color:#FFF; /*文字の色指定*/
  margin-left:100px; /*左側の余白*/
  font:normal 32px/2em sans-serif;
}
htmlでは、必要がなくなったvisualとcopyという文字列を削除します。
また、タイトルに当たる要素はhタグ(h1〜6 heading)を使いましょう。
brタグ(line break)はテキストを改行させるタグです。

cssでは、必要がなくなったborderプロパティを削除します。
visualクラスに対するflex関係のプロパティはもう大丈夫ですね。天地の中央に配置するためのものです。

copyクラスのfontプロパティで使われている単位「em」とは1文字分の大きさのことです。32pxという指示がありますので、2emは64pxということなります。

このようになります。
・backgroundプロパティについて
background: url("images/top_bg.jpg")画像ファイルの場所 no-repeat繰り返し処理 center画像の左右の位置 center画像の上下の位置;

・文字に関してはfontプロパティを使います。
font: normal文字のウェイト 32px/2em文字のサイズ / 行間 sans-serif書体の種類;

#15 枠の中にテキストを入れる

リストタイプのテキストを入れてみましょう

右側のテキストエリアのようにリスト形式の場合は、<li>タグを使います。
<li>タグは必ず<ol>タグか<ul>タグで囲ってあげます。
<a>タグは別のページにリンクさせたいときに使います。属性タグhrefはhypertext reference(ハイパーテキストを参照)という意味です。 <a>タグは別のページにリンクさせたいときに使います。属性タグhrefはhypertext reference(ハイパーテキスト参照)という意味です。 <a href="リンクページファイル名">という感じに使います。


html+cssを習得するには、実際に作りながら覚えるのが一番! 英語でも文法を学ぶより、話すことが上達への近道なように。

.text_wrapper{
  height:200px;
  display:flex;
  justify-content: center; /*左右センター*/
}
.text{
  width:280px;
  height:160px;
  margin-top:20px;
  padding-right:15px;
  border-right:8px solid #666; /*右側の黒い線*/
  font:normal 18px/2em sans-serif;
  display:flex;
  align-items: center; /*天地センター*/
}
.menu{
  width:300px;
  font:normal 18px/1.6em sans-serif;
  display:flex;
  align-items: center; /*天地センター*/
}
htmlでは、枠「text」内に文章をコピーしましょう。枠「menu」内にはリスト形式の文章を入れたいため、 枠<ul>タグを用意し、その中に<li>タグを入れます。<li>タグは単体では使えません。必ず<ul>や<ol>でラッピングします。

このようになります。

#16 簡単なwebサイトの完成

footer部分も入れて完成させましょう。
サンプルサイト01
まず、不要な線を画面上に出しているborderプロパティをcssファイルから削除しましょう。 タグを表示するためだけに入れていたテキストをhtmlから削除します。またfooter_contents部分の文字を枠内の最下部に配置するようcssで指定します。

<!DOCTYPE html> 
<html lang="ja"> 
 <head>
  <meta charset="UTF-8"> 
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>
  <div class="header">
    <div class="header_contents">
      <div class="logo">
        <img src="images/cbc_icon.svg">
        CRI BOOT CAMP
      </div>
    </div>
  </div>

  <div class="contents">
    <div class="visual">
      <h1 class="copy">
        楽しく習得。<br>
        もっと学習。
      </h1>
    </div>
    <div class="text_wrapper">
      <div class="text">
        html+cssを習得するには、実際に作りながら覚えるのが一番!
        英語でも文法を学ぶより、話すことが上達への近道なように。
      </div>
      <div class="menu">
        <ul>
          <li><a href="/page1.html">ホームページの作り方</a></li>
          <li><a href="/page2.html">htmlとcssをつかう</a></li>
          <li><a href="/page3.html">htmlで枠を作る</a></li>
          <li><a href="/page4.html">htmlの枠の使い方</a></li>
          <li><a href="/page5.html">cssでデザインする</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="footer_contents">©cri</div>
  </div>
 </body>
</html>

body{
  margin:0; /*ブラウザの初期設定の余白を削除*/
}
.header{
  height:150px;
  margin-bottom:20px;
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
.header_contents{
  margin:0 auto;
  width:980px;
}
.logo{
  width:200px;
  color:#52b6ac;
  font-size:12px;
  display: flex;
  align-items: center;
}
.logo img{
  width:50px;
  margin-right:10px;
}
.contents{
  margin:0 auto;
  width:980px;
}
.visual{
  height:400px;
  background: url("../images/top_bg.jpg") no-repeat center center; /* ../ は一つ前の階層に戻るという意味 */
  display: flex;
  align-items: center;
}
.copy{
  color:#FFF;
  margin-left:100px;
  font:normal 32px/2em sans-serif;
}
.text_wrapper{
  height:200px;
  display:flex;
  justify-content: center;
}
.text{
  width:280px;
  height:160px;
  margin-top:20px;
  padding-right:15px;
  border-right:8px solid #000;
  font:normal 18px/2em sans-serif;
  display:flex;
  align-items: center;
}
.menu{
  width:300px;
  font:normal 18px/1.6em sans-serif;
  display:flex;
  align-items: center;
}
.footer{
  height:120px;
  margin-top:30px;
  background-color:#bec9c9;
  display:flex;
  justify-content: center;
}
.footer_contents{
  width:980px;
  text-align: center;
  align-self: flex-end;
}
cssで使ったプロパティの数13
width7個
height5個
margin8個
padding1個
font4個
color4個
text-align1個
background3個
border1個
display7個
align-items5個
justify-content2個
align-self1個

コーディングのおさらい

step1. 紙で枠線を書く
step2. 枠線に名前をつける
step3. html書類にマークアップする
step4. cssで余白やサイズなどを記入し枠だけのデザインを完成させる
step5. 枠の中にテキストや画像といった要素を入れていく
powerd by