目次

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

はじめに

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

完成形

通常時

表示できる幅が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);
		}
		

まとめ

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

目次

• はじめに
• 参考サイトのご紹介
• まとめ

はじめに

実在するサイトを例に、見出しの使い方とデザインを学びましょう♪

今回もキュレーションサイトで見つけた１サイトを参考例として紹介させていただきます★
部分的にスクショして載せており、全て掲載してる訳ではありません。細かい部分は実際のサイトも見て確認してみてくださいね。

参考サイトのご紹介

「BabySong」という、お子様の声を使って音楽をオーダーメイドする、新しいギフトサービスだそうです。ロゴは子供らしい可愛いロゴですが、サイト内の見出しはゴシックで見やすくデザインされていました。では早速、見出しデザインを見ていきましょう。

h1タグ

トップページのロゴ部分

下層ページのメインタイトルの部分

h2タグ

トップページのメインビジュアルのすぐ下の部分

「SAMPLE MUSIC」のセクションは、複数のページにありました。

h3タグ

まとめ

いかがでしたか？ 全体的にシンプルな見出しを使っているサイトでしたが、文字サイズなどで上手く調整されていると思います。色んなパターンのサイトの見出しに着目するのも勉強になりますね(^^)

参考サイト

• BabySong | こどもの声でつくる世界に一曲のオーダーメイド音楽ギフト

目次

• はじめに
• 参考サイトのご紹介
• まとめ

はじめに

色々なサイトを例に、各見出しの使い方とデザインを学びましょう！

今回はキュレーションサイトで見つけた１サイトを参考例として紹介させていただきます★
部分的にスクショして載せており、全て掲載してる訳ではありません。細かい部分は実際のサイトも見て確認してみてくださいね。

参考サイトのご紹介

「株式会社アスカフューネラルサプライ」という葬儀施設運営、仏壇仏具販売をされている会社だそうです。綺麗に魅せているサイトだと思ったので、使わせていただきました(^^)
では早速ですが、各見出しをみていきましょう。

h1タグ

トップページのロゴ部分

h2タグ

トップページ・下層ページ両方で使われていました。

下層ページに、先ほどのよこバージョンもありました。

h3タグ

全ページ共通コンテンツの部分です。

全ページ共通コンテンツの部分です。

会社案内のページで、理念などを掲載している部分です。メッセージ性のある大事な部分なので、他ページとは違う見せ方をしていました。

h3・h4タグ

まとめ

いかがでしたか？ なんとなくデザインを見るだけでなく、共通の見出しを探したり、hタグのレベルはどうなっているのか？など気をつけて見るのも とても勉強になります！こういう習慣もつけていきたいですね♪

参考サイト

• 株式会社アスカフューネラルサプライ｜新宮公益社

色々なサイトのhead内をチェックして、気になった記載について。

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
この中にある「chrome=1」というのが気になり、調べてみました。

chrome=1について

この記載がある場合、IEで閲覧しているときはGoogle Chrome Frameを利用して閲覧できる仕組みだったようです。

「Google Chrome Frame」というのは、IEでもchromeのレンダリングエンジンを使って表示できるプラグインであり、そのためにの記載でした。ですが、Google Chrome Frameは2014年にサポート・開発も終了しています。

W3Cバリデートした結果

chrome=1を記載するとどうなるかの検証として、W3Cバリデートにかけてみました。
２つの画像をみてください。１枚名はエラーがありませんが、２枚目のように「,chrome=1」をつけるとエラーが出ます。

補足

Google Chrome Frame自体は、不具合も多かったそうです。
参考サイト：IEをChromeにするGoogle Chrome Frameがすごい(けど実用的なレベルではないよ) – os0x.blog

Google Chrome Frameの廃止背景
参考サイト：Chromium Blog: Retiring Chrome Frame

こちらのページも詳しく書いています。
まだ＜meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″＞って書いていませんか？

結論

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>という表記は、必要に応じて使ってOK。ただし、「,chrome=1」は不要です。

最後に

過去の制作物の名残りで、「,chrome=1」の表記が残っているサイトもあるかと思います。もし見かけたら、削除して問題ないようです。また、今回の例もそうですが、時には振り返ってコードの整理をしたり、「これ何かな？」という視点を持つことも大切だと感じました。

目次

• はじめに
• 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: カスケーディングスタイルシート

目次

• はじめに
• おすすめのサイト
• 調べ方
• まとめ

はじめに

ブラウザによって使えるCSSが異なったり、見栄えが変わります。また、どこまでのブラウザに対応するかで、工数にも差が生まれます。
適切に対応できるようにするためにも、シェア率を知っておくことは大事だと思いますので、自分でも調べられる方法を紹介します！(^^)

おすすめのサイト

有名なサイトになりますが、StatCounter Global Statsというサイトがおすすめです。
全て英語になりますが、視覚的にもわかりやすく利用しやすいと思います。

もし抵抗がありましたら、日本語訳をかけるのがおすすめです。

調べ方

トップページの中程に、画像と同じ一覧があります。そこで、左上の「Browser Market Share」を選ぶと ブラウザのシェア率を調べることができます。
他にも、OSや解像度・ブラウザバージョン別のシェアなど 色々調べることができます。

次に、下記の部分で「Japan」を選択すると、調査対象を「国内」に限定できます。

期間やグラフの種類など、もっと細かい設定は グラフ右上「Edit Chart Data」からでできます。

日本語訳したものも添付しました。
「Statistic」では調べたい項目を選択できます（ブラウザのバージョン、OS別など）。さらにデバイスでも絞れます。
「Region」では、全国や日本だけ、アジアだけなどの範囲を選べます。
「Chart Type」ではグラフの種類を選べます。
「Period」では、調べたい期間を選択できます。直近の３ヶ月や、昨年の情報など、必要に応じて選んでみてください。

好きな設定ができたら、View Chartを選ぶと、グラフが表示されます。

今回は、国内限定で、2019年4〜6月の３ヶ月間のブラウザシェア率（PC）を調べました。個人的に棒グラフがみやすいので、この設定です。

2019年4〜6月の３ヶ月間のブラウザシェア率（PC）

Chrome 57.93%
IE 14.16%
Firefox　9.75%
Safari 8.6%
Edge 7.57%
Opera 0.73%

IEのシェア率はきになるところですが、、、まだ14%ありますね(^^;)さらに、ブラウザのバージョンも調べられますので、興味があれば 調べてみてくださいね。

まとめ

いかがでしたか？
ブラウザのシェア率を調べておくことで、どのブラウザまで対応するべきか、この記述は使えるのか…など、事前に調べておくことができます。ぜひご活用ください♪

目次

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

はじめに

使用例として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;
				}
				

まとめ

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

ページ名やカテゴリー名に使えそうな英単語

パーツ名やclass名に組み合わせて、使えそうな英単語

レイアウト関連など

テキスト系

パーツ名など

形の名称

最後に

いかがでしたか？英語など調べることも多々ありあますが、少しでも参考になりましたら幸いです(^^)

はじめに

headタグの中身、なんとなくで使っているタグないですか？
今回はよく記載されているものを確認していきます。

headの中身を確認してみよう

文字のエンコード

		<meta charset="utf-8">
		

文字コードを指定します。文字化けの原因になるので必ず記載しましょう。

タイトル

		<title>たねっぱ！</title>
		

webサイト・ページのタイトルになります。ブラウザの検索結果や、ブラウザのタブにも表示されます。

ディスクリプションの設定

		<meta name="description" content="">
		

ディスクリプションに記入したテキストは、検索結果に出る文章としても使われます。（使われない場合もあります）

キーワードの設定

		<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
		

サイトに関するキーワードを複数設定できますが、直接的なSEOの効果はありません。

ビューポートの設定

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

スマホやレスポンシブ対応する場合は必須になります。

電話番号などの自動リンク無効化

		<meta name="format-detection" content="telephone=no">
		

ページ内の電話番号（およびその他の番号なども）自動的にリンクしてしまうので、それらを無効化します。

IE対策

		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		

これを入れることで、IE・エッジの最新バージョンで表示されます。互換モードで表示されている場合も、通常表示になります。

SNS対策・OGPの設定

    <!-- OGP -->
    <meta property="og:url" content="ページのURL">
    <meta property="og:type" content="ページの種類">
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:description" content="ページの説明文">
    <meta property="og:image" content="画像のURL">
    <meta property="og:site_name" content="サイトの名前">
    <meta property="og:locale" content="ja_JP">

    <!-- Facebook -->
    <meta property="fb:app_id" content="アプリID">
    <meta property="article:publisher" content="FacebookページのURL" />

    <!-- Twitter -->
    <meta name="twitter:card" content="Twitterカードの種類" />
    <meta name="twitter:site" content="@ユーザー名" />
    <meta name="twitter:creator" content="@ユーザー名">
    <meta name="twitter:title" content="ページのタイトル">
    <meta name="twitter:description" content="ページの説明文">
    <meta name="twitter:image" content="画像のURL">

		

FacebookやTwittertなどでシェアされた時の設定になります。

補足ですが、og:type（ページの種類）は、website・blog・article・profileなどがあります。
twitter:card（カードの種類）は、summaryかsummary_large_imageがあります。

ファビコンの設定

    <!-- icoの場合 -->
    <link rel="icon" href="/favicon.ico">

    <!-- pngの場合 -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- gifの場合 -->
    <link rel="icon" type="image/gif" href="/favicon.gif">
    

CSSの読み込み

    <link rel="stylesheet" href="">
    

JavaScriptの読み込み

    <script src=""></script>
    

最後に

いかがでしたか？headには大事な情報が詰まっているので、しっかり設定していきたいですね(^^)♪