レスポンシブ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にはメディアクエリを読ませないよ
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
スクロールに応じて動くアニメーションをつくる方法 | Stronghold Archive
どうもこんばんは！ 今日のネタは…「スクロールに応じて動作するアニメーション」です。 そういったサイトも増え（むしろもう減った？） 目にする機会も増えたかと思います。 基本はこんなパラパラアニメを用意し スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える を実施するだけです。 パラパラアニメを用意するのが若干手間ですが それさえクリアできればけっこう簡単です。 …前置きはこれぐらいでデモとコード DEMO コード <script type="text/javascript"> $(document).ready(function(){ //#MovieContents内スクロール初期化 $(‘#MovieContents’).scrollTop(0,0); //#MovieContentsをスクロールでfunction実行 $(‘#MovieContents
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
