目次

• はじめに
• 完成形
• 実装方法
• 最後に

はじめに

レスポンシブ対応するときに、スマホ用になおすのが難しいテーブルってありますよね？
そんなときに、横スクロールで表示してるところも多いのでその方法を紹介します。

完成形

通常時

表示できる幅が300pxのとき。はみでた部分は横スクロール表示

※横スクロールできます

実装方法

tableタグをdivで囲んでいます。そのdivに、「overflow: scroll;」をかけることで、枠からはみ出た部分をスクロール表示します。
その他注意点はソースコードのサンプルにコメントに入れてますので、確認してみてください(^^)

ソースコード（装飾部分のCSSは省略）

		<div class="tableWrap">
			<table>
				<tr>
					<th>見出し</th>
					<th>見出し</th>
					<th>見出し</th>
					<th>見出し</th>
				</tr>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>

			</table>
		</div>


		

		.tableWrap{
			/* ▼枠からでた部分をスクロール表示する */
			overflow: scroll;
			width: 300px;
		}
		table{
			border-collapse: collapse;

			/* ▼スクロールがスムーズになる */
			-webkit-overflow-scrolling: touch;
		}

		th,
		td{
			width: 100px;

			/* ▼セルが100px以下にならないようにする */
			min-width: 100px;
		}
		

最後に

いかがでしたか？スマホ用の表示方法も色々ありますが、状況に応じて 最適な実装方法は違うと思うので、選択肢の１つとして使ってみてください♪ また、以前にこんな記事も書いているので、よければご覧ください。

過去記事：一番かんたんなテーブルのレスポンシブ対応

目次

• はじめに
• 実装方法について
• まとめ

はじめに

よく見るホバーしたらサムネイルが拡大するレイアウトを作ってみようと思います。CSSだけでできますので、１つずつ確認していきましょう。

＜サンプル＞

実装方法について

１、divの中に写真を配置します。

			<div class="sample">
				<img src="https://placeimg.com/200/150/people" alt="">
			</div>
		

		.sample{
			width: 200px;
			height: 150px;

			border: 3px solid #999;/* 装飾のため、なくてもOK */
		}
		

２、ホバーしたときに拡大するようにする。

拡大するために、img:hoverのところに、「transform: scale(1.2);」をつけます。さらにimgに「transition:all 0.3s;」をつけることで、動きがスムーズになります。
ですが、このままでは枠（div）から画像がはみ出てしまいましたね‥！

			<div class="sample">
				<img src="https://placeimg.com/200/150/people" alt="">
			</div>
		

		.sample{
			width: 200px;
			height: 150px;

			border: 3px solid #999;/* 装飾のため、なくてもOK */
		}

		.sample img{
			/* 拡大するのにかかる時間 */
			transition:all 0.3s;
		}

		.sample img:hover{
			/* ホバーしたら1.2倍サイズに拡大 */
			transform: scale(1.2);
		}
		

３、はみ出た部分を非表示にする。

画像がはみ出ないように、divに対して「overflow: hidden;」を追加します。これで完成です！！

			<div class="sample">
				<img src="https://placeimg.com/200/150/people" alt="">
			</div>
		

		.sample{
			/* 拡大してはみ出した部分を非表示にする */
			overflow: hidden;
			width: 200px;
			height: 150px;

			border: 3px solid #999;/* 装飾のため、なくてもOK */
		}

		.sample img{
			/* 拡大するのにかかる時間 */
			transition:all 0.3s;
		}

		.sample img:hover{
			/* ホバーしたら1.2倍サイズに拡大 */
			transform: scale(1.2);
		}
		

まとめ

うまくできましたか？よく見るレイアウトなので、この記事で理解が深まったら幸いです♪

目次

• はじめに
• vertical-alignを比較してみた
• まとめ

はじめに

vertical-alignを使っていますか？垂直方向の位置を揃えたりと 便利なプロパティですが、色々な値を持っているので それらを比較しようと思います！

比較方法

pタグ（ブロック要素）の中にspanで囲った文字（インライン要素）と、画像（インライン要素）を入れています。それらがどのように配置されるかをみてみましょう。

※pタグの行間はline-height: 1.5;です。
※vertical-alignはブロック要素には効きません。
インライン要素と、テーブルセルのどちらかでないと効きませんのでお気をつけください。

vertical-alignを比較してみた

baseline（初期値）

親要素のベースラインに揃えます。何も指定がなければ、これがデフォルトになっています。

あいうえお

top

行の高さの上端に揃えます。

あいうえお

middle

行の高さの中央に揃えます。

あいうえお

bottom

行の高さの下端に揃えます。

あいうえお

text-top

親要素のテキストの上端に揃えます。

あいうえお

text-bottom

親要素のテキストの下端に揃えます。

あいうえお

数値（20px）

親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。

あいうえお

数値（-40%）

先ほどと同じように、親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。

あいうえお

super

親要素を基準に、上付き文字の位置になります。

あいうえお

sub

親要素を基準に、下付き文字の位置になります。

あいうえお

まとめ

いかがでしたか？
なんとなくで使っていた方も多い？と思いますが、少しでも理解が深まり、気づきがあれば幸いです♪

参考サイト

• vertical-align – CSS: カスケーディングスタイルシート | MDN
• vertical-align－スタイルシートリファレンス
• vertical-align – CSS Reference
• 大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定する方法 – スタイルシートTipsふぁくとりー

目次

• はじめに
• backgroundプロパティを使う方法
• border-imageプロパティを使う方法
• まとめ

はじめに

上記のように、枠に画像を使ったレイアウトにしたいときの方法を２パターン紹介します。
今回使用するパーツはこちら。リピート表示できるようにスライスしています。

backgroundプロパティを使う方法

backgroundを使って、画像をリピート表示します（緑の部分）。その上に、白いボックスを置くことで、見本通りの表示になります。これなら文字数の増減にも対応しています。

サンプル

		<div class="wrap">
			<p class="txtBox">
				吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
			</p>
		</div>
		

		.wrap{
			width: 200px;
			padding: 10px;/* 枠線の幅 */
			background-image: url(画像のパス);
			background-repeat: repeat;
		}

		.txtBox{
			padding: 10px;
			background-color: rgb(255,255,255,1);
			font-size: 12px;
		}
		

border-imageプロパティを使う方法

IE10など 一部非対応のブラウザもありますが、border-imageプロパティでも実装ます（対応ブラウザはこちら）。※今記事では、border-imageの詳しい説明は省きます。

サンプル

		<div class="sample01">
			吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
		</div>

		

		.sample01{
			width: 200px;
			padding: 10px;
			border: 10px solid #96d1a9;
			border-image:url(画像のパス) 15 round;
		}

		

まとめ

うまくできましたか？
今回のように見た目は同じでも、やり方が複数あることが多いので状況に合わせてやってみてくださいね。

参考サイト

• border-image – CSS: カスケーディングスタイルシート

目次

• はじめに
• 右下に影をつける
• ボックスの外側全体に影をつける
• 左上の内側に影をつける
• 右下の内側に影をつける
• ボックスの内側全体に影をつける
• 左下が浮いている風の影をつける
• 右下が浮いている風の影をつける
• 両端が浮いた風の影をつける
• 右下にハッキリした影をつける
• まとめ

はじめに

使用例としてbox-shadowを使って、ボックスに影をつけてみました。コピペでも使えますので、参考にしてみてください♪

共通のCSSはこちら（白い四角の部分）

			div{
				position: relative;
				width: 200px;
				height: 100px;
				background-color: #fff;
			}
			

サンプル

右下に影をつける

		<div class="sample01"></div>
		

		.sample01{
		  box-shadow: 5px 5px 5px rgba(0,0,0,.2);
		}
		

ボックスの外側全体に影をつける

		<div class="sample02"></div>
		

		.sample02{
		  box-shadow: 0 0 10px rgba(0,0,0,.3);
		}
		

左上の内側に影をつける

		<div class="sample03"></div>
		

		.sample03{
		  box-shadow: 5px 5px 5px rgba(0,0,0,.2) inset;
		}
		

右下の内側に影をつける

		<div class="sample04"></div>
		

		.sample04{
		  box-shadow: -5px -5px 5px rgba(0,0,0,.2) inset;
		}
		

ボックスの内側全体に影をつける

		<div class="sample05"></div>
		

		.sample05{
		  box-shadow: 0 0 5px 5px rgba(0,0,0,.2) inset;
		}
		

左下が浮いている風の影をつける

		<div class="sample06"></div>
		

		.sample06{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		.sample06::before{
			content:"";
			position: absolute;
			z-index: -1;
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px rgba(0,0,0,.3);
		}

		.sample06::before{
			left: 5px;
			transform:rotate(-3deg);
		}
		

右下が浮いている風の影をつける

		<div class="sample07"></div>
		

		.sample07{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		.sample07::after{
			content:"";
			position: absolute;
			z-index: -1;
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px rgba(0,0,0,.3);
		}

		.sample07::after{
			right: 5px;
			transform:rotate(3deg);
		}
		

両端が浮いた風の影をつける

		<div class="sample08"></div>
		

		.sample08{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		.sample08::before,
		.sample08::after{
			content:"";
			position: absolute;
			z-index: -1;
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px rgba(0,0,0,.3);
		}

		.sample08::before{
			left: 5px;
			transform:rotate(-3deg);
		}

		.sample08::after{
			right: 5px;
			transform:rotate(3deg);
		}
		

右下にハッキリした影をつける

				<div class="sample09"></div>
				

				.sample09{
				  box-shadow: 0 0 5px 5px rgba(0,0,0,.2) inset;
				}
				

まとめ

いかがでしたか？
色々なニュアンスを表現できますので、ぜひ使ってみてくださいね。また、ジェネレーター（サイトはこちら）などを使ってみるのもオススメです。

目次

• はじめに
• 解説
• まとめ

はじめに

紙がめくれたり、少し浮いたように見える影（シャドウ）の表現をbox-shadowを使って実装します。
解説もありますので、よければご覧ください。

完成はこちら

		<div class="sample01"></div>
		

		/*　白い四角 */
		.sample01{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		/* 左右の影 */
		.sample01::before,
		.sample01::after{
			content:"";
			position: absolute;
			z-index: -1;/*影を下の層に持っていく*/
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px #999;
		}

		/*　左側の影 */
		.sample01::before{
			left: 5px;
			transform:rotate(-3deg);
		}

		/*　右側の影 */
		.sample01::after{
			right: 5px;
			transform:rotate(3deg);
		}
		

解説

影の部分をどう作るの？ということなんですが、左下の影と 右下との影はそれぞれbeforeとafterで実装できます。

わかりやすくするために、右下の影（after）だけを表示して、z-indexを調整してみました。
あの白い四角の下には、transform:rotate(-3deg);で少し傾けた 影付きの四角があります。これを左右に配置することで実装しています。

＜右下の影だけ表示＞
afterがz-index: 1;の場合

afterがz-index: -1;の場合

まとめ

一見どうやって作るの？と思うものも、分解して１つずつ考えていくと、理解できることも多いと思います。今回のは、そういう中の１つかな？と思います。ソースコードみて頂いてもわかりやすいと思いますので、難しいと感じた方は見てみてくださいね。

目次

• はじめに
• 複数の線のひき方
• まとめ

はじめに

box-shadowを使って、線を引くことができます。さらに、１つのbox-shadowで複数指定することもできますので、ご紹介します。

複数の線のひき方

サンプルを紹介する前に、box-shadowの使い方を簡単におさらいします。
box-shadow: たて方向 よこ方向 ぼかし 広がり #カラーコードの順に指定します。では、早速サンプルをみてみましょう。

サンプル１

ボックの内側（insetを使う）に、外側の線からから順に指定しています。「,（カンマ）」で区切ることで、複数の指定ができます。

		<div class="sample01"></div>
		

		.sample01 {
			width: 80px;
			height: 80px;
			box-shadow: 0px 0 0 10px #A3CEC9 inset,
			0px 0 0 20px #60c5ba inset,
			0px 0 0 30px #cff09e inset;
		}
		

サンプル２

３色ラインを線状にひいています。box-shadowのたて方向の部分の数値だけ調整して、水平方向に伸びるようになっています。注意点として、一色目だけborderで指定しています。

		<div class="sample02"></div>
		

		.sample02 {
			border-bottom: solid 10px #cff09e;
			/*  ↓box-shadow: 0px 10px 0 0 #カラーコードの略  */
			box-shadow: 0px 10px #60c5ba,
			0px 20px #A3CEC9;
		}
		

まとめ

いかがでしたか？
変わった使い方ですが、こういうこともできるんだなと知識の引き出しに入れてもらえたら幸いです。

参考サイト

box-shadow－CSS3リファレンス

目次

• 今回作るもの
• 実装方法
• 今回のポイント＆まとめ

今回作るもの

画像のような よく見るレイアウトです。片方にロゴがあり、反対側にメニューが並んでいます。この左右に別れたレイアウトを作る方法も複数ありますが、今回はFlexboxを使い HTMLもシンプルになるように作ります。

実装方法

ベースになるHTML・CSSはこちらです！

	<header>
		<div>Logo</div>
		<div>Menu01</div>
		<div>Menu02</div>
		<div>Menu03</div>
	</header>
	

	header div{
		display:flex;

		/*  下記は装飾部分です。なくてもOK  */
		padding: 10px;
		border: 1px solid #333;
		background: pink;
	}
	

• Logo
• Menu01
• Menu02
• Menu03

はじめに

まず、headerタグにFlexを使って、divを横並びにします。

	header{
		display:flex;
	}
	

• Logo
• Menu01
• Menu02
• Menu03

その２

１番目のdiv（Logo）に対して、「margin-right:auto;」をかけます。
すると、左右に離れました。もう、ほぼ完成です‥！

	header div:first-child{
		margin-right:auto;
	}
	

• Logo
• Menu01
• Menu02
• Menu03

その３

必要に応じて 余白など微調整して完成です。

	header div{
		margin-left: 10px;
	}
	header div:first-child{
		margin-left: 0;
	}
	

• Logo
• Menu01
• Menu02
• Menu03

完成ソースコード

	<header>
		<div>Logo</div>
		<div>Menu01</div>
		<div>Menu02</div>
		<div>Menu03</div>
	</header>
	

		header{
			display:flex;
		}

		header div{
			display:flex;

			/*  ▼装飾など  */
			margin-left: 10px;
			padding: 10px;
			border: 1px solid #333;
			background: pink;
		}

		header div:first-child{
			margin-right:auto;

			/*  ▼装飾など  */
			margin-left: 0;
		}
	

今回のポイント＆まとめ

コーディングの流れをみていきましたが、ポイントは「marginに対してautoをかける」ことです！
中央寄せでよくみる「margin: 0 auto;」これと同じです！これが、Flexboxにもかけれるというのが一番大事だと思います。

また、このやり方が一番良いかは 状況によると思いますが、よければ試してみてくださいね。
もしピンと来てない方は、こちらの記事も合わせて読んでみてください♪

参考記事

• 【CSS】marginのauto、こんな使い方って知ってる？

目次

• はじめに
• スマホレイアウトの作り方
• 最後に

はじめに

今回レスポンシブするテーブルはこちら。
会社概要など 様々ところで見るテーブルだと思います。

		<table>
			<tr>
				<th>見出し１</th>
				<td>テキストテキスト</td>
			</tr>
			<tr>
				<th>見出し2</th>
				<td>テキストテキストテキスト</td>
			</tr>
			<tr>
				<th>見出し3</th>
				<td>テキストテキストテキストテキスト</td>
			</tr>
		</table>
		

スマホレイアウトの作り方

HTMLはそのまま、下記のCSSを追加するだけで、たて積みのレイアウトになります！

    th,td{
      display: block;
      width: 100%;
    }
    

    /* ↓装飾 */
    tr{
      border: 0;
    }
    th{
      font-weight: bold;
      text-align: center;
    }
    

注意点

画面を縮めたときに スマホレイアウトになるように、メディアクエリとビューポートをお忘れなく。

ビューポートがよくわからない場合は、こちらをhead内に貼りましょう。
（詳しい説明は、今回は省略します）

<meta name="viewport" content="width=device-width,initial-scale=1">

また、メディアクエリがわからない場合は、今回であれば、下記をCSS内に追記しましょう。
@media〜で囲われた部分が ブラウザサイズが768px以下の時に適応されます。その時のブレイクポイントに合わせて、数値などは変わりますのでご注意ください。

    @media screen and (max-width: 768px) {
    /* 768pxまでの幅の場合に適応される */
      th,td{
        display: block;
        width: 100%;
      }
    }
    

最後に

うまくできましたか？
テーブルのレイアウトも色々ありますし、今回のやり方では難しい場合もあると思いますが、またの機会に他のレイアウトも紹介したいと思います(^^)

目次

• はじめに
• word-break : break-allについて
• overflow-wrap: break-word;について
• まとめ

はじめに

下記のように、枠から文字が出てしまっていませんか？
今回は、それらを防ぐための方法を紹介します。

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

word-break : break-allについて

折り返したい部分に「word-break : break-all;」を追記するだけで、例え単語の途中や、意図しない部分でも折り返します。

サンプル

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

		<p>gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj</p>
		

		p {
			word-break : break-all;
		}
		

overflow-wrap: break-word;について

先ほどと違い、こちらは英単語の途中では折り返しません。ですが、どうしても改行できる場所がない場合は、単語の途中でも改行されるため、使い勝手が良いと思います。

サンプル

	<p>gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj</p>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
	

	p {
		overflow-wrap: break-word;
	}
	

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

まとめ

いかがでしたか？
細かいけどとても大事な内容だと思いますので、気をつけていきたいですね(^^)

参考サイト

• word-break－スタイルシートリファレンス
• overflow-wrap－CSSリファレンス