CSSによる段組（マルチカラム）レイアウト講座

2006/03/16 1583 users ブラウ float カラム マルチカラム 根拠

このサイトについて テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。 CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。 基礎編では float の仕様とブラウ... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2015/06/14 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2014/08/06 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com

2012/12/05 660 users Ginpen.com width 横幅 横スクロールバー 原因

CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:... 続きを読む

CSSのposition:stickyがすごく便利 | q-Az

2017/03/05 594 users sticky q-Az CSS 魔法 便利

最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: sticky MDN が説明が詳しいので貼って... 続きを読む

CSSオンリーでクールなグラフを書くサンプル集:phpspot開発日誌

2006/08/22 543 users cssオンリー phpspot開発日誌 グラフ サンプル集

Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style>     .graph {         position: ... 続きを読む

[CSS]サイズが分からない要素を真ん中に配置するテクニック | コリス

2011/11/01 493 users コリス fixed mar CSS Left

下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、mar... 続きを読む

position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

2014/08/06 433 users CSS バシャログ いまどき block要素 上下左右中央

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例え... 続きを読む

フロントエンド開発者であれば知っておくべきモバイル/デスクトップブラウザのバグやトリック20 | Web | position: absolute;

2012/11/26 418 users デスクトップブラウザ absolute 表題 パク web

2012年11月26日 ｜ Web フロントエンド開発者であれば知っておくべきモバイル/デスクトップブラウザのバグやトリック20 斉藤さん（@cssradar）が紹介していた20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should knowがおさらい的に参考になったので各項目の表題だけ訳して... 続きを読む

CSSで作る見出しデザイン | Web’Notes

2014/02/14 413 users CSS 見出しデザイン relative bold SOLID

見出しはサイトの見た目を決める上で重要な箇所です。 印象的な見出しは、それだけでサイトを引き立ててくれます。 今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。 .heading1{ position:relative; padding-left:20px; border-bottom:2px solid #ccc; font-weight: bold; ... 続きを読む

CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos

2007/06/18 407 users youmos fixed ブッダ CSS スクロール

CSSテクニックで非常にシンプルだが、是非実践したいのがフッタ位置の調整。フッタの表示位置をCSSのみで調整して、画面の下に表示してくれるようにするテクニック。 画面下に固定表示（position:fixed）ではなく、コンテンツ量が多いときは、スクロールした一番下に表示する。逆にコンテンツ量が少なく、スクロールが発生しない場合でも、きちんと画面の下にフッタが表示される。わかってしまえば、簡単に実... 続きを読む

IEを華麗に撃墜する一行 - ぼくはまちちゃん！(Hatena)

2007/08/04 359 users 一行 ボク rel セレクタ select

はい！ こんにちは！！！！！ 今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね！ これだよ！ → サンプル (IEだとブラウザが終了しちゃうよ！ 注意してね！) IE6とかIE6のコンポーネントブラウザだと確実に落ちちゃうみたいだね！ IE7は確認してないけど！ tableとかtrの直下に、inputとかselectがあって、 そのあたりにcssの全称セレクタでposition:rel... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users fixed モーダル コリス パーセンテージ CSS

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック | コリス

2012/05/20 304 users コリス relative CSS overflow テクニック

Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video ifram... 続きを読む

小粋空間: CSS で table に斜線を引く方法

2009/10/25 287 users table 斜線 CSS relative span

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に... 続きを読む

HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。

2008/07/18 277 users バシャログ float HTML 段組み 余白

「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっ... 続きを読む

モダンCSSによる絶対配置（position: absolute;）の削減 | コリス

2021/09/28 260 users absolute コリス モダンCSS 削減 配置

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 posi... 続きを読む

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ | コリス

2017/07/31 258 users コリス transform Flex ビューポート CSS

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transform, position, display:flex;などを使ったテクニックが紹介されて... 続きを読む

jQueryを使った一定以上スクロールすると上に固定される横メニュー｜Webpark

2013/03/04 244 users jQuery Webpark fixed 上部 横メニュー

最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したH... 続きを読む

[CSS]背景が透けるカラムを実装するスタイルシート | コリス

2008/03/05 232 users コリス カラム CSS Pixels relative

Bits & Pixelsのエントリー「Cross-browser transparent columns」から、背景が透けるカラムを実装するスタイルシートを紹介します。 CSS箇所 #column-1{ position:relative; float:left; width:500px; /* remember to set a width */ } .overlay{ position:ab... 続きを読む

CSSによる段組（マルチカラム）レイアウト講座

2006/03/24 219 users ブラウ float カラム マルチカラム 根拠

このサイトについて テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。 CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。 基礎編では float の仕様とブラウ... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

[CSS]ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス

2013/02/19 213 users コリス Depth fixed 奥行き CSS

ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 [css] body:befo... 続きを読む

Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント | コリス

2019/03/19 194 users コリス absolute Disney ハンバーガーメニュー

スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が... 続きを読む

CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック | コリス

2021/03/12 183 users コリス sticky ヘッダ CSS セル

テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダ... 続きを読む