[解決済み】インラインCSSの何がそんなに悪いのか?
質問
ウェブサイトのスターターコードやサンプルを見ると、CSSはいつも別のファイルに入っていて、"main.css", "default.css", "Site.css" などの名前がつけられています。しかし、ページをコーディングしていると、画像に "float: right" を設定するなど、DOM要素にインラインでCSSを投げ込みたくなることがよくあるのです。これは、例ではほとんど行われていないので、悪いコーディングだと感じています。
複数のオブジェクトに適用されるスタイルであれば、"Don't Repeat Yourself" (DRY) に従って、各要素から参照されるCSSクラスに割り当てるのが賢明だということは理解しています。しかし、別の要素でCSSを繰り返すことがないのであれば、HTMLを書くときにCSSをインライン化するのはどうでしょうか。
という疑問があります。インラインCSSを使用することは、たとえその要素にしか使用されないとしても、悪いこととみなされるのでしょうか?もしそうなら、なぜですか?
例(これって悪いこと?)
<img src="myimage.gif" style="float:right" />
解決方法は?
サイトの見た目を変えたいとき、100行のコードを変更しなければならないこと。 あなたの例には当てはまらないかもしれませんが、もしインラインCSSを以下のようなことに使っているのであれば、そのようなことはありません。
<div style ="font-size:larger; text-align:center; font-weight:bold">
を各ページのヘッダを示すために使用すると、メンテナンスが非常に簡単になります。
<div class="pageheader">
ページヘッダーが単一のスタイルシートで定義されている場合、サイト全体でページヘッダーの見え方を変更したい場合、一箇所でCSSを変更することになります。
しかし、異端児の私が言うのもなんですが、あなたの例では何の問題もないと思います。1枚の画像の動作をターゲットにしており、おそらく1つのページで正しく見える必要があるため、実際のCSSをスタイルシートに置くことはおそらく過剰なことでしょう。
関連
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】波動効果を生み出すCSSのアイデア
-
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する(コツ)
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[解決済み] Positioning <div> element at center of screen
-
[解決済み] Twitter Bootstrap - 行と行の間に上部のスペースを追加する
-
[解決済み] HTMLでリンクから下線を消すには?