CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。
レスポンシブ対応、検索フォームのデザイン・実装するアイデアのまとめ
CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
WordPressでYouTubeやInstagramのiframeをレスポンシブ対応にする方法
//iframeのレスポンシブ対応 function wrap_iframe_in_div($the_content) { if ( is_singular() ) { $the_content = preg_replace('/<iframe/i', '<div class="video-container"><div class="video"><iframe', $the_content); $the_content = preg_replace('/<\/iframe>/i', '</iframe></div></div>', $the_content); } return $the_content; } add_filter('the_content','wrap_iframe_in_div');
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
[jQuery] レスポンシブ表示・スワイプ切り替え対応でモバイルページにも使いやすい画像スライドショープラグイン – SlidesJS
以前は、Slides, A Slideshow という名前だった多機能スライドショープラグインですが、いつの間にか SlidesJS という名前に変わり、機能もシンプルに、かつマルチデバイス対応できるものに変わっていました。 オプションや使い方などもマルっと変わっていたため、古いバージョンの内容を削除し現在の仕様内容へ書き換えました。 SlidesJS プラグインの特徴 モバイルページにも使いやすいよう画像のレスポンシブ表示が可能で、スワイプでの画像切り替えもできます。 オプションでページャー・ページナビゲーション・自動再生の開始と停止ができ、エフェクトはスライドにもフェードにも変更できます。欲しい機能が揃っている上、設置も簡単です。 ダウンロード プラグインのダウンロードは以下のページより。 SlidesJS, a responsive slideshow plug-in for jQu
![[jQuery] レスポンシブ表示・スワイプ切り替え対応でモバイルページにも使いやすい画像スライドショープラグイン – SlidesJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/13dbe7efe8ed31a6d9a46b661656ca737229776f/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2011%2F12%2Ficon.png)
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
PCとスマートフォンで画像を切り替える【jQuery連載09】 | HTML5でサイトをつくろう
前回は、ソーシャルボタンをまとめて設置ができるプラグイン「jQuery.socialbutton」を使用しましたが、今回はレスポンシブレイアウトなどで使用する画像をふりわけるプラグインを使用して画像の切り替えを行います。 PCとスマートフォンなどのモバイル端末でレイアウトを最適化させる為の手法のひとつとしてレスポンシブレイアウトが使われるようになっているが、同じソースコードしてCSSなどでレイアウトを変更させるので作成は比較的用意だが、なにもしない場合は画像は双方で使用されてしまうため、グラフィックを多用するサイトではレイアウトは最適化してもデータ量は同じものとなってしまう。そこでデバイスによって使用する画像を切替えるようにしてスマートフォンでは軽量な画像を自動的に振り分けるようにしてみる。 今回作成したサンプル 【サンプル】PCとスマートフォンで画像を切り替える http://www.h
心地よい驚きを、世界へ。ブラシナグループのオフィシャルサイトです。
2018.06.05 LLE82 Salon ＃04-梅澤友里香さんのインタビュー記事を公開いたしました。
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
lightbox系プラグイン「Shadowbox.js」が便利でかっこいい | スターフィールド株式会社
lightboxといえば、結構前から現在でもサイトでよく使われているjavascriptプラグインです。 似たようなものがいくつかあり、それらをまとめてモーダルボックスやlightboxといったりしますが、 その中で、シンプルで、使いやすくて、ちょっとかっこいいプラグインをご紹介します。 その名も「Shadowbox.js」です！ 特徴としては、 ・画像の表示、複数画像のスライド ・外部サイト、共有動画サイトの表示 ・インラインコンテンツ（ページ内のhtml要素）の表示 ・flash(swf)や動画ファイル(SWF,FLV,WMP,QuickTime)の表示 ができるということです。 動画やインラインのものを表示できるものってそう多くはないのではないかなぁと思います。 （他のプラグインを詳しく見てはないのではっきりとはわかりませんが・・・） DEMOを作成しているので、ぜ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）