CSSでデザインしよう

CSSを活用して色々なデザインをしてみよう！！
まずは練習用のフォルダーを作っておく（フォルダー名は自由）。
その中にこれから作る「index.html」を入れる。

 

練習用画像のダウンロード（ph1.jpg）

01　htmlの新規ページを作る

新規ページを作る。ファイル名は index.html

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

02　タイトルを入力

HTML

<title>Butterfly</title>

03　CSSの新規ページを作る

新規ページを作成、最初に文字コードを入れておく

@charset "utf-8";

ファイル名は自由ですがここでは「style.css」としておきます。

 

04　head内にタグを入れる

HTMLの基本とCSS ➡ HEADに入れるTAG を参考に入れてください。

文字コードの指定
<meta charset="utf-8">
viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1">
タイトルタグ
<title>ページタイトル</title>
メタディスクリプション
<meta name="description" content="ページの説明文など">
デフォルトCSSをリセット
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
CSSやJavaScriptファイルの読み込み
<link rel="stylesheet" href="CSSファイルのURL">

 

 

HTML

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Butterfly</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">

</head>


※自作のCSSは「ノーマライズ」「リセットCSS」の下へ入れる

 

05　body header footer などのマークアップとCSSを設定

ここでは簡単なレイアウトを作成
・htmlへ<header>～<footer>などのマークアップ
・各TAGのCSSを記述

HTML

<body>
<header>
</header>
<div class="container">
</div>
<footer>
</footer>
</body>

CSS

body {
margin: 0;
font-family:sans-serif;
color:#252525;
font-size:16px;
background-color: #fff;
}

.container {
margin: 0 auto;
max-width: 960px;
padding: 20px;
}

header {
padding: 50px;
background: #000;
margin-bottom: 30px;
border-bottom: 5px #1e90ff solid;
text-align: center;
}

footer {
padding: 15px;
background: #565656;
color: #fff;
margin-top: 30px;
text-align: center;
}

06　h1のマークアップとCSS設定

HTMLの基本とCSS ➡ テキストをデザイン のNeon2を参考にしてください。

<header>～</header>内に<h1>を入れる（テキストは自由）

HTML

<header>
<h1>Butterfly</h1>
</header>

CSS

h1{
color: #fff;
font-size: 3em;
text-shadow:
0 0 5px #0099ff,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc,
0 0 13px #0066cc;
}

07　footerへもテキストを入れておく

テキストは自由です。コピーライトの箇所はコードで入力
特殊文字のコピーライト©を付けるここを参考にしてください

 

HTML
<footer>
&#169;Butterfly
</footer>


08　画像を入れて、レスポンシブ対応させる

HTMLの基本とCSS ➡ レスポンシブ化 を参考に画像のレスポンシブCSSを入れる

HTML

<div class="container">
<img src="ph1.jpg" alt="Butterfly">
</div>

CSS

img{
max-width:100%;
height:auto;
}

09　ボックスを作る

サンプルのボックスはカラーを変えたり、borderをプラスしてアレンジしてみてください。
ボックスの作り方は HTMLの基本とCSS ➡ PaddingとCenteredを参考に

ボックス内に自由にテキストを入れてみましょう

HTML

<div class="container">
<img src="ph1.jpg" alt="Butterfly">
<div class="box1">テキスト</div>
</div>

CSS

.box1 {
margin:0 auto;
padding: 30px 30px 20px;
background-color: #87cefa;
border-radius: 10px;
margin-top: 30px;
margin-bottom: 30px;
}

10　box1の下に区切り線を入れる

区切り線のアレンジは HTMLの基本とCSS ➡ 区切り線 hr アレンジを参考に

 

HTML

<div class="container">
<img src="ph1.jpg" alt="Butterfly">
<div class="box1">テキスト</div>
<hr>
</div>

11　画像のサイズをHTMLで変更して、影をつける

<hr>の下に<br>を入れてスペースを作る

その下に<p>～</p>に画像を入れてサイズを指定します

 

HTML

<div class="container">
<img src="ph1.jpg" alt="Butterfly">
<div class="box1">テキスト</div>
<hr>
<br>
<p><img src="ph1.jpg" alt="Butterfly" width="400" height="206"></p>
</div>


※img要素に width="" と height="" を追加すると、画像のサイズを指定することができます。
しかし、データ量そのものは変化しないので、巨大な画像を扱う際には注意が必要です。
また、この属性で表示サイズを変更すると、画質が悪くなってしまう場合があります。
（画像サイズの変更には、画像編集ソフトを使用した方がいいでしょう）
大きさを変更しない場合でもサイズ指定を行う
画像のサイズを指定しておくと、画像の読み込みを待たずに文書全体が表示されるようになります。そのため、感覚的には表示速度が高まります。また、レンダリング中のカクカクとした動きがなくなります。

12　画像をセンターに配置する

テキストをセンター揃えにするCSSを設定し、画像の入っている<p>へクラス名を入れる

HTML

<p class="naka"><img src="ph1.jpg" alt="Butterfly" width="400" height="206"></p>

CSS

.naka {
text-align: center;
}

13　センターに配置した画像に影をつける

HTMLの基本とCSS ➡ box-shadowで影をつける参照

 

CSS

.kage3 {
box-shadow: 3px 3px 10px #333;
}

HTML

<p class="naka"><img class="kage3" src="ph1.jpg" alt="Butterfly" width="400" height="206"></p>


14　画像サイズを編集ソフトを使って変更する

ph1.jpgの画像サイズを変更するには・・・

 

Paintで変更する場合　05サイズの変更


iloveimg.comで変更する場合／詳しくはこちら(PDF)

 

Photoshopで変更する場合
photoshopで画像(ph1.jpg)を開く ➡ イメージ ➡ 画像解像度 ➡ ダイアログが開きます

ここでは「幅を250px」にします

「OK」をクリックしてファイルを書き出します

ファイル ➡ 書き出し ➡ 書き出し形式 ➡ ダイアログが開くのでjpgを選んで ➡ 書き出しをクリック

保存先のフォルダーを確認 ➡ ファイル名は「ph2.jpg」にして保存します
※WEB用に保存を選んでもよいのですが、モニターが小さいとOKボタンをクリック出来ない場合があります

15　ボックスをもう１つ作る

09で作ったボックス「box1」を参考に、「box2」を作る。ここではbackgroud-colorだけ変更。

影のある写真の下へ<br>を入れて改行

HTML

<p class="naka"><img class="kage3" src="ph1.jpg" alt="Butterfly" width="400" height="206"></p>
<br>
<div class="box2">
</div>

CSS

.box2 {
margin:0 auto;
padding: 30px 30px 20px;
background-color: #dcdcdc;
border-radius: 10px;
margin-top: 30px;
margin-bottom: 30px;
}

16　ボックスの中に画像を入れる

「box2」の中に⑭でリサイズした画像を３枚いれてみましょう
ここでは省略していますが、「 alt=""」には写真の説明をいれましょう

HTML

<div class="box2">
<p><img src="ph2.jpg" alt=""></p>
<p><img src="ph2.jpg" alt=""></p>
<p><img src="ph2.jpg" alt=""></p>
</div>
</div>

17　写真を横に並べる

フレックスボックスで横並びのレイアウトにします
CSSの「.box2」へ以下を書き加えます
display: flex;（横並び）
justify-content: space-around;（均等配置）

CSS

.box2 {
margin:0 auto;
padding: 30px 30px 20px;
background-color: #dcdcdc;
border-radius: 10px;
margin-top: 30px;
margin-bottom: 30px;
display: flex;
justify-content: space-around;
}

17　画像表示をメディアクエリで調整する

このままだとスマホで見た場合、画像が小さくヨコ並びしているのでタテに並ぶよう変更します

メディアクエリにはブレイクポイントを768px以下の時(max-width:768px)を入れます

 

CSS

@media screen and (max-width:768px){
.box2{
flex-direction: column;
}
}