CSSの基礎の基礎!間違いだらけの記述を徹底修正!

正しいCSSが読みやすいウェブページを作る!

国際機関によってCSSが勧告されてから年月が経ったこともあり、かつての「テーブルレイアウト」に見られたようなHTMLの誤用は減少しました。ただ、現在でもCSSを誤って記述したり、そのベースとなるHTMLが必要以上に複雑である例は多く見受けられます。CSSとHTMLを正しく記述すれば、メンテナンスしやすいだけでなく、読者が読みやすいウェブページを作ることにつながります。
まずは、HTMLの各要素の役割を調べて、記述を見直してください。たとえば、p要素はparagraph、つまり段落を表すもので、改行を目的とするものではありません。また、細部のデザインのためにclassとidを増やしすぎると構造が複雑になりますから、カラムのdiv要素ごとにidを付けて、そのidの子要素に対してCSSを記述する方法がスマートです。

中級者も注意!CSSで陥りがちな初歩的ミス

HTMLの構造を見直したら、次にCSSの修正を行いましょう。見栄えが良いデザインにするのはもちろんですが、初心者はもちろん、中級者以上の方でも陥りがちな記述上のミスがありますので、注意してください。
たとえば、プロパティのスペルを間違えたり、各プロパティの終わりにセミコロンを付けない、などの間違いが挙げられます。そのほか、font-familyは値をコロンで区切る必要がありますが、marginで4方向を一括指定する際はコロンが不要など、プロパティごとに書式が異なりますから、その都度の確認が大切です。
また、同じ要素に対する同じプロパティが複数記述されている場合は、CSSファイルの下部にあるものが優先的に適用されます。一方、親要素が指定された要素のプロパティを意図的に上書きする場合は、その要素単独のプロパティが無効になるため、下部に改めて親要素と対象の要素を記述し直すことが必要です。

フリーランスになるうえで、必要な実績。ホームページ作成の実績があれば、ポートフォリオ替わりになります。

PickUpオススメ