Facebook Twitter Google Maps RSS
Home 未分類 cssってなーに??
formats

cssってなーに??

こんにちは!

駆け出しプログラマー安東です。
第3回目のブログを書かせて頂きます。

前回はフレームワークについて書かせて頂いたのですが、
最近、機能の実装が大方終わりまして、
HTMLコーディングを行っております。
で、今回はCSSについて書かせて頂こうと思います。

CSS(Cascading Style Sheets)とはHTMLやXMLに代表されるWeb文章の表示やレイアウト、l
デザインなどを定義するための概念です。
他にもスタイルシート技術はXSLやDSSSLなどが存在するようです。

そんなCSSには以下のようなメリットがあります。

1.文章構造を保ったももスタイルを指定できる。
HTMLだけで文章のスタイルを制御しようとすると、
文章内容や意味にそぐわないHTMLタグを使用することがあり、
文章構造がわからなくなるという問題が起こります。
上記問題をCSSを用いることで解決できるのです。

2.メンテナンス性向上
通常はCSSをHTMLに直接記述することはなく、
他のファイルに記述して管理します。
それにより、複数の文章でスタイルを共有できるため、
メンテナンス性が向上するのです。

3.SEO効果
HTMLによる見栄えの制御をやめて情報を適切にマークアップすることで、
検索エンジンに正しく解釈されるウェブページとなります。
また、CSSでスタイル指定することで、文書から余分なマークアップを排除して、
スタイルに関する記述を一箇所にまとめてウェブページを軽量化することができます。
これらの改善により、多くの場合SEO効果やアクセシビリティ向上が期待できます。
上記3つのメリットの中でも
3番目【SEO効果】を最近先輩社員に教えて頂きました。
CSSを使うことで、SEO効果があることに驚きました。

このようなメリットがあるCSSなのですが、
私の中でとてもホットな話題なのが「overflow」です。

画像付きブログなど、
画像の横にテキストを記述したいことがあると思います。

このような時、overflowプロパティを使用することで、
このような事態を防止できるのです。

わかりやすいように
簡単なHTMLを作成してみました!

下記のようなHTMLがあったとき、

/********test.html********/

<head>
<link rel=”stylesheet” href=”./test.css” type=”text/css”>
</head>
<body>
<div>
<img src=”./test.jpg”>
<p>
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
testtesttesttesttesttesttesttest
</p>
</div>
</body>

/********test.css********/
img {
float: left;
width: 100px;
height: 100px;
}
p {
overflow: hidden;
}

div {
width: 250px;
}

このHTML文で

タグにoverflowを指定しなかった場合
左側の画像になります。

タグにoverflowを指定してあげることで
右側の画像になります。

画像の横にテキストを配置することができました!

このようなCSSのテクニックと呼べるものが
とても多くあるので、
コツコツ覚えていこうと思います。

今回はこの辺で失礼させて頂きます。
ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*