ウェブサイトのTOPページのアイキャッチエリアで横幅いっぱいに大きな写真がスライドするようなあの動きを実現できるjqueryプラグインをいくつか紹介してみます。 トップページを見るとCSS3なダイナミックなものになっていますが、平面的なものも作れるみたいです。 軽量でフレキシブルなのが売りのようです。 横幅いっぱいに画像を引き延ばすこともできますが、左右に前のスライドを残すタイプのものも得意そうです。 Glide.js ドキュメント / ダウンロード
![レスポンシブで横幅いっぱいに表示できるjqueryカルーセルいろいろ | バニデザノート](https://cdn-ak-scissors.b.st-hatena.com/image/square/288681eadf5c3dd9aab8f2ca33f4f02408a628ec/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-81.fc2.com%2Fv%2Fa%2Fn%2Fvanidesign%2F11187260_968568719828247_3343970705641289934_os.png)
レスポンシブのサイトをコーディングする際、javascriptでSPの時だけ動かしたいことや、SPの時にjavascriptを使って制御しなきゃいけない時に、今までは以下の用に書いていました。 (jQuery使用)
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
ウィンドウや画面のサイズに合わせて文字の大きさを自動的に変更するテクニックは、俗にレスポンシブ・タイポグラフィーまたはフルイド・タイプと呼ばれている。当初は僕も良いアイディアだと思い多用していたが、重要なのはビューポートの大きさではなくデバイスとの距離だろうと思い直したためもうほとんど使うことはない。当初から嫌いといっていた人はこの辺にしっかりとした意識があったのだろう。 使うことをやめた理由は、単純に技術的制約によってユーザーとデバイスの距離を知るすべがないからに過ぎない。レスポンシブ・タイポグラフィーが目指す、適切な文字の大きさを環境ごとに提示することそのものについては正しい考え方であると思う。ただ今利用されている「ビューポートが768px以下なら文字を小さめにする」というようなアバウトな実装だと問題がある。もちろんvw単位を使ったフォント・サイズ指定でも同じだ。 なぜならばデスクトッ
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版(ウィンドウ幅480px以下)ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね! 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいということを知りました。 どうやらDreamweaver CC2015では、 レスポンシブサイトのコーディングに便利なビジュアルメディアクエリーバーやリサイズバーの追加 Bootstrapのサポート Emmetの標準サポート 手軽にブラウザや実機で確認ができるデバイスプレビュー機能の追加 な
テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。 「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。 デモはサイズの可変可能 chewing-grid.cssの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="build/chewing-grid-atomic.css"/> </head> Step 2: HTML 各カードはリストで実装します。 <ul class="chew-row chew-row--col-4 chew-row--card-min-300 chew-row--card-min-500"> <
最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境(IE8+, iOS5+, Android3+)もサポートされています。 レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。 GridLayout GridLayout -GitHub サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。 Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 GridLayoutの主な特徴 GridLayoutのデモ
HOMEブログウェブ制作HTMLメールのレスポンシブ化。 | ネクストページブログ こんにちは、藤中です。 最近、企業からの広告メールやメルマガは、ほとんどHTMLメールになりました。 パソコン用のHTMLメールをスマホで見ると、ちょっと見づらい。スマホサイトがここまで増えた今、HTMLメールもスマホ用の表示になってほしいものです。 最近、お客様からHTMLメールをレスポンシブ化して欲しいというご依頼がありました。調べてみると、HTMLメールのレスポンシブ化は一般的になりつつあり、情報もたくさん出ています。実際に制作していく中で、ネットで公開されている情報だけではうまくいかなかった箇所もあったので、まとめてみました。 今回は制作者向けの情報です。 HTMLメールのレスポンシブ化には、様々な制約があります。よく使われるメールソフトの制限を洗い出し、それを回避しながらコーディングしていきます。
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量(2KB)のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;
先日の記事「フォントサイズの指定方法(翻訳版)」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
レスポンシブWebデザインのサイトでテーブル(表組み)を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/レスポンシブイメージ」 スクリーンサイズに適した画像を読み込む方法のメモ。 1つの大きな画像をフルードイメージ(下記)で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フルードイメージ(Fluid Image) ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。 ウィンドウサイズより大きい画像でも、ウィンドウサイズ(または親要素の幅)に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法 具体的には、img 要素に対して以下のスタイルを適用する。
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値(absolute)と相対値(relative)の二つです。 絶対値(absolute) 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値(relative) 相対値はサイズ自体の値を持っていません。サイズは親要
見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。 Sassline Sassline -GitHub Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラフィのスタイルが機能するように設計されています。 テキストをデザインする際に、気を付けるべきことは「縦のリズム」。 Sasslineでは、ベースラインのグリッドに基づいて正確な縦方向のリズムを使うことができます。 レスポンシブ用に各サイズでの表示には、モジュール式のスケールを採用しています。これはブレイクポイントごとにテキストのサイズを簡単に設定でき、そのままベースラインのグリッドと連動して、美し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く