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

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

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

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

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

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

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

▼EntryMore▼

コピペメニュー

コンテンツのセンタリング

CSS

HTML

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

CSS

HTML

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

CSS

HTML

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

2 カラムレイアウト

CSS

HTML

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

3 カラムレイアウト

CSS

HTML

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

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

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

  • このエントリーをはてなブックマークに追加

トラックバックURL

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

コメント

1 - さちこさん さん

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

2009年6月20日 01:11

2 - えど Author Profile Pageさん

>>1 - さちこさんnコメントありがとうございます!n参考になったようでうれしいです(*'-')最初はとにかく、なにがどうなってるの?nっていうことが多いですよね。nまずは実際にやってみる、というのがn理解する上で大事だと思うのでがんばってください(*'-')

2009年6月20日 08:19