ラッパーに含まれるコンテンツを、ラッパーの幅を超えて表示させる小技 – wald-grun.biz
コリスさんのところ で紹介されていた小技。地味に便利だと思うので自分用に転載してメモ。 [CSS]ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック コンテンツをセンタリングする際に、ラッパーで幅を指定してそれを中央寄せ、というのはよくやると思います。その中で、横いっぱいに背景をつけたい場合、普通に書くとラッパーの横幅を越えて表示することができません。こんな感じですね。 サンプル１：wrapperに納める そこで、ネガティブマージンで一旦はみ出させておいて、それと同値のpaddingを指定してやることで相殺すると、横いっぱいの表示にすることができます。こんな感じ。 サンプル２：wrapperをはみ出す 具体的には、はみ出させたいボックスに、CSSで次の記述を加えます。
【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック – PresentNote
ヘッダーやフッターなどがブラウザの横幅いっぱいに広がっているウェブサイトをよく見ると思います。そういった表現を実現しようという趣旨です。スタイルシートを活用して、画面いっぱいに広げたいと思います。 以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。 問題）レスポンシブデザインに対応できなくなった Twenty Elevenはもともとレスポンシブデザインになっていました（レスポンシブデザインって何？ という場合は、ググってみてください）。しかし、横幅いっぱいにヘッダーやフッターを広げると、なぜかレスポンシブデザインではなくなってしまったのです。iPhone で確認すると、サイトは単純に縮小されたように表示され、第一印象では「小さすぎて何が書かれているか分からない……」という感じです。なのでタップして拡大しない
CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
calc()とvw単位を使った飛び出すpre要素
飛び出すpre要素っていうのは昔書いた描画領域一杯にpre要素の幅を拡大するテクニックと目指す見た目は同じもの。以前考えたものはちょっとの間使ったもののバグが多くすぐやめた。このテクニックは大きい要素を左右に付け、はみ出した部分を隠すというものだった。それをvw単位を使ってビューポートの幅を取り、それとcalc()を組み合わせることでどうにかしようという試み。 Demo: Expand pre Element #2 pre要素の左右が#f0fの矩形で埋められている。Chrome 35、Firefox 30、そしてInternet Explorer 11で確認できる。Mobile Safari 7ではうまく動かない(多分vw単位の問題のような気がする)。わかりやすいように左右に追加する擬似要素の背景の色を変えておいたけど、同じ色にすればあたかもpre要素が飛び出すように見えるはず。 .tes
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
