CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。
![レスポンシブ対応、検索フォームのデザイン・実装するアイデアのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/00654bdffc8967b35ef529beef48e6b1527aaa32/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016072010.png)
CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。
最近よく見る、スマホのときに横スクロールをするメニュー。 作り方をメモしたいと思います! 実装図・メリット カスタマイズ レスポンシブ(PC+スマホ) スマホ その他のカスタマイズ 色の変更 メニューの横幅・縦幅の変更 最後に 実装図・メリット イメージとしては、PCでは一般的なメニューになり、 画面の横幅が狭くなると、こんな感じで横スクロールをするようになるメニューです。 ちなみに、同じコードをはてなブログのスマホの方に入れると、こんな感じになります(動きは上と同じです)。 このメニューのメリットとしては、 トグルメニューのようにタップしなくても、はじめから数個のカテゴリが見えている Javascriptを使っていないので、回線が不安定なところでも比較的表示が崩れにくい はてなブログ以外でも使える 逆にデメリットは、 スクロールできるのか気付かれないかもしれない 狭い範囲での操作となるの
WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できる便利なプラグインを紹介します。 これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。 Elementor Elementor -wordpress.org Elementorの特徴 Elementorのインストール・使い方 Elementorの特徴 Elementorは、どんなテーマファイルを使っていても、どんなページでも、どんなデザインにでも適用できます。 大きな特徴はコードの知識は不要、ドラッグ&ドロップで要素やコンポーネントを配置し、簡単に調整できます。 自身のブログやポートフォリオに使ってもよし、クライアントが自由にレイアウトをしたい時にもいいですね。
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer(Lightbox) DEMO GitHub(Boxer) GitHub(Lightbox) 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は(見た限りだと)そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えないそうで、.whole(全体)、.half(1/2)、.three-quarters(3/4)のように直感で分かるような人間に優しいclass名にしているそうです。また、.twelve、.sevenといったclass名でも使えるそうです。この辺りは好みとは思うのですが、始めて使いはじめる、という場合はとっかかりやすい気はしますね。ライセンスはMIT。 Pills
サンプルの「col-md-4」の場合、大きな画面では3カラムで表示されますが、ブラウザの横幅が992pxになったとたん、1カラムの縦積みに変化します。 これを「col-sm-4」に変更すると、切り変わるポイントは768pxになります。 「col-xs-4」を指定すると切り替えは無くなり、どれだけブラウザサイズを狭めても、3カラムのまま表示され続けます。 ★覚えておくポイント ◆「lg・md・sm・xs」というブレイクポイントの定義がある。 ◆指定したブレイクポイント以下のサイズになると、とにかく1カラム縦積みになる。 ◆「xs」だけ例外で、指定したカラム数のまま表示されつづける ③ カラム分割数の指定方法 次は「col-md-4」の数字部分についてです。 Bootstrapのカラムというのは、あらかじめ1行を12列に分割してあります。 この分割済みの12列を「幾つづつまとめる」と定義するの
GitHub - robertjanes/video-resize: Efficiently scale HTML5 videos with CSS HTML5のVideoをレスポンシブ対応させる「video-resize」 ブラウザサイズをリサイズさせても綺麗に画面にフィットさせられます。モバイル対応も可能 関連エントリ HTML5での追加・廃止タグ・ブラウザサポート等が一目で分かる「The HTML 5 Mega Cheat Sheet」 HTML5動画プレイヤーを拡張させられる「jquery-video-extend」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 HTML5ベースのクールな音楽プレイヤーをサイトに埋め込める「SoundManager 2」
去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。 そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です! 実装が簡単 インタラクティブ レスポンシブ対応 カスタマイズが簡単 拡張性も豊か 実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。 ちなみに、2017年4月11日にVistaのサポートも終了します。 参考: Windows 製品のサポート ライフサイクル について drivewayのデモ デモではdrivewayで実装され
レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit(ビューポートの単位)で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit(ビューポートの単位)とは? フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
Googleマップをレスポンシブ対応にするのは、簡単です。embedのコードから高さと幅を削除して、ラッパーを用意するだけです。しかし、クリティカルな問題が一つあります。サイズを水平方向に変更した際に、地図の端が切断されてしまいます。 Googleマップの中心にピンを表示し、且つレスポンシブ対応にするテクニックを紹介します。 Create An Auto-Centered Responsive Google Map 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 デモ 実装 デモ デモでは、デスクトップでも、タブレットでも、スマホでも、そしてコンテンツのサイズを変更しても、Googleマップの中心にピンが表示されています。
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは?その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
スマホやタブレットなど、人気の高いモバイルデバイスでWebページがどのように見えるか簡単に確認できるChromeの機能拡張を紹介します。 レスポンシブの確認ツールでよくあるのが、iframeで単にサイズを変更して見るだけのやつ。当ツールはサイズだけでなく、各モバイルデバイスと同じ方法でレンダリングして表示、外部ネットワークだけでなくローカルにも対応しています。
以前の記事でも紹介していますが、近年WEBサイトをPCだけでなく、スマートフォンやタブレット端末から見るユーザーが増えてきています。 あなたのWEBサイトはレスポンシブWEBデザイン(RWD)が綺麗に表示されていますか? いろんなサイズのデバイス(機種)でいちいちチェックするのは大変ですよね。 そこで簡単にスマートフォンやタブレット、PCでレスポンシブ(スマホ対応)イメージの表示を確認するツールを紹介したいと思います。 紹介するツールは、 表示イメージだけでも、iPhoneやiPad air、Macbook airにはめこんだイメージでも表示できる デバイスを横にした場合の表示もできる スライドするだけで表示サイズや気になるデバイスを見ることができる もちろん様々なデバイスのイメージ上をスワイプすることで下部まで見える 使い方は非常に簡単で、 URLを貼り付け クリック 以上です。 レスポ
以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、 現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います! カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると
Web制作の環境は大きく変化しています。 スマホ、タブレットなど様々なデバイスにホームページをを最適化しなければいけないため、各デバイスに対応できる支流のレスポンシブデザインのニーズが高まっています。 レスポンシブデザインをできるだけ効率的に作成するためのサンプルをストックしている方も多いのではないでしょうか。 今回はWeb制作時に役立つレスポンシブデザインのサンプル集をご紹介します。 レスポンシブデザインとは Web制作をスタートする時、デザインからワイヤー構成を考えますが、どの端末向けのサイトにするか、ということです。 PC用、スマホ用、とデバイスごとにファイル管理をしていたら更新の時間もかかり管理も大変です。 そこで単一のファイルで管理ができ、各デバイスに応じた表示をさせることが可能なのがレスポンシブデザインです。 全てのデバイスに対応したサイトを考える時、デザインをマルチメディアで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く