[B! responsive] lamichのブックマーク

画面幅によって表示する画像を変える方法～レスポンシブデザインでの画像表示～ | ホームページ制作株式会社KOP

レスポンシブデザインのWEBサイトを作成時、「PCではこちらの画像、スマホではあちらの画像」と、表示を切り替えたい時ってありませんか？ありますよね。たまに。そんな時の解決策はいくらかあるのですが、私が一番スマートだと思う方法をご紹介します。 JavaScript等は使用せずにhtmlのみで切り替える方法です。cssすらも必須ではありません。では早速、こちらがその方法です。 <picture> <source srcset="https://webcreatetips.com/wp-content/uploads/2016/05/beautiful-woman-sp.jpg" media="(max-width: 767px)"> <img src="https://webcreatetips.com/wp-content/uploads/2016/05/beautiful-woman.

lamich 2018/11/19

リンク

無料で高品質！レスポンシブ対応のWordPressのテーマファイルのまとめ

最近のウェブデザインのトレンドを取り入れた、個人でも商用でも無料で利用できるレスポンシブ対応のWordPressのテーマファイルを紹介します。レスポンシブ対応のテーマファイルをそのまま使ってWordPerssのサイトやブログを作ってもいいし、デザインの勉強としてもストックしておきたい高品質なものばかりをまとめました。

lamich 2015/09/10

リンク

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）

スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から）まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付