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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

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

Q&A

解決済

3回答

1830閲覧

CSSについて

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2016/06/23 13:49

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

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

インラインCSS?

CSS

1<style> 2td.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; } 3td.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;} 4/*....ドバーっと100個位*/ 5/*EXCELファイルをセル毎にスタイルを全て抜き出してCLASSで指定している為、ものすごい量*/ 6</style>

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

CSS

1<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;""> 2/*インラインCSSだと枠が表示されなかったりするのでstyle=に追加*/

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

一概に絶対やっていけないとか、全く無駄とか、そういうわけではありません。ただ、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/23 15:35

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/23 16:12

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

0

ベストアンサー

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

理由ですが、デザインの基礎的な法則に似たような性質もの見た目は揃えると、見た人が意味を理解しやすく、また、見た目的にも良い感じになるというようなのがあります。
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/23 15:24

oskbt

総合スコア1895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/23 15:58

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

退会済みユーザー

2016/06/23 16:20

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

0

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

投稿2016/06/23 15:20

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/23 15:49

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問