目次

• はじめに
• どんな仕様が変わったのか？
• ガイドライン
• 最後に

はじめに

ファビコン(favicon)の設定していますか？あるサイト、ないサイト両方見かけますね。

ちなみに、ファビコンとは左上にあるアイコンのことです。（画像参照）

どんな仕様が変わったのか？

今年の5月末より、モバイル版でサイト検索をした時の表示が変更されたそうです。
今までは、「タイトル → URL」でしたが、「ファビコン → URL → タイトル」という順に変わっており、新たにファビコンも表示されるようになりました。

引用、参考サイト：A New Design for Google Search on Mobile

弊社のサイトもこのように表示されています。

ガイドライン

ファビコンが表示される条件や、設置方法のガイドラインがありますので、詳しくはこちらからどうぞ。

最後に

今までのようにSEOに影響するという訳ではありませんが、検索ページで表示された時の見え方（目につきやすくなるなど） が変わるのではないでしょうか？
そこからクリック率に関わることもあると思いますので、今まで以上に意識したいポイントですね。

色々なサイトの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」の表記が残っているサイトもあるかと思います。もし見かけたら、削除して問題ないようです。また、今回の例もそうですが、時には振り返ってコードの整理をしたり、「これ何かな？」という視点を持つことも大切だと感じました。

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

パーツ名や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には大事な情報が詰まっているので、しっかり設定していきたいですね(^^)♪

目次

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

今回作るもの

画像のような よく見るレイアウトです。片方にロゴがあり、反対側にメニューが並んでいます。この左右に別れたレイアウトを作る方法も複数ありますが、今回は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%;
      }
    }
    

最後に

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

目次

• 1行のとき
• 複数行のとき
• 最後に

1行の場合

text-overflow: ellipsis;をCSSに指定することで、テキストが枠から出てしまうときの文末が「…（3点リーダー）」になります。

あいうえおかきくけこさしすせそ

<p>あいうえおかきくけこさしすせそ</p>

p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 150px;

	/* 装飾 */
	padding: 15px;
	border: 1px solid #333;
	background: #fff;
}

複数行の場合（IEなど一部のブラウザでは表示できません）

下記の記述でできますが、対応してないブラウザもあるため、そちらだけお気をつけください。（対応ブラウザはこちら。)

<div class="wrap">
	<p class="sample03">あいうえおかきくけこさしすせそたちつてと</p>
</div>

p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 2行目の末で省略する*/
	overflow: hidden;

}

.wrap{
	max-width: 150px;
	padding: 15px;
	border: 1px solid #333;
	background: #fff;
}

注意点

あいうえおかきくけこさしすせそたちつてと

なんだかおかしな表示になってませんか？
こういう中途半端な表示になる場合があるので やってみました。笑
さっきとの違いは、pタグにそのままCSSを全部記載している点です。paddingは囲んでいる方にかけると大丈夫ですので、気をつけてくださいね。

<p>あいうえおかきくけこさしすせそたちつてと</p>

p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 2行目の末で省略する*/
	overflow: hidden;
	max-width: 150px;
	padding: 15px;

	/* 装飾 */
	border: 1px solid #333;
	background: #fff;
}

最後に

他にも、擬似要素を使って表示することもできますが、、フォントなど状況によってうまくできない場合があります。なので１行の場合は「text-overflow: ellipsis;」、複数行になる場合は javascriptで実装するのがベターだと思います。
まだ時間かかるかもしれませんが、CSSでもサクッとできるようになると良いですね。

今回は、ソースコードをwebサイトに表示する方法を紹介します。

目次

• codeタグについて
• preタグについて
• 使い方
• 最後に

codeタグについて

code（computer codeの略）タグで囲んだものは、ソースコード（javascriptやHTMLなど）であると認識され、一般的なブラウザでは等幅フォントで表示されるようになります。

ただしデメリットとして、インデントや改行が消えてしまいます。

表示サンプル

<code>
	p{
		font-size: 16px;
		color: #333;
	}
</code>

preタグについて

preformatted textの略で、フォーマット（整形）済みのテキストという意味になります。その名の通り、preタグで囲んだものは brタグなど使わずとも、改行や半角スペースをそのまま表示します。

表示サンプル

preタグを使えば、
　改行などそのまま表示されます。

<pre>
preタグを使えば、
　改行などそのまま表示されます。
</pre>

使い方

ではどのように表示するのがベストかと言うと、codeタグ・preタグの特徴を活かして、両方で囲むことです。

まず、preタグで囲むだけではソースコードと認識されませんので、codeタグで囲みます。それをさらにpreタグでマークアップしましょう。

表示サンプル

	p{
		font-size: 16px;
		color: #333;
	}

<pre>
	<code>
		p{
			font-size: 16px;
			color: #333;
		}
	</code>
</pre>

最後に

どうでしたか？
使う機会は限られると思いますが、使ってみてくださいね。

参考サイト

• preタグについて（－HTML5タグリファレンス）
• codeタグについて（－HTML5タグリファレンス）

背景を斜めに区切ったレイアウトにする方法を紹介します。
色々なやり方がありますが、画像を使わず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サイトではよく見かけるレイアウトなので、チャレンジしてみてください♪

目次

• はじめに
• ３列のとき
• ４列のとき
• 最後に

はじめに

Flexbox（justify-content: space-between、flex-wrap: wrap;）を使って並べると、最終行が下記のレイアウトになります。これを、均等配置のまま 最終行は左揃えにする方法を紹介します。

ベースになるHTML・CSS

		<ul class="sample">
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
		</ul>
		

		<style>
			ul.sample {
				max-width: 400px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		</style>
		

３列のとき

サンプル

		<ul class="sample">
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
			<li><img src="https://placehold.jp/ccc/ccc/100x50.jpg" alt=""></li>
		</ul>
		

		<style>
			ul.sample li {
				width: 26%;
			}

			ul.sample1::after {
				content: "";
				display: block;
				width: 26%;
				height: 0;
			}
		</style>
		

ポイント

ulのafter（一番後ろの位置）に、liと同じ幅（高さは不要）の擬似要素を入れることで、左寄せになります。

４列のとき

最後の行が２つのときのサンプル

最後の行が３つのときのサンプル

		<style>
			ul.sample li {
				width: 21%;
			}

			ul.sample::after,
			ul.sample::before {
				content: "";
				display: block;
				width: 21%;
				height: 0;
			}

			ul.sample::before {
				order: 1;
			}
		</style>
		

ポイント

３列のときと違うのは、afterだけでは要素が足りないので、beforeも使います。ここで気をつけないといけないのは、beforeにorderを指定して、順番を変えることです。

最後に

もし５列以上ある場合は、floatを使うか、javascriptで調整できます。
flexboxは便利なところもあり、今回のように調整が必要なところもあるので うまく使っていきたいですね(´▽`*)♪