さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行

以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、　現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると

今後のWebサイト制作において、さらに重要度を増すであろうレスポンシブWebデザイン。その正しい知識や導入メリットとともに、本当の意味で有効なレスポンシブWebデザインとは何かを改めて考えてみよう。 制作・文：藤田拓人、清水豊（株式会社ワークス） Webを取り巻く環境の劇的な変化Web制作に関わる業界は、その萌芽たる時代からずっと日進月歩してきた。日々めまぐるしく変わっていく情勢をキャッチし、判断し、取り入れながら応用するということの繰り返しだったといえるだろう。 特に2010年以降、スマートフォンの普及とiPadの登場を契機とするタブレット端末の普及、そしてソーシャルメディアの急速な伸長に加え、電子書籍やクラウドコンピューティングにより、さらに身近になった動画媒体、音媒体など、それ以前にはなかったサービスが一気に多重的に現出した。また、その変遷速度はさらに加速度を増している（図01）。

どんな端末でウェブサイトを閲覧しても同様のコンテンツを提供する「コンテンツ・パリティ（Content Parity）」という考え方は、マルチデバイス対応が必須になったいまのウェブ制作にとって、とても大切なものです。前回の「モバイル対応でレスポンシブWebデザインとSEOが向かう先」の後編にも関わる内容なので、今回は「コンテンツ・パリティ」についてまとめてみます。マルチデバイス対応をする際に誰もが一度は考えなければならないことです。若干いまさらな感じもしなくはないですが、何かのお役に立てば幸いです。 コンテンツ・パリティが必要な3つの理由 理由１： ユーザの一番の不満はモバイルサイトに情報が掲載されていないこと イギリスで行われた調査によると、モバイルサイトを閲覧していてユーザが一番不満に感じることは、情報や機能がモバイルサイトで見つけられないことだそうです。また、モバイルサイトに「フルサイ

かなり久々の投稿になってしまいましたが、今回はレスポンシブWebデザインとSEOについて、最近考えていることや調べていることを整理してみました。若干長めの文章ですが、久々にお付き合いください！前・後編の2回に分けて公開する予定です。 では、さっそく本題に入ります。 検索エンジンからのトラフィックの流入に収益を依存しているビジネスの場合は特に、SEOはビジネスの死活に関わる大きな問題です。80〜90%のトラフィック流入元がGoogleの自然検索というサイトも少なくないのではないでしょうか？現在、制作を手伝わせてもらっているサイトも自然検索からの流入が多いサイトで、モバイル対応にもUXへの影響だけでなく検索エンジンの評価への影響も考慮して、かなり慎重に進めています。 そこで、今回の投稿では、デスクトップ向けのウェブサイトをレスポンシブWebデザインでリニューアルする際、また、デスクトップにしか

FROONTはレスポンシブなウェブサイトを簡単に作成できるサービスです。 レスポンシブなサイトのモックを作るときに便利そうです。 ドラッグ＆ドロップで絵を描くようにしてサイトを作っていくだけ。 その場でウィンドウサイズを変えたときの表示の変化も確認できます。 作成したモックのHTML, CSSはダウンロード可能です。 以下に使ってみた様子を載せておきます。 まず「FROONT」にアクセスしましょう。 利用するには無料登録が必要です。すぐに終わるので登録してみましょう。 こちらが作成画面。 左側にコンテンツのメニューがあります。 画像をいれたり枠をいれたり。 右側はそのコンテンツの詳細メニューですね。 最上部にウィンドウサイズを切り替えられるバーがあります。 先ほどのデザインをスマートフォン用のサイズにすると、上記のようにデザインが変わりました。 レスポンシブデザインの確認が容易にできるのは

レスポンシブWebデザイン対応サイト向けのドロップダウンメニューを実装する為のスクリプト・FlexNavのご紹介です。なかなか使い勝手も良さそうな印象でした。 PCサイトではマウスホバーによるドロップダウン、スマフォではタップで降りるコンパクトなメニューに切り替わります。 ネストされたメニューにも対応していますのでこのまま利用しても大丈夫・・かな。（まだ詳しく見てないです） <ul class="flexnav" data-breakpoint="800"> <li>Menu01</li> <li>Menu02</li> </ul> カスタムデータ属性でブレークポイントを設定します。em単位でもセッティングできるみたい。 $(".foo").flexNav({ 'transitionSpeed' : '0.4s', 'itemHeight': 50 }); 降りてくるスピードなどはオプショ

スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ

Home > 配布 > 【レスポンシブ対応！】基本最低限、カスタマイズするだけの無料wordpressテンプレート「bee-responsive1.0」

タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox