目次

• はじめに
• GoogleのAPI（非公式）
• はてなのAPI（非公式）
• ブックマークレットを作ってみた
• 最後に

はじめに

ファビコンのデザインを集めることがあり、そのときに役立ったツールを紹介します。

おすすめのツール

ファビコンを取得できるAPIです。コピペしてお使いください。

GoogleのAPI（非公式）

http://www.google.com/s2/favicons?domain=ここにドメインを入れる

はてなのAPI（非公式）

http://favicon.hatena.ne.jp/?url=ここにドメインを入れる

ブックマークレットを作ってみた

下記のコードをブックマーク（URL部分）に登録してみてください。
ファビコンを取得したいページを開き、登録したブックマークをワンクリックでファビコンを取得できるようになるので、お試しあれ。

		javascript:location.href='http://www.google.com/s2/favicons?domain='+location.hostname;
		

※新規タブで開くver

		javascript:open('http://www.google.com/s2/favicons?domain='+location.hostname,'_blank');
		

＜登録画面（chromeの場合）＞

最後に

いかがでしたか？いますぐ必要では無い方は、とりあえずブックマークしておくのも良いと思います。少しでもお役にたてば幸いです♪

ファビコンのギャラリーサイトや、ファビコンを集めてみた系の記事を紹介します★

目次

• ファビコンギャラリー.com
• The Favicon Gallery
• faviconを作るときに参考にしたいデザインアイデア｜ロゴストック
• AI系企業のロゴ（＋ファビコン）集｜Makiko Sakamoto｜note
• かぶりに注意!他サイトとの差別化に拘る人はチェックしたい、84個のfaviconリスト | Find Job! Startup
• 最後に

ファビコンのギャラリーサイト一覧

ファビコンギャラリー.com -Webサイトのファビコンを集めたサイト-

ファビコンギャラリー.com

The Favicon Gallery

The Favicon Gallery

ファビコンを紹介している記事まとめ

faviconを作るときに参考にしたいデザインアイデア｜ロゴストック

faviconを作るときに参考にしたいデザインアイデア｜ロゴストック

AI系企業のロゴ（＋ファビコン）集｜Makiko Sakamoto｜note

AI系企業のロゴ（＋ファビコン）集｜Makiko Sakamoto｜note

かぶりに注意!他サイトとの差別化に拘る人はチェックしたい、84個のfaviconリスト | Find Job! Startup

かぶりに注意!他サイトとの差別化に拘る人はチェックしたい、84個のfaviconリスト | Find Job! Startup

最後に

最近はブラウザの検索結果画面にもファビコンが表示されたり、前より大事になっていると思います。今後のファビコン作成の参考になれば幸いです♪

目次

• はじめに
• 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;
				}
				

まとめ

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

目次

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

はじめに

紙がめくれたり、少し浮いたように見える影（シャドウ）の表現を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;の場合

まとめ

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

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

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

目次

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

はじめに

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リファレンス

少し変わった形のものを優先で集めました！

よければ参考にどうぞ♪

目次

• 矢印・三角・変形したデザイン
• イラストやキャラクターなど
• フッターに固定
• ネタ・動きがあるもの
• まとめ

矢印・三角・変形したデザイン

cocui – RING & ANNIVERSARY FRAME & PRESENT TICKET

WELLSTONE | 採用特設ページ

HAKUHODO & HAKUHODO DY MEDIA PARTNERS RECRUIT 2020

ホーム | あさってロボット会議

札幌のホームページ制作・Webサイト制作｜Rondomark

学校法人秋本学園　浦和つくし幼稚園 採用サイト

京都 京北の農家あらい農園 | 京都の京北(けいほく)で農業を営む、あらい農園のオフィシャルwebサイトです。無農薬・有機肥料で旬の野菜を育て、京都を中心に採れたての野菜の個配や野菜の振売を行っています。

イラストやキャラクターなど

FCA福岡デザイン&テクノロジー専門学校｜ゲーム・eスポーツ・CG映像・IT・漫画・アニメを学ぶ

7才の交通安全プロジェクト トップ | 共済・保障のことならこくみん共済 coop <全労済>

【コンビ】LakuMug（ラクマグ）| 自分で飲める、日本製ベビーマグ誕生！| ベビー用品のコンビ株式会社

株式会社 もみの木

フッターに固定

大阪市城東区 新築・改修工事を確かな施工品質で | 株式会社フロムフォーティーフォー

株式会社サカモト | キャラクター雑貨の企画、製造

株式会社トクバイ

ペエ歯科クリニック | 治療と予防を通じて地域の「元気」を応援する、菊池市の歯科医院です。

OCEANUS | オシアナス – CASIO

ネタ・動きがあるもの

工夫された動きをみているうちに、ページトップへ移動できます。ぜひ押してみてください♪
また押したくなるものが多いですね。

やざわ虎クリニック | 諏訪市上諏訪駅 内科・外科・検査・健康診断

ページ右下の雲に隠れている虎の尻尾をクリックしてください。

HOPPIN’ GARAGE | できたらいいな。をつくろう

ページを下の方へ進めると、「TOP」という文字が現れるのでクリックしてください。

【公式】大阪堀江・兵庫県川西市のフォトスタジオハピスタ｜家族写真・子供写真・七五三

ページを下の方に進めると。「PAGE TOP」ボタンが現れるので、クリックしてください。風船を飛ばしながら、ページ上部へ移動します。

Newhattan | ニューハッタン日本公式サイト

矢印がマウスポインターにくっついてくるような動きになっています。

まとめ

いかがでしたか？
色々なデザインがありますが、普段のサイト制作のときにお役に立てたら幸いです♪