Loading ...
CSSレイアウトサンプルいろいろ
February 16th, 2009 ≫558 views
WEBサイト制作者必見のサンプル集です！1カラム2カラムのレイアウトが網羅された、スタイルシートがダウンロードできるサイトです。
≫http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
上記URLへアクセスすると、いろいろなカラムレイアウトの表が表示されます。レイアウトパターンは全部で53種類、もうこれ以上ないのではというくらいのレイアウトパターンが網羅されています。
気に入ったレイアウトの画像をクリックすると表示される【Download this CSS Layout】からスタイルシートをダウンロードすることができます。収録されているのは、index.html・main.cssになります。
<br />
#wrapper {<br />
margin: 0 auto;<br />
width: 922px;</p>
<p>}<br />
#header {<br />
color: #333;<br />
width: 900px;<br />
float: left;<br />
padding: 10px;<br />
border: 1px solid #ccc;<br />
height: 100px;<br />
margin: 10px 0px 0px 0px;<br />
background: #BD9C8C;<br />
}<br />
#leftcolumn {<br />
color: #333;<br />
border: 1px solid #ccc;<br />
background: #E7DBD5;<br />
margin: 0px 0px 0px 0px;<br />
padding: 10px;<br />
height: 350px;<br />
width: 200px;<br />
float: left;<br />
}<br />
#rightcolumn {<br />
float: right;<br />
color: #333;<br />
border: 1px solid #ccc;<br />
background: #F2F2E6;<br />
margin: 0px 0px 0px 0px;<br />
padding: 10px;<br />
height: 350px;<br />
width: 678px;<br />
display: inline;<br />
position: relative;<br />
}<br />
基本的なID属性は上記の用になっているので、index.htmlの表記はほとんどが同じ記述になっています。
すなわち、アクセスさせるCSSを変換すれば、自由自在にレイアウトが変更できるということになりますね。
基本のhtmlのみをいつも持ち歩き、いざと言うときにCSSを切り替えてカラム表示を変えるというのも酔い方法ですね。
wordpressなどのテーマの基礎としても活用できそうです。
是非ご参考下さい。
※記載されている画像は、作者の作成された画像を使用させていただいている場合がございます。
※基本的にフリー素材となっておりますが、作者様の著作権を保護するために、ダウンロードする際は作者様の利用規約などもご一読ください。
上記ストックに関連するストックはコチラ
boolmark：
この記事はお役に立てましたか？
(No Ratings Yet)
Loading ...
