初心者のためのコピペできるCSSまとめ

カテゴリ：初心者向け 2009年6月12日 10:44

とりあえずよく分からないけど、コンテンツを真ん中にしたい！とか、メニューリストを横並びにしたい！という要望を、コピペのみで使えるように HTML と CSS をまとめてみました。

なので、細かい説明などは今回はしていません。使い方とか質問がありましたら問い合わせフォームからご連絡ください。（これを追加して！という要望でも構いません）

サンプルソース上部にある "view plain" をクリックするとコピペしやすい形でソースが表示されます。書かれている width や height などはサンプルなので適宜お好みのサイズに変更して使用してください。

/* ※ */の部分は色や幅、高さなので使いたいサイズなどに変更してください。

また、掲載されている HTML や CSS の ID や class 名は導入したいサイトで使われているものに変更するか、新しく制作する場合は下記のブログの ID 名や class 名の一覧を参考にしてみてください。もう、class名やid名で悩まないんだからっ！！ | CSS-HappyLife

▼EntryMore▼

コピペメニュー

コンテンツ全体をセンタリングさせる CSS です。
モニタサイズに依存せず、常にコンテンツが真ん中に表示されるようになります。

企業サイトなどで、ページ上部に横に並ぶグローバルナビゲーション（メニュー）があると思います。それを実現する CSS です。

通常、<a href="URL">リンク文字</a>でリンクを作成すると、文字の部分だけしかクリックすることができません。
しかし、これをブロック要素に変換することでクリックできるエリア（クリッカブルエリア）を指定した高さ、幅まで拡大することができます。

ブログなどでよく見かける 2 カラムレイアウト（このブログのようなのです）の CSS です。
#mainContents と #subContents の width の合計は、#contents の width と同じになるように注意してください。

ブログなどでよく見かける 3 カラムレイアウトの CSS です。
#mainContents と #subContents01, #subContents02 の width の合計は、#container の width と同じになるように注意してください。

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒初心者向け

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/144

1 - さちこさんさん

web独学でかじり始めて一ヶ月。
CSSの参考書2冊読んでもできなかったことが、できるようになったし理解できました。おかげさまです。
ありがとうございます！

2009年6月20日 01:11

2 - えどさん

>>1 - さちこさん
コメントありがとうございます！
参考になったようでうれしいです(*'-')

最初はとにかく、なにがどうなってるの？
っていうことが多いですよね。

まずは実際にやってみる、というのが
理解する上で大事だと思うのでがんばってください(*'-')

2009年6月20日 08:19