質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • CSS

    7728questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSについて

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 586
退会済みユーザー

退会済みユーザー

前提・実現したいこと

https://teratail.com/questions/38697にて
「style属性で修正するのはやめた方がいい」「インラインCSSを推奨はしません」とあります
なぜダメなのでしょう?
CSSファイル読み込みが推奨?
何かのセキュリティ?

cssファイルを作ることはあまりなく下記のような感じ

インラインCSS?

<style>
td.st0 { font-family:"Meiryo","メイリオ","MS ゴシック","MS Pゴシック","Osaka","Helvetica","Sans-serif";font-size:12px;text-align:center;border-top:1pt solid windowtext;border-right:1pt solid windowtext;border-left:1pt solid windowtext;border-color:black; }
td.st1 { font-family:"Meiryo","メイリオ","MS ゴシック","MS Pゴシック","Osaka","Helvetica","Sans-serif";font-size:12px;text-align:left;v-align:top;border-top:1pt solid windowtext;border-right:1pt solid windowtext;border-left:1pt solid windowtext;border-color:black;}
/*....ドバーっと100個位*/
/*EXCELファイルをセル毎にスタイルを全て抜き出してCLASSで指定している為、ものすごい量*/
</style>


テーブルとかでtdにstyle属性
style属性?

<td nowrap valign="top" class="st1" style="border-bottom:1px solid black;font-weight:bold;text-align:left;background-color:gainsboro;color:black;"">地震</td><td nowrap valign="top" class="st1" style="border-top:1px solid black;text-align:left;background-color:gainsboro;color:black;"">
/*インラインCSSだと枠が表示されなかったりするのでstyle=に追加*/


よろしくないのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+4

一概に絶対やっていけないとか、全く無駄とか、そういうわけではありません。ただ、style要素(いわゆるstyleタグ)に書かずに外部のCSSにしたり、style属性をつかわずにclass属性で管理した方が良い場合が多いと言うだけです。それぞれメリットが微妙に異なるため、わけて説明します。

style要素を使わずに外部CSSにした方が良い理由

もし、たった一つのページ(HTML)でしか使わず、それほど量も多くなければ、style要素で書いてもそれほどデメリットはありません。しかし、複数のページに同じ内容のstyle要素を書く場合や量が多い場合は、外部CSSにした方がメリットが産まれる場合があります。

  1. 転送量の削減
    追加のstyle要素部分がとても膨大で10kBほどになるとしましょう。もし、ページが10ページあれば、全部で100kBほどがstyle要素のためだけに使われます。さらに、ページを再読み込みする度に、各ページ10kBが付いてきます。再読み込みが必須な動的ページであれば、ページをキャッシュするわけにも生きませんので、アクセスする度に再読み込みが走ります。そう、毎回10kBが常に転送されます。色々アクセスして、20ページ分よみこまれるとすると、200kBにもなります。
    もし、その部分を外部CSSにしたとしましょう。HTTPヘッダ等のオーバーヘッドがありますが、数kBぐらいで多くて20kBで済むとしましょう。するとどうでしょう。他のページを読み込んだときも、同じページを再読み込みしたときも、外部CSSは再読み込みされません。つまり、最初の20kBで、その後は増えないのです。200kB必要だった転送量が10分の1の20kBにすみます。ページ数が多ければ多いほどこの効果は高くなり、転送量削減に繋がります。
  2. 変更するときは一カ所で済む
    さて、色々サイトを構築した後、やはり少し変えたくなったとします。ある部分を#FF0000だと原色の赤すぎるので#CC2222のダークっぽい赤にしたくなったとします。もし、それぞれのページでstyle要素を書いていた場合、全てのページを書き換える必要があります。これはとても大変です。もし、一つでも書き換え忘れがあったら、とてもダサいです。
    もし、外部CSSにしていれば、外部CSSを書き換えるだけで、全てのページへの変更が完了します。これはとても楽ですし、書き忘れも心配する必要があります。

style属性をつかわずにclass属性で名前をつけて別途スタイルを指定した方が良い理由

React.js何かを使って動的にDOMを作成する場合などは、style属性を使った方が良い場合があります。でも、ほとんどの場合は、class属性で名前をつけるなりした方が良いでしょう。

  1. 変更するときは一カ所で済む
    なんか、デジャヴを感じますが、似たような物です。強調した部分を赤にしようとstyle="color:#FF0000;"と書いていったとします。でも、また同じように#CC2222に変更したくなったとします。HTML内に散らばった全てのstyle属性を一つ一つ見ていって、書き換える必要があるでしょう。置換を使えばある程度楽ができますが、これが複数ページにまたがっていたら・・・もう、考えたくないですね。
    もし、強調したい部分はclass="kyocho"などとclass属性で名前をつけて、.kyocho {color: #FF0000;}と管理していたとします。この場合は、簡単です。管理している側一カ所変えるだけで済みます。これが外部CSSにあれば、それこそ本当にただ一カ所だけです。手間も時間もかかりませんし、書き忘れなんてミスはもうしなくてすいます。
  2. 転送量の削減
    style属性よりclass属性の方が短いですので、該当する所が多ければ、HTML全体のサイズが小さくなり、僅かばかり転送量の削減があります。ほんのわずかですが。

上ではあげなかったその他の理由として、文書構造とスタイルの分離という思想があります。とくにHTML5からは、HTMLは文書構造を記載する物であり、スタイルとは分離して考えるべきという方針を打ち出しています。その意味でも、style関係はなるべく分離しておくほうが推奨されています。

初めに言ったとおり、メリットがあまり有効でなければ、必ずやらなければならない物ではありません。特定のHTMLについてだけ必要な場合に少し足したり、JavaScritpで動的に作られる要素にstyle属性を追加していることは悪いことではないと思っています。ただ、上のメリット、とくに変更が一カ所で済むというメリットはかなり大きいですので、自動生成とかではない限りstyle要素やstyle属性を使うのは控えたほうが後々の変更が楽になる(つまりミスが少なくなる)でしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/24 01:12

    運用面が最大の問題ぽいですね
    自動化してしまっているので気付きませんでした
    転送量の削減というヒントは今後の課題にします
    回答ありがとうございました

    キャンセル

checkベストアンサー

+2

ダメというか、運用するにあたりおすすめしないという感じですね。

理由ですが、デザインの基礎的な法則に似たような性質もの見た目は揃えると、見た人が意味を理解しやすく、また、見た目的にも良い感じになるというようなのがあります。
CSSファイルを読み込むというやり方が、この法則を実現するのに一番手っ取り早い方法なのです。
ファイル自体にstyle要素を書くのや、各要素にstyle属性を書くとどんどんそれが面倒になります。

具体的な例をだすなら、

A) 5000行のHTMLが100000ファイルあるとします。各要素にどんどんstyle属性を書いて構築しました。ある日、根本的なミスに気づきます。書いていたスタイルの中の一つが間違ってていたのです。修正するために、該当するstyle属性をすべて書き直しました。
書き直す数 = 100000 x 1000(そのstyle属性を持つ要素の数の平均として)

B) 5000行のHTMLが100000ファイルあるとします。各ファイルにどんどんstyle要素を書いて構築しました。ある日、根本的なミスに気づきます。書いていたスタイルの中の一つが間違ってていたのです。修正するために、各ファイルのstyle要素を書き直しました。
書き直す数 = 100000

C) 5000行のHTMLが100000ファイルあるとします。CSSファイルにどんどん書いて構築しました。ある日、根本的なミスに気づきます。書いていたスタイルの中の一つが間違ってていたのです。修正するために、CSSファイルを書き直しました。
書き直す数 = 1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/24 00:58

    運用面での問題だけなのですね、安心しました
    HTMLコードは全てプログラムで自動生成してしまうので運用は大丈夫そうです
    セキュリティーとかCSSファイル読み込みが推奨!とか他の問題があるのかな?と心配していました
    回答ありがとうございました

    キャンセル

  • 2016/06/24 01:20

    「ダメというか、運用するにあたりおすすめしないという感じですね」がわかりやすかったです

    キャンセル

+2

cssファイルを分離する理由には一番大きな理由として、styleは「そのサイト全体の雰囲気を表現するもの」だからです。個々のページでその都度styleタグで書いたりタグに直接style属性で書くと、後から「あ、やっぱ送信ボタンはこの色にしよう」と思ったときに、「全てのページの送信ボタンを探しだしてstyle属性を書き換える」等の超めんどくさい作業が発生します。
しかし、cssファイルに分離し .submitButton {background-color:#ffffff;} と書いておいて、送信ボタン全てにclass="submitButton"を書いておけば、後からcssファイルを書き換えるだけでサイト上のすべての.submitButtonなボタンの色を変えることができます。
なんにせよ、個々のページで設定すると、作っているうちに微妙に間違った色指定になったり、ページ毎に若干雰囲気の違うものが出来上がりますが、HTMLでのクラス指定、cssファイルでの一括管理を行うことで「サイト全体の雰囲気を統一」「後から変更が容易」になります。
私はcssをファイル化、直接style属性を記述しないことの最大の利点は上記のことだと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/24 00:49

    なるほどー
    超メンドクサイ作業が発生する可能性があるので非推奨なだけで
    特に問題はなさそうなのですね、安心しました
    超メンドクサイ作業は全てVBAで変換してしまうので大丈夫そうです
    回答ありがとうございました

    キャンセル

同じタグがついた質問を見る

  • CSS

    7728questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。