レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説 | コリス

2015/01/26 104 users コリス fixed absolute static 配置

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。 さらに複雑しているのが配置の名称。 Static, Absolute, Relative, Fixed、、、スタティックとはどこが... 続きを読む

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

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

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

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

2012/05/20 304 users コリス CSS overflow Hidden height

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

[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please! | コリス

2012/04/12 122 users コリス CSS background border div

HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f... 続きを読む

CSSレイアウトの肝！ 表示・配置のプロパティ、14選 - ＠IT

2010/11/25 428 users プロパティ CSSレイアウト 配置 fixed static

positionプロパティ positionプロパティは、ボックスを画面上にどういった方法でレイアウトしていくかを設定するプロパティです。 値には、絶対配置の「absolute」、相対配置の「relative」、特に配置方法を指定しない「static」、スクロールしても位置が固定される「fixed」があります。 詳しくはコチラ　position ボックスのレイアウト方法を指定するpositionプ... 続きを読む

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

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

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

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

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

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