たねっぱ！

テーブルを横スクロールで表示する方法

futappa_staff — Tue, 09 May 2023 00:02:06 +0000

はじめに

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

完成形

通常時

見出し	見出し	見出し	見出し
内容	内容	内容	内容
内容	内容	内容	内容

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

※横スクロールできます

見出し	見出し	見出し	見出し
内容	内容	内容	内容
内容	内容	内容	内容

実装方法

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

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

		
			
				
					見出し
					見出し
					見出し
					見出し
				
				
					内容
					内容
					内容
					内容
				
				
					内容
					内容
					内容
					内容

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

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

		th,
		td{
			width: 100px;

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

最後に

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

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

ホバーのときに画像を拡大する方法

futappa_staff — Wed, 17 Nov 2021 07:58:20 +0000

はじめに

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

＜サンプル＞

実装方法について

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

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

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

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

拡大するために、img:hoverのところに、「transform: scale(1.2);」をつけます。さらにimgに「transition:all 0.3s;」をつけることで、動きがスムーズになります。
ですが、このままでは枠（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;」を追加します。これで完成です！！

		.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);
		}

まとめ

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

ファビコンを設定していますか？（2019年5月22日から仕様が変わりました）

futappa_staff — Mon, 01 Nov 2021 07:58:32 +0000

はじめに

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

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

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

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

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

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

ガイドライン

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

最後に

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

chromeのおすすめ拡張機能10選

futappa_staff — Tue, 06 Jul 2021 01:08:25 +0000

ブラウザの拡張機能を入れるだけで、あらゆる場面で本当に便利になります。今回は、chromeの拡張機能でオススメの10選を紹介します。

最後に

便利なものが多いですが、あれもこれもと全部入れると重くなるので、必要なものを厳選して使うのがおすすめです。

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #２

futappa_staff — Sun, 06 Jun 2021 01:07:26 +0000

はじめに

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

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

参考サイトのご紹介

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

h1タグ

トップページのロゴ部分

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

h2タグ

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

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

h3タグ

まとめ

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

参考サイト

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

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #１

futappa_staff — Wed, 16 Dec 2020 09:28:27 +0000

はじめに

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

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

参考サイトのご紹介

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

h1タグ

トップページのロゴ部分

h2タグ

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

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

h3タグ

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

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

h3・h4タグ

まとめ

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

参考サイト

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

メインビジュアル14選！変わった形のデザインパターン♪

futappa_staff — Wed, 09 Dec 2020 02:24:49 +0000

ファーストビューの印象に影響するメインビジュアル。四角形だけではなく、いろんな形デザインを見かけるので、集めてみました。メインビジュアルを作る参考になれば幸いです。

採用情報｜株式会社ネットサービス・ソリューションズ
クリオ訪問看護・リハビリステーション
Rand | 神谷直広 / NAOHIRO KAMIYA
一般社団法人子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織
Get the Picture by InsideJapan Tours
世田谷フルート教室　Setagaua Flute School
大阪大学産業科学研究所先端実装材料菅沼研究室
ふるさとの田んぼと水子ども絵画展｜農村だいすき！ふるさと子ども美術館
株式会社クルイト
SUBARU健康保険組合太田記念病院看護部サイト
DAW Studio　アオイウミト、－ボーカル収録・ボイス収録
シャトー酒折ワイナリー | CHATEAU SAKAORI
岐阜｜設計・建築「佇」 -タタ住”マイ（たたずまい）
最後に

いろんなパターン

採用情報｜株式会社ネットサービス・ソリューションズ

クリオ訪問看護・リハビリステーション

クリオ訪問看護・リハビリステーション｜「らしさ」に寄り添い、「らしく」を支える。

Rand | 神谷直広 / NAOHIRO KAMIYA

丸い形が自由に変形しているのがとても印象的です！とてもナチュラルな動きで、つい見てしまいます。

一般社団法人子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織

Get the Picture by InsideJapan Tours

別ページへ移動するときに、丸い背景の拡大する動きがいい感じです。

世田谷フルート教室　Setagaua Flute School

大阪大学産業科学研究所先端実装材料菅沼研究室

ふるさとの田んぼと水子ども絵画展｜農村だいすき！ふるさと子ども美術館

株式会社クルイト

メインビジュアルもそうですが、サイト全体を通して流体シェイプがたくさん使われています。

SUBARU健康保険組合太田記念病院看護部サイト

DAW Studio　アオイウミト、－ボーカル収録・ボイス収録

普通の四角形じゃないだけで、印象が変わりますね。

シャトー酒折ワイナリー | CHATEAU SAKAORI

岐阜｜設計・建築「佇」 -タタ住”マイ（たたずまい）

最後に

いかがでしたか。参考になれば幸いです♪

メインビジュアル20選！スライドや動画になっているパターン♪

futappa_staff — Mon, 30 Nov 2020 08:24:20 +0000

今回は、スライドショーや動画になっているメインビジュアルを集めました。なるべく変わったデザインのもので、参考になりそうものを集めています。

江戸東京きらりプロジェクト
あとリノ育てていく住まい | リノベーションの株式会社リビタ
どんぐり｜札幌の焼きたてパンの店
【東京イラストレーターズ・ソサエティ（TIS）】Tokyo Illustrators Society
浦野歯科診療所 | 大阪、堂島の歯医者
山形県立産業技術短期大学校 | 山形県立産業技術短期大学校ホームページです。地域の即戦力となる学生を養成します。
倉敷芸術科学大学芸術学部 | Kurashiki University of Science and the Arts – College of The Arts
TAGUCHi | ガジラ(GUZZILLA) | 土木解体アタッチメント | タグチ工業
株式会社ベンチマーク｜読売新聞京葉地区No.1
滋賀県近江八幡市に根差す歯医者 – クラウド歯科 CLOUD DENTAL CLINIC
ヒノヨコ.com|名古屋の子育てはじめてのひよこママへ
共栄製茶株式会社
春日市白水ヶ丘の内科｜ながの内科
江戸川区瑞江の内科・循環器内科｜つちだクリニック
Matsue Group 採用サイト
TAPUKO THE GAMA | タッコにんにくを使用したマヨネーズタイプのドレッシング-タプコザガマ
株式会社OS工芸社
わかば保育園｜大阪府羽曳野市にある企業主導型保育園
株式会社ジェイアール東海高島屋新卒採用ページ
スプレディ株式会社［Spready Inc.］
最後に

動画・スライドになっているパターン

江戸東京きらりプロジェクト

右側の写真が、ふわっと（もやもやっと？）切り替わります。雰囲気のある切り替え方だと思います。

あとリノ育てていく住まい | リノベーションの株式会社リビタ

リノベーション会社らしく、家のモチーフを使っています。よくある左右に写真がスライドするのではなく、３枚の写真がいっぺんに切り替わります。

どんぐり｜札幌の焼きたてパンの店

パンみたいなふっくらしたモチーフになっています。吹き出しのコメントが、アクセントに動いていて可愛いです。

【東京イラストレーターズ・ソサエティ（TIS）】Tokyo Illustrators Society

「ＴＩＳ」というシルエットの向こうで、いろんな画像が右から左へスライドしていきます。

浦野歯科診療所 | 大阪、堂島の歯医者

図形が自由に変形していくのが目を引いて、いい感じだと思います。写真はスライドショーになっています。

山形県立産業技術短期大学校 | 山形県立産業技術短期大学校ホームページです。地域の即戦力となる学生を養成します。

倉敷芸術科学大学芸術学部 | Kurashiki University of Science and the Arts – College of The Arts

たくさんの写真や動画がが切り替わっていく動きも可愛いらしいと思います。

TAGUCHi | ガジラ(GUZZILLA) | 土木解体アタッチメント | タグチ工業

株式会社ベンチマーク｜読売新聞京葉地区No.1

滋賀県近江八幡市に根差す歯医者 – クラウド歯科 CLOUD DENTAL CLINIC

歯科らしく、歯のシルエットになっています。

ヒノヨコ.com|名古屋の子育てはじめてのひよこママへ

共栄製茶株式会社

春日市白水ヶ丘の内科｜ながの内科

建物のシルエットに合わせた形が印象的で素敵です。

江戸川区瑞江の内科・循環器内科｜つちだクリニック

Matsue Group 採用サイト

TAPUKO THE GAMA | タッコにんにくを使用したマヨネーズタイプのドレッシング-タプコザガマ

株式会社OS工芸社

わかば保育園｜大阪府羽曳野市にある企業主導型保育園

画像がスライドするときのエフェクトが印象的でした。

株式会社ジェイアール東海高島屋新卒採用ページ

スプレディ株式会社［Spready Inc.］

流体シェイプがふよふよ変形していて、動画がながれます。

最後に

いかがでしたか。参考になれば幸いです♪

メインビジュアル7選！ロゴがモチーフになっているパターン♪

futappa_staff — Wed, 25 Nov 2020 04:21:41 +0000

ファーストビューの印象に影響するメインビジュアル。今回はロゴをベースにデザインされているものを集めてみました。

株式会社オーセン｜マーケティングテックカンパニー
岐阜の高気密高断熱住宅の工務店｜エムズアソシエイツ
松本市・岡谷市の工務店・ハウスメーカー｜ナガノテクノス
なないろサーカス団 | なないろの架け橋をつくるアートカンパニー
一般歯科小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック
K-MIX – 株式会社ケイミックス
株式会社Leo Clie
最後に

ロゴの形がモチーフになっているパターン

株式会社オーセン｜マーケティングテックカンパニー

波打つように出てくるタイトルがいい感じです。背景のロゴマークのシルエットは動き回っていて、ほどよいバランスだと思います。

岐阜の高気密高断熱住宅の工務店｜エムズアソシエイツ

ロゴの「M」の形にしているのかなと思います。スライドになっています。

松本市・岡谷市の工務店・ハウスメーカー｜ナガノテクノス

工務店・ハウスメーカーらしく、家の形になっています。また、ロゴといい感じに合わせています。

なないろサーカス団 | なないろの架け橋をつくるアートカンパニー

ロゴマークにあるテント部分がうまく使われています。

一般歯科小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック

K-MIX – 株式会社ケイミックス

ロゴモチーフの部分に、動画が流れていくのが印象的です。

株式会社Leo Clie

最後に

いかがでしたか。いろんなパターンを見て、デザインの引き出しが増えたら幸いです♪

コーディングしやすいデザインデータの作り方 ★Part３（レイヤー編）

futappa_staff — Fri, 30 Oct 2020 00:50:36 +0000

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、レイヤーについてまとめました。

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない
不要なレイヤーは削除する
セクション・パーツごとにグループ化する
レイヤー名は関連する名前にする
通常時・ホバー時のデザインをわかりやすくする
レイヤーをロックしない（場合による）
最後に

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

パーツとして書き出すときに、表示通りのデザインのまま書き出せないため、特別な理由がない限りは使わないでおきましょう。代替策としては、透明度で対応するのがベターかと思います。

不要なレイヤーは削除する

非表示レイヤーがあると、必要なのか不要なのかわからないのと、データ容量も重くなりますので気をつけてください。

セクション・パーツごとにグループ化する

１、セクションごとにグループで分ける

ヘッダー、新着情報、アクセス、フッター…などという感じで、デザイン順と同じようにグループを作りましょう。

２、パーツ系は、まとめてグループにする

例えばボタンを作った場合、「ボタンの背景」「文字」「矢印アイコン」これらの情報は同じ１つのグループとしてまとまっている方がわかりやすいです。また、画像書き出しが必要な場合も、すでにグループ化されているとまるごとアセット書き出しもできて便利です！

レイヤー名は関連する名前にする

「新しいフォルダ」「○○のコピー」のようなレイヤーが並ぶと、全くわからないです。名前をつけるのが難しいものは、無理につける必要は無いと思いますが、なるべくレイヤー名はわかりやすいものがいいと思います。

通常時・ホバー時のデザインをわかりやすくする

ホバー時のデザインには、レイヤーにカラーラベルやコメントをつけておいたり、仕様書にまとめておくなど、コーダーに伝わるように準備しておくと良いと思います。

レイヤーをロックしない（場合による）

あちこちでロックがかかっていると、どこでロックがかかっているのか確認したり、わかりづらいため。デザインデータを渡すときには、ロックの数は最小限にした方が良いと思います。

最後に

レイヤー整理は、ある程度デザインが固まった段階でする。など、自分のタイミングがあれば無理せずできると思いますので、ぜひ意識してやってみてください♪

たねっぱ！

テーブルを横スクロールで表示する方法

目次

はじめに

完成形

通常時

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

実装方法

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

最後に

ホバーのときに画像を拡大する方法

目次

はじめに

実装方法について

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

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

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

まとめ

ファビコンを設定していますか？（2019年5月22日から仕様が変わりました）

目次

はじめに

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

ガイドライン

最後に

chromeのおすすめ拡張機能10選

目次

おすすめ一覧

Wappalyzer

One Tab

SearchPreview

Awesome ScreenShot

Save to Pocket

Clear Cache

PerfectPixel

EditThisCookie

ColorPick Eyedropper

Fontface Ninja

最後に

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #２

目次

はじめに

参考サイトのご紹介

h1タグ

h2タグ

h3タグ

まとめ

参考サイト

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #１

目次

はじめに

参考サイトのご紹介

h1タグ

h2タグ

h3タグ

h3・h4タグ

まとめ

参考サイト

メインビジュアル14選！ 変わった形のデザインパターン♪

目次

いろんなパターン

採用情報｜株式会社ネットサービス・ソリューションズ

クリオ訪問看護・リハビリステーション

Rand | 神谷 直広 / NAOHIRO KAMIYA

一般社団法人 子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織

Get the Picture by InsideJapan Tours

世田谷フルート教室 Setagaua Flute School

大阪大学産業科学研究所 先端実装材料 菅沼研究室

ふるさとの田んぼと水 子ども絵画展｜農村だいすき！ふるさと子ども美術館

株式会社クルイト

SUBARU健康保険組合 太田記念病院 看護部サイト

DAW Studio アオイウミト、－ボーカル収録・ボイス収録

シャトー酒折ワイナリー | CHATEAU SAKAORI

岐阜｜設計・建築 「佇」 -タタ住”マイ（たたずまい）

最後に

メインビジュアル20選！ スライドや動画になっているパターン♪

目次

動画・スライドになっているパターン

江戸東京きらりプロジェクト

あとリノ 育てていく住まい | リノベーションの株式会社リビタ

どんぐり｜札幌の焼きたてパンの店

メインビジュアル14選！変わった形のデザインパターン♪

Rand | 神谷直広 / NAOHIRO KAMIYA

一般社団法人子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織

世田谷フルート教室　Setagaua Flute School

大阪大学産業科学研究所先端実装材料菅沼研究室

ふるさとの田んぼと水子ども絵画展｜農村だいすき！ふるさと子ども美術館

SUBARU健康保険組合太田記念病院看護部サイト

DAW Studio　アオイウミト、－ボーカル収録・ボイス収録

岐阜｜設計・建築「佇」 -タタ住”マイ（たたずまい）

メインビジュアル20選！スライドや動画になっているパターン♪

あとリノ育てていく住まい | リノベーションの株式会社リビタ

倉敷芸術科学大学芸術学部 | Kurashiki University of Science and the Arts – College of The Arts

江戸川区瑞江の内科・循環器内科｜つちだクリニック

株式会社ジェイアール東海高島屋新卒採用ページ

メインビジュアル7選！ロゴがモチーフになっているパターン♪

一般歯科小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック