#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で親要素の天地に対してセンター合わせになるよう指示します。
srcという属性タグは
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をつかって親要素の天地に対してセンター合わせになるよう指示します
cssでは、必要がなくなったborderプロパティを削除します。
子要素の配置について指示を書きます。displayプロパティflexを使いflexボックスにして、 align-itemsプロパティcenterをつかって親要素の天地に対してセンター合わせになるよう指示します
背景画像の配置

配置する画像のサイズは「幅1,000px・高さ667px」となっています。 枠「visual」は「幅980px・高さ400px」なので画像は切り取られて配置されます。どの部分を切り取るかは、cssで指示します。
楽しく習得。
もっと学習。
.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ということなります。
また、タイトルに当たる要素はhタグ(h1〜6 heading)を使いましょう。
brタグ(line break)はテキストを改行させるタグです。
cssでは、必要がなくなったborderプロパティを削除します。
visualクラスに対するflex関係のプロパティはもう大丈夫ですね。天地の中央に配置するためのものです。
copyクラスのfontプロパティで使われている単位「em」とは1文字分の大きさのことです。32pxという指示がありますので、2emは64pxということなります。
background: url
・文字に関してはfontプロパティを使います。
font:
#15 枠の中にテキストを入れる
リストタイプのテキストを入れてみましょう
<li>タグは必ず<ol>タグか<ul>タグで囲ってあげます。
<a>タグは別のページにリンクさせたいときに使います。属性タグhrefはhypertext reference(ハイパーテキストを参照)という意味です。
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

<!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. 枠の中にテキストや画像といった要素を入れていく