CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）

コラム

CSSの小技集、今回はスマホ端末対応編ということで書き進めていきたいと思います。
前回の記事では、PCブラウザ対応編でした。
PCブラウザ対応編とスマホ端末対応編とでは、根本的に異なる部分があります。
ブラウザバグ対策などは基本的に変わりませんが、絶対値として変わる値があるので、全てはそれを基準にしてCSSを記述する必要がございます。
ということで、テクニカルな記述については変わりませんが、配慮すべき点を交え、スマホ端末向け記述で解説していきたいと思います。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

CSS Chipsに投稿したコラム記事

CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）

CSS Chips

CSS小技集9選！スマホ端末対応編

前回の記事に引き続き、PCブラウザ向けのCSS記述をスマホ端末向けのCSS記述に変えていきたいと思います。

CSS小技集！覚えておくこと必須級のコーディング集（PCブラウザ対応編）

今回は、基本的にCSSの内容だけを修正しています。
HTML記述などはそのままですので、CSSの内容にだけ注意して見て下さい。

補足

今回の内容は、修正したポイントだけを記載したいと思います。
ポイントはPCブラウザ対応と変わらないため、ポイントなどは記載せず、変更した内容だけ記述致します。

それでは、宜しくお願い致します。

コンテンツの中央寄せ（センタリング）

未経験で弊社に入社した人に、一番最初に教えていることかもしれません（笑）

コンテンツを中央寄せ（センタリング）するための記述です。
text-align:center; のみの記述では、ブラウザ非対応の場合中央寄せ出来ないため、この記述で対処します。

<div id="cent">
中央寄せにするコンテンツ
</div>

body {
	text-align: center;
}

#cent {
	width: 80%;
	margin: 0 auto;
	border: 1px solid #333;
	text-align: left;
}

サンプル表示

中央寄せにするコンテンツ

横幅をpx表記から%表記に変更しました。

floatを使った時のブラウザバグ回避

floatを使ってコンテンツを横詰めする時に出るブラウザバグ対策です。

<div id="float-one">
<ul>
<li>横詰めその１</li>
<li>横詰めその２</li>
<li>横詰めその３</li>
</ul>
</div>

<div id="float-two">
改行コンテンツ
</div>

body {
	text-align: center;
}

#float-one {
	width: 80%;
	margin: 0 auto;
	border: 1px solid #333;
	text-align: center;
}

#float-one:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#float-one ul {
	margin: 0;
	padding: 0;
}

#float-one ul li {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

#float-two {
	width: 80%;
	background-color: #efefef;
	margin: 0 auto;
}

サンプル表示

横詰め１
横詰め２
横詰め３

改行コンテンツ

横幅をpx表記から%表記に変更しました。

角丸ライン

角丸ラインについては、PCブラウザ対応とスマホ端末対応に変わりはありません。
横幅を指定してないので、そのまま使えます。

横幅を指定しなかったのは、「 display: inline-block; 」を使ったためです。

<div id="kadomaru">角丸コンテンツ</div>

body {
	text-align: center;
}

#kadomaru {
	margin: 0 auto;
	padding: 10px;
	border: 1px solid #333;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	display: inline-block;
}

サンプル表示

角丸コンテンツ

「 border-radius 」はブラウザ毎の対応が出来ていれば何も問題ありません。

左上や右上など、個別に設定することも可能ですので、個別記述については以下を参考にしてください。

#kadomaru {
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
}

個別の角丸を指定している件についてもPCブラウザもスマホ端末でも関係ありませんので、そのままお使い頂けます。

CSSで罫線や”＞”の記述

CSSで罫線や記号文字の記述についても、PCブラウザ向けとスマホ端末向け記述に大きな違いはありません。
やはり横幅の指定が問題になるだけです。

<div id="keisen">
<ul>
<liv<a href="#" rel="nofollow">リンク１</a></li>
<li><a href="#" rel="nofollow">リンク２</a></li>
<li><a href="#" rel="nofollow">リンク３</a></li>
<li>リンク４</li>
</ul>
</div>

body {
	text-align: center;
}

#keisen {
	width: 80%;
	margin: 0 auto;
}

#keisen:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#keisen ul {
	margin: 0;
	padding: 0;
}

#keisen ul li {
	float: left;
	text-align: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

#keisen ul li a {
	margin-right: 10px;
	position: relative;
	padding-right: 8px;
	display: block;
	background-image: none;
	/** background-image は当ページの処理の都合で書いている内容です。無視して下さい。 **/
}

#keisen ul li a:after {
	content:">";
	font-size:100%;
	line-height: 1em;
	font-family:"ＭＳ Ｐゴシック",sans-serif;
	color:#999;
	position:absolute;
	right:-5px;
	top: 3px;
	display: block;
}

#keisen ul li:last-child a:after {
	content:"";
}

サンプル表示

横幅をpx表記から%表記に変更しました。

floatしたコンテンツをセンタリング

横幅を%表記に変更しただけです。

<div id="float-cent">
<ul>
<li><a href="#" rel="nofollow">０１</a></li>
<li><a href="#" rel="nofollow">０２</a></li>
<li><a href="#" rel="nofollow">０３</a></li>
<li><a href="#" rel="nofollow">０４</a></li>
</ul>
</div>

body {
	text-align: center;
}

#float-cent {
	width: 80%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	border: 1px solid #333;
}

#float-cent:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#float-cent ul {
	margin: 0;
	padding: 0;
	position: relative;
	left: 50%;
	float: left;
}

#float-cent ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	left: -50%;
	float: left;
}

#float-cent ul li a {
	background-image: none;
	/** background-image は当ページの処理の都合で書いている内容です。無視して下さい。 **/
}

サンプル表示

コンテンツを透過させる

透過させるための指定する内容はブラウザ毎に記述を分けるというだけのことですので、修正はしていません。
横幅を修正していないのは、「 display: inline-block; 」を使ったためです。

<div id="touka">
<span>透過コンテンツです。</span>
</div>

body {
	text-align: center;
}

#touka {
	display: inline-block;
	padding: 10px;
	margin: 0 auto;
	background-color: #000;
	font-weight: bold;
	filter:alpha(opacity=50); /** 1 〜 100 で調整**/
	-moz-opacity: 0.5; /** 0.1 〜 1.0 で調整**/
	opacity: 0.5; /** 0.1 〜 1.0 で調整**/
}

#touka span {
	color: #fff;
	filter:alpha(opacity=100); /** 1 〜 100 で調整**/
	-moz-opacity: 1.0; /** 0.1 〜 1.0 で調整**/
	opacity: 1.0; /** 0.1 〜 1.0 で調整**/
}

サンプル表示

透過コンテンツです。

画像にリンクのラインがつかないようにする対処

画像を表示させる際には、必ずCSSで画像のサイズをコントロールして下さい。
CSSで画像サイズをコントロールしないと、ブラウザからはみ出してしまいます。

<div id="img_border">
<a href="#" rel="nofollow"><amp-img src="/img/twitterlogo.gif" width="200" height="200" layout="responsive" alt="サンプルで表示しています"><amp-img></a>
</div>

body {
	text-align: center;
}

amp-img,
amp-img a {
	border: 0;
	vertical-align: bottom; /** ブラウザバグ対策 **/
	width: 90%;
}

#img_border amp-img {
	width: 90%;
}

サンプル表示

子要素の最初、若しくは最後だけ装飾を変化させる記述

PCブラウザ向け記述もスマホ端末向け記述もどちらもバグがありませんので、そのままです。

<div class="oyayouso">
<div class="koyouso">リスト０１</div>
<div class="koyouso">リスト０２</div>
<div class="koyouso">リスト０３</div>
<div class="koyouso">リスト０４</div>
</div>

body {
	text-align: center;
}

.oyayouso {
	display: inline-block;
	padding: 10px;
	margin: 0 auto;
	border: 1px solid #333;
}

.oyayouso .koyouso {
	border-bottom: 2px solid #ff0000;
	clear: both;
}

.oyayouso .koyouso:first-child {
	border-bottom: 2px solid #0000ff;
}

.oyayouso .koyouso:last-child {
	border-bottom: 2px solid #0000ff;
}

サンプル表示

リスト０１

リスト０２

リスト０３

リスト０４

画像の周りにテキストを回りこませる記述

画像サイズをコントロールする必要があります。
ここでは画像の周りにテキストを周りこませていますが、画像次第によってはテキスト回りこみは見にくくなるため、そんな時は改行して下さい。

<div class="gazou-mawari">

<div class="gazou-mawari-a">
<div class="gazou-mawari-oya">
<p class="amp-img-f-l"><img src="/img/twitterlogo.gif" width="200" height="200" layout="responsive" alt="サンプルで表示しています"><amp-img></p>
<p style="background-color:#efefef;">テキストです。テキストです。テキストです。テキストです。テキストです。</p>
<p>テキストです。テキストです。テキストです。テキストです。テキストです。</p>
<p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p>
</div>
</div>

<div class="gazou-mawari-b">
<div class="gazou-mawari-oya">
<p class="img-f-r"><amp-img src="/img/twitterlogo.gif" width="200" height="200" layout="responsive" alt="サンプルで表示しています"><amp-img></p>
<p style="background-color:#efefef;">テキストです。テキストです。テキストです。テキストです。テキストです。</p>
<p>テキストです。テキストです。テキストです。テキストです。テキストです。</p>
<p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p>
</div>
</div>

</div>

body {
	text-align: center;
}

.gazou-mawari {
	width: 95%;
	margin: 0 auto;
}

.gazou-mawari-a {
	width: 100%;
	margin: 0 auto 10px auto;
	border: 1px solid #333;
}

.gazou-mawari-b {
	width: 100%;
	margin: 0 auto;
	border: 1px solid #333;
}

.gazou-mawari-oya {
	padding: 15px 10px 0 10px;
}

.gazou-mawari-oya:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.gazou-mawari-oya p {
	text-align: left;
	_zoom: 1; /** pの背景で起こるブラウザバグ対策 **/
	overflow: hidden; /** pの背景で起こるブラウザバグ対策 **/
	margin: 0 0 10px 0;
	padding: 0 3px;
}

.gazou-mawari-oya .img-f-l {
	float: left;
	margin: 0 5px 5px 0;
	padding: 0;
}

.gazou-mawari-oya .img-f-l amp-img {	
	width: 25%;
}

.gazou-mawari-oya .img-f-r {
	float: right;
	margin: 0 0 5px 5px;
	padding: 0;
}
.gazou-mawari-oya .img-f-r amp-img {
	width: 25%;
}

サンプル表示

テキストです。テキストです。テキストです。テキストです。テキストです。

テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。

テキストです。テキストです。テキストです。テキストです。テキストです。

テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。

ということで、横幅を整えただけでスマホからでも横幅がはみ出ることもなく修正出来ました。
簡単ですね。

締め

いかがでしたでしょうか？
CSSの記述で変更したのは、全ての横幅表記を%にするだけで、PC向けCSS記述をスマホ端末にも適応出来ました。
本当に横幅修正くらいしかしてませんので、そこまで難しいことではないんですよね。

ということで、レスポンシブ対応の際には、これらの記述の違いを知っておくことで、即座に対応することが出来てしまいます。
あと、重要なことは、ビューポートの指定です。
サイト様の状況によっていろいろありそうですので、ビューポートは別の機会に紹介しようと思います。
ひょっとしたら、ビューポートの紹介はしないかもしれません（笑）
その時々の状況に応じていきたいと思います。

執筆 : 清水隼斗

CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）の通常ページ

« Back
CSS小技集！覚えておくこと必須級のコーディング集（PCブラウザ対応編）

Next »
CSSでグラデーション

コラムトップに戻る

「CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）」のシェアをお願い致します！

CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）

コラム

CSS Chipsに投稿したコラム記事

CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）

SEM LaboSEO/MEO/YouTube動画/SNSに強いマーケティング施策の株式会社SEMラボラトリー