更新日 2021.10.14
#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」の天地に対してセンター合わせになるよう指示します。
枠「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プロパティを削除します。
※htmlでは、必要がなくなったheaderという文字を削除します。
cssでは、必要がなくなったborderプロパティを削除します。
背景画像の配置
配置する画像のサイズは「幅1,000px・高さ667px」となっています。 枠「visual」は「幅980px・高さ400px」なので画像は切り取られて配置されます。どの部分を切り取るかは、cssで指示します。
楽しく習得。
もっと学習。
タイトルに当たる要素はhタグ(h1〜6 heading)を使いましょう。
brタグ(line break)はテキストを改行させるタグです。
※必要がなくなったvisualとcopyという文字を削除します。
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;
}
背景画像を指定している最初の「 ../ 」は「一つ前のフォルダ」という意味です。style.cssファイルからみて imagesフォルダは一つ前の階層にあるフォルダなので../を入れます。
※必要がなくなったborderプロパティを削除します。
copyクラスのfontプロパティで使われている単位emとは1文字分の大きさのことです。 文字のサイズが32pxという指示がありますので、行間の2emは64pxということなります。
background: url("images/top_bg.jpg") no-repeat center center
・文字に関してはfontプロパティを使います。
font: normal 32px/2em sans-serif
このようになります。
#15 枠の中にテキストを入れる
リストタイプのテキストを入れてみましょう
<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;
}
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. 枠の中にテキストや画像といった要素を入れていく
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ