#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タグを使います。枠「logo」の中に<img>タグで画像を、続いて文字を入れます。
srcという属性タグはsource（ソース）の略です。
cssでは、親要素にdisplayプロパティflexを使い、ロゴと文字を横並びにするよう指示し、 align-itemsプロパティcenterで親要素の天地に対してセンター合わせになるよう指示します。

このようになります。

背景色の指示



  header /*← 削除する */
  
    
      
      CRI BOOT CAMP


.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をつかって親要素の天地に対してセンター合わせになるよう指示します

このようになります。

背景画像の配置

また、ロゴのように配置したい場合は<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(ハイパーテキストを参照)という意味です。



  
    html+cssを習得するには、実際に作りながら覚えるのが一番！
    英語でも文法を学ぶより、話すことが上達への近道なように。
  
  
    
      ホームページの作り方
      htmlとcssをつかう
      htmlで枠を作る
      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

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

コーディングのおさらい

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

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

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

画像の配置

背景色の指示

背景画像の配置

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

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

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

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

コーディングのおさらい

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

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

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

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

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

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

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

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

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

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

実践4（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

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

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

画像の配置

背景色の指示

背景画像の配置

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

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

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

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

コーディングのおさらい

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

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

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

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

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

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

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

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

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

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

実践4（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

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

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

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

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

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

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

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

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

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