企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。 Flexbox Grid Flexbox Grid -GitHub Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexbox Gridで実装された柔軟なグリッド Flexbox Gridの使い方 Flexbox Gridで実装された柔軟なグリッド Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

早いもので、レスポンシブWebデザインのギャラリーサイト「Responsive Web Design JP」を公開してから１年が経ち、掲載サイト数も200を超えました。 以前の記事で、「半年後、まだ時代遅れの恥ずかしいサイトとなっていないようでしたら、また状況をご報告したい」と書いたのですが、おかげさまで恥ずかしいサイトにはなっていないようなので、最近の傾向について書いてみたいと思います。 １．デザイン性の高いサイトが増えた レスポンシブWebデザインの本質ではないんですが、ギャラリーサイトとしては、やはりデザイン性の高いサイトを載せたいなぁと思うものです。 制作されるサイトの数や種類が増えたことで、そうしたサイトを載せる機会も増えたように感じます。 studio midori.so le coq sportif THE STABLES Warp Japan AOI Pro. Square

紀州田辺よりこの中国山地に移り住んでから750年、江戸時代に全盛を極めた”たたら製鉄”を生業としてから550年

Case. 69 思いっきり観戦できるように、キッズルームを開設。 若い女性やファミリー世代が気軽にスタジアムへ遊びに来てほしい。しかし、スタジアム内は段差が多くべビーカーでの来場は難しい。

The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b

こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</

レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指

以前かいたjQueryの記事「jQueryのスライドショーやカルーセルを探してるならこれ使っときんさい！」がSRE BLOG内でアクセス数ダントツ1位を記録しています！ せっかくなので、サンプルコードを掲載してもっと活用してもらおうと企みました！ 前回の記事の流れを追うかたちで、よく使うものをご紹介していきます。 エフェクト美しきNivo Slider 何回も言ってますが、エフェクトがきれいで表示切り替えのエフェクトをランダムに設定することができます。テーマもあらかじめいくつか用意されているので、サッとカッコよくしたいときには重宝します。 次の例では、defaultテーマを使用しています。 また、imgタグにdata-thumbを指定すると、サムネイル表示による切り替えもできます。かんたんです。 HTML <!-- #nivo-slider --> <div id="nivo-slider

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 連載第2回では、レスポンシブWebデザインの設計と素材の準備をしました。今回は、ページの基本となるHTMLとCSSの初期設定を記述します。 ベースHTMLの記述 最初に、「枝豆隊」の基本となるHTMLを用意しましょう。このサイトでは、XHTMLではなくHTML5を採用しています。HTML5はオフライン機能や現在地特定機能などのモバイルデバイ

暮らしに役立つ便利な情報を公開中。 おトク情報満載のメールマガジンもお届け 住まいのメンテナンス講座動画など暮らしに役立つ情報を更新中！ また、おトクな特典をいち早くチェックできるメールマガジンも毎月お届け。