29種類のレイアウト、30種類のナビゲーション、画像・動画・地図・テーブル・フォーム・タブ・カルーセルなど、Webページで使用するさまざまなレイアウトやコンポーネントのレスポンシブ対応のパターンをまとめたサイトを紹介します。 デザイン的なアイデアにしてもよし、HTML/CSSの参考にしてもよし、です!
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にはメディアクエリを読ませないよ
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
サイトのデザインを変更しようかと思ったのですが,自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました.尚,どのサイトが人気なのか分からなかったので,各種ソーシャルメディアのカウントを取得して併記してみました.海外サイトばかりなので,SBM としてははてなブックマーク以外に Delicious のカウントも取得しています. 掲載されてあるデザインはまったく見ずに,サイトの使いやすさ(と言うか「広告の少なさ」かな)だけからの感想ですが,個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています. URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く