作成日：2021/04/12　更新日：2022/07/04

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

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

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

画像の配置



  
  CRI BOOT CAMP


.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プロパティを削除します。

背景画像の配置

また、ロゴのように配置したい場合は<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>タグを入れます。

このようになります。

olは`order list`ulはun-order listです。 orderは順序という意味で、横のリストの区切りのマーカーが数字になります。


<ul>
  <li>あ</li>
  <li>い</li>
  <li>う</li>
  <li>え</li>
  <li>お</li>
</ol>

→


<ol>
  <li>あ</li>
  <li>い</li>
  <li>う</li>
  <li>え</li>
  <li>お</li>
</ol>

→

ただ、cssプロパティのlist-style-typeでリストのマーカーの種類を変更できます。すごくたくさんの種類があります

list-style-type: none
list-style-type: disc
list-style-type: circle
list-style-type: square
list-style-type: decimal
list-style-type: decimal-leading-zero
list-style-type: upper-roman
list-style-type: lower-alpha
list-style-type: japanese-informal

#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で使ったプロパティの数

width	7個
height	5個
margin	8個
padding	1個
font	4個
color	2個
text-align	1個
background	3個
border	1個
display	7個
align-items	5個
align-self	1個
justify-content	2個

コーディングのおさらい

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

次のページ ▶

作成日：2021/04/12　更新日：2022/07/04

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

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

画像の配置

背景色の指示と配置

背景画像の配置

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

#15 枠の中にテキストとリストタイプを入れる

リストタイプ（箇条書き）のテキストを入れてみましょう

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

コーディングのおさらい

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12 更新日：2022/07/04

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

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

画像の配置

背景色の指示と配置

背景画像の配置

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

#15 枠の中にテキストとリストタイプを入れる

リストタイプ（箇条書き）のテキストを入れてみましょう

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

コーディングのおさらい

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12　更新日：2022/07/04

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

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）