レスポンシブ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にはメディアクエリを読ませないよ
Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方
Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing Bootstrap and the Bootstrap Grid System 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 3の特徴 Bootstrapのダウンロードとインストール Bootstrapのファイル構成 このチュートリアル用のファイル構成 デバイス用のclass コンテナの実装と配置 グリッドの実装 オフセッ
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
5分で分かるレスポンシブWebデザイン
レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ
TEMPLATED
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
