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

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

前回の記事に引き続き、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を使ってコンテンツを横詰めする時に出るブラウザバグ対策です。

<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で罫線や記号文字の記述についても、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表記から%表記に変更しました。

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

<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小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）の通常ページ