スマホ対応させよう
WEBページを作成する前に<head>～</head>内にビューポートを入れておきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1">
» Learn moreCSSをリンクさせる
<link rel="stylesheet" href="style.css">
CSSの書き方
CSSは、「セレクタ」「プロパティ」「値」の3つを使って書いていきます。
セレクタ／どのHTML要素にCSSを適用させるのかを指定する。
プロパティ／線や色など、何を変えるのかを指定する部分。
値／プロパティに対して、どのくらいの変化をさせるのかを指定する部分。
01 bodyのcss
まずはbodyから設定してみましょう
テキストの指定や背景など
CSS
body {
margin: 0;
font-family: sans-serif;
color:#252525;
font-size:16px;
background-color: #fff;
line-height: 1.8;
}
パターンの参考／WEB2-D18
02 コンテナー
ブラウザいっぱいに文字を入れた場合、左から右までの距離がありすぎ読みづらくなります。
コンテンツを表示するサイズを決めておきましょう。
CSS
.container {
margin: 0 auto;
max-width: 960px;
}
03 見出し
イメージ合わせてh1~h6の色やサイズ、デザインをしましょう。
04 画像をレスポンシブに対応させておく
CSS
img{
max-width:100%;
height:auto;
}
05 テキストや画像をセンターにするためのCSS
テキストや画像をセンターにしたいことが多いと思いますので、設定しておきましょう。ここではクラス名「naka」
CSS
.naka{
text-align: center;
}
HTML
<p class="naka"> ～ </p>
06 よく使う色も設定しておきましょうCSS
一部のテキストに、色や太さ、背景を使う場合
CSS
（例）
.red2{
color: crimson;
font-weight: bold;
}
HTML
<p>一部の<span class="red2">テキスト</span>に、色や太さ、背景を使う場合</p>
07 スムーススクロールにする
CSSだけでスムーススクロールできます。
CSS
html{
scroll-behavior: smooth;
}
08 リンク画像をマウスオーバーで明るく
← 画像(photo)のリンクを設定した時にリンク出来ることをわかりやすくします。
CSS
a img:hover {
opacity: 0.6;
}
09 回り込みの指定
テキストの横に画像を配置したりすることは多くありますので、最初に指定しておくと便利です。
スマートフォンの時はフロートさせないようメディアクエリも入れておきましょう。@media only screen and～
回り込みを解除する場合は<br style="clear:both;">
CSS
.migi{
margin:0 0 25px 25px;
float:right;
}
.hidari{
margin: 0 25px 25px 0;
float: left;
}
@media only screen and (max-width:767px){
img.migi, img.hidari{
display:block;margin:5px auto;
}
.migi,.hidari{
float:none;
}
}
HTML
<img src="img/xxx.jpg" alt="" class="migi">
10 CSSファイルダウンロード
上記のstylesheetはこちらからダウンロードできます。
ファイル名は「base.css」となっていますので<head>～</head>へリンクを入れる時は変更してください。
<link rel="stylesheet" href="base.css">
11 スマホで横ズレした時は
PCで見た時は大丈夫でもスマホで見るとサイトが横に動いてしまうことがあります。
このような現象が起きる原因は何かと言うと「画面の横幅以上の横幅を設定された要素があるから」なのです。
ピクセルを使わずに100%というような「%」を使用するのが簡単かもしれません。
原因を探し出せない時にはCSSでbodyクラスに、「overflow-x: hidden;」の１行追加するだけで直せます。
body {
overflow-x: hidden;
}
すでにbodyタグにhidden以外のoverflow設定がされている場合は、「!important」をつけます。
body {
overflow-x: hidden!important;
}