CSS ビギナー向け

display:inlineで横並びにした際に出来る余白を消す方法

display:inlineで横並びにした際に出来る余白を消す方法

li要素をdisplay:inlineを使って横並びにさせる事ってけっこう使うと思うですが、この時にソース上で改行していたり、スペースを開けているとちょっとした余白が出来ると思います。

その余白を消す方法を THE HAM MEDIAさんの「リストを横並びにした時の空白をなくす方法」でいくつか紹介されていた中でほぼ全てのブラウザで対応が出来る方法のみを紹介したいと思います。

CSS borderプロパティについてのまとめ

CSS borderプロパティについてのまとめ

CSSで枠線を指定する場合にこのborderプロパティを使うわけなんですが、指定の記述方法はいろいろあるわけなんですよ...。

自分は「border」で一括指定か。「border-top」「border-right」「border-bottom」「border-left」の上下左右個別に一括指定する方法しか使いませんので、今回はこの方法で説明したいと思います。
(これが一番記述が短くて済みますし楽だと思いますよ)

CSS backgroundプロパティについてのまとめ

CSS backgroundプロパティについてのまとめ

今回はCSSでもけっこう使う頻度の高いbackgroundプロパティについて書いていきたいと思います。

CSSをまだ勉強中の人とかとくに「background-color」「background-image」「background-repeat」は使えると思うですけど、や「background-position」を案外使いこなしていなかったり、「background-attachment」については知らないって人ってけっこういるような気がします。「background-attachment」は実際にほとんど使わないですけどね;

まぁーそんな感じでbackgroundプロパティの解説に移りますねぇ~

CSSでのブラウザー事のフォントサイズや表示の統一について

CSSでのブラウザー事のフォントサイズや表示の統一について

今回は基礎中の基礎の事なんですが、CSSを勉強し始めるていざサイトを作っている時にブラウザー事にフォントサイズが違ったり、marginの具合が違った現象を経験した事ってありませんか?

ブラウザー事の表示の違いのうんぬんがまったく分かっていないと相当困っちゃいますよね><

なので今回はブラウザー事に表示が違うフォントサイズやmarginやpaddingを統一する為の記述を解説していきたいと思います。

IEでfloatさせたボックスのmarginが倍くらいになる対処方法

CSSレイアウト初心者が一度は経験するであろう。このIE6でfloatさせたボックスのmarginの解釈の違いだと思います。

よくIEだけが右カラムが落ちてる...っての聞きますが、殆どの場合がpaddingで指定すれば解決出来る問題なんですよね。

それでは具体的な対処方法を解説していきたいと思います。

CSSで中央配置(センターリング)する方法

CSSで中央配置(センターリング)する方法

CSSで中央配置の仕方をちゃんと理解していない人って案外いるみたいなので、詳しく解説しようかなーって思います。

div要素のようなブロックレベル要素をセンタリングするには「text-align」は使いません。「text-align」プロパティはインライン要素の位置揃えを指定するためのものですよ。

CSSレイアウト 実践講座最終回 main要素

CL company

今回で実践講座最終回です。

記事を見返してみれば、説明不足の所もあったような...
もし気になった所があった時はコメントでも下さい。

最終回main要素と指定しているコンテンツ部分です。

CSSレイアウト 実践講座5 sub、footer要素

CL company

前回のエントリーでheader、globalNaviの中身の要素を作ったので、今回はsub、footer要素の指定をしていきたいと思います。

今回もcontents.cssに記述していきましょう。

CSSレイアウト 実践講座4 header、globalNavi要素

CL company

前回のエントリーで全体のレイアウト作りを行ったので、今回から細かい内面的のレイアウト作りをやっていきたいと思います。

今回からはサンプルに入っているcontents.cssに記述していきましょう。

CSSレイアウト 実践講座3 全体のレイアウト作り

CL company

前回のエントリーでデフォルト設定とベースの設定を行ったので、今回は全体のレイアウト作りをやっていきたいと思います。

今回はサンプルに入っているlayout.cssに記述していきましょう。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年