更新日 2021.07.30

#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タグを使います。 srcという属性タグはsourceソースの略です。
枠「logo」の中にimgタグで画像を、続いて文字を入力します。

cssでは親要素「logo」にdisplayプロパティ flexを使い、ロゴ画像と文字を横並びにするよう指示し、 align-itemsプロパティ centerで、親要素「logo」の天地に対してセンター合わせになるよう指示します。

このようになります。

背景色の指示と配置


<div class="header">
  header /*← 削除する */
  <div class="header_contents">
    <div class="logo">
      <img src="./images/cbc_icon.svg">
      CRI BOOT CAMP
    </div>
  </div>
</div>

.header{
  height:150px;
  margin-bottom:20px;
  /*border: 1px solid #000;*/  /*← 削除する */
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
cssでは子要素「header_contents」の配置について指示を書きます。displayプロパティ flexを使い、 align-itemsプロパティ centerで、親要素「header」の天地に対してセンター合わせになるよう指示します

このようになります。

※htmlでは、必要がなくなったheaderという文字を削除します。
cssでは、必要がなくなったborderプロパティを削除します。

背景画像の配置


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


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

タイトルに当たる要素はhタグ(h1〜6 heading)を使いましょう。
brタグ(line break)はテキストを改行させるタグです。
※必要がなくなったvisualとcopyという文字を削除します。


.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;
}
visualクラスに対するflex関係のプロパティはもう大丈夫ですね。天地の中央に配置するためのものです。
背景画像を指定している最初の「 ../ドットドットスラッシュ 」は「一つ前のフォルダ」という意味です。style.cssファイルからみて imagesフォルダは一つ前の階層にあるフォルダなので../を入れます。
※必要がなくなったborderプロパティを削除します。

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>タグは別のページにリンクさせたいときに使います。<a href="リンクページファイル名">という感じに使います。


<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>

.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>タグを入れます。

このようになります。

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

footer部分も入れて完成させましょう。
まず、不要な線を画面上に出している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;
}
サンプルサイト01
cssで使ったプロパティの数
width7個
height5個
margin8個
padding1個
font4個
color2個
text-align1個
background3個
border1個
display7個
align-items5個
align-self1個
justify-content2個

コーディングのおさらい

step1. 紙で枠線を書く
step2. 枠線に名前をつける
step3. html書類にマークアップする
step4. cssで余白やサイズなどを記入し枠だけのデザインを完成させる
step5. 枠の中にテキストや画像といった要素を入れていく
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます。
勧誘とかしないよー
cbc-study.slack.com