目次

• はじめに
• 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リファレンス

ボタンをホバーしたときによく見る動きを、まとめてみました。コピペでもそのまま使用できます。

目次

• はじめに
• ふんわり背景色が変化
• 枠線の種類が変化
• 角丸になる
• 文字間が広がる
• 背景がスライド（左から右へ）
• 背景がスライド（下から上へ）
• 最後に

はじめに

共通部分のHTML/CSSです。btnCommonはボタンの装飾、btn00は それぞれのボタンによって異なります。

		<p><a href="#" class="btnCommon btn00">button</a></p>
		

		p{
		text-align: center;
		}
		.btnCommon a{
			position: relative;
			display: block;
			width: 150px;
			height: 46px;
			box-sizing: border-box;
			padding: 10px;
			border: 1px solid #333;
			color: #333;
			transition: .2s;
		}
		

ゆっくりと背景色が変化

よく見る動作の１つですね。簡単に実装できて、使いやすいです。

button1

		/* ボタン１ */
		.btn01:hover {
			background-color: #333;
			color: #fff;
		}
		

枠線の種類が変化

枠線の種類を「dashed（点線）」にしています。

button2

		/* ボタン2 */
		.btn02:hover{
			border-style: dashed;
		}
		

角丸になる

ホバーすると枠線が角丸に変化します。

button3

		/* ボタン3 */
		.btn03:hover{
			border-radius: 10px;
		}
		

文字間が広がる

ホバーするとテキストの文字間が広がります。

button4

		/* ボタン4 */
		.btn04:hover{
			letter-spacing: 2px;
		}
		

背景がスライド（左から右へ）

ホバーすると背景がスライドします。これも、設定次第でいろんな角度・方向へスライドできます。

button5

		/* ボタン5 */
		.btn05{
			overflow: hidden;
		}

		.btn05:before{
			content: "";
			z-index: -1;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: -100%;
			background-color: #333;
			transition: .2s;
		}

		.btn05:hover{
			color: #fff;
		}

		.btn05:hover:before{
			left: 0;
		}
		

背景がスライド（下から上へ）

ホバーすると背景がスライドします。先ほどのと、方向が違うだけです。

button6

		/* ボタン6 */
		.btn06{
			overflow: hidden;
		}

		.btn06:before{
			content: "";
			z-index: -1;
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: -100%;
			left: 0;
			background-color: #333;
			transition: .2s;
		}

		.btn06:hover{
			color: #fff;
		}

		.btn06:hover:before{
			bottom: 0;
		}
		

最後に

いかがでしたか？
色々な動きをしているボタンも見かけますが、まずは基本が大事なので シンプルでよく見るものをまとめました。よければ使ってみてくださいね。

背景を斜めに区切ったレイアウトにする方法を紹介します。
色々なやり方がありますが、画像を使わずCSSのみでできる２パターンを紹介します。

目次

• 参考サイト例
• borderを使った方法
• transform: skew を使った方法
• 最後に

参考サイト例

斜めに区切るレイアウトを使っているサイトをピックアップしてみました。
よければご覧ください。

・有休調整さん presented by Club Med×調整さん

・+graph Cloud & Agent

実装方法

borderを使った方法

borderで三角形を作る仕組みを利用して、セクション間に配置する方法です。
セクションに擬似要素（before,after）で三角形を作ります。

背景画像を使った方法と同じく、ブラウザサイズによって、三角形の形が多少伸縮するので、角度が変わると困る場合は 気をつけてください。

※三角形の作り方が よくわからない人は、「三角形の作り方」を書いているページがあるので、ご覧ください。
「CSSで三角形をつくる方法 | たねっぱ！」

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
      <p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      /*レイアウト用のCSS*/
      padding: 50px;
    }
    .section1{
      position: relative;

      /*レイアウト用のCSS*/
      background-color: pink;
    }
    .section1::before{
      content:"";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;

      /*ここで三角形のサイズを決める。
      必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
      border-width: 0 0 100px 100vw ;

      border-color: transparent transparent #fff transparent;
    }
    

transform: skew を使った方法

transform: skew を使って、セクションの擬似要素に平行四辺形を作り、配置する方法です。

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
    	<p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      padding: 50px 30px;
    }

    .section1 {
      background:pink;
    }
    .section2 {
      position: relative;
      z-index: 0;
    }
    .section2::after{
      content: '';
      position: absolute;
      left:0;
      top: 0;

      /*四角形を傾けます*/
      transform: skewY(-5deg);
      transform-origin: bottom left;

      z-index: -1;
      width:100%;
      height:100%;
      background:#fff;
    }
    

最後に

webサイトではよく見かけるレイアウトなので、チャレンジしてみてください♪