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

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

ただいまの
回答率

90.62%

  • CSS

    5597questions

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

cssをどこに記述すればよいか

受付中

回答 3

投稿

  • 評価
  • クリップ 4
  • VIEW 640

coffee

score 144

cssについて質問です。

あるページで、特定のdiv要素にマージンを付けたいなと思ってます。
そこだけ margin-top: 10px のようにしたいですが、汎用性のあるようなデザインでもないので、
クラスをつけてcssファイルに記述とかはせずに、<div style="margin-top: 10px">とかでやっちゃおうかと思っております。

それかいっそのこと、 <br /><br /><br /><div> のようにしてしまおうかとも思ってます。

このように、style属性にCSSを記述したり、改行でマージンを再現するような手法は、
かなり無理矢理感が出ていますが、一番良い解決策を教えて頂けますでしょうか。


また、style属性にデザインを書くデメリットも教えてください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+1

複数のファイルに分けて書くと、視線が遠くに飛んだり、別ファイルを
改めて開かなくてはいけなかったりして、思考の流れがストップしたり、集中が途切れてしまったりしますよね。
ですから、cssファイルとhtmlファイルを行ったり来たりしながら開発することは、
必ずしもベストとは言えないと思います。
  1.  なので、htmlはhtml。cssはcssで集中するように全く別の開発フェーズにしてしまうか、
  2.  最初はstyle属性に全部書いちゃって、class属性を設定したくなったタイミングで全部 cssファイルにお引越しさせるか。

という選択肢もアリだと思います。
アウトプットの早さが命の モックアップやテストでは、cssファイルに必ずしも分けなくていいですし、
その代わり、「class属性を設定した方がいいことが判明したら cssファイルに全部 お引っ越しさせる」
というようなルールを決めて開発していけば、それほどむちゃくちゃなことにはならないと思いますよ。

もちろん、デザイナ班との分業ができているときや、版の管理がいるようなきちんとした
プロダクトを作るプロジェクトにいるときは、ちゃんと CSSファイルを分離しておかなくては
いけませんが。(おそらく明文化された開発規則になっているでしょう。)

#style属性に書き出したあと、いろんなところに コピペしだしたら危険ですね。それは早々に
#class属性にして cssファイルに引越させるべきです。(いきなり管理が大変になります)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

私個人の意見ですが、たとえ汎用性がなくともスタイルはCSSに書いたほうがいいと思います。
理由としては、HTMLの可読性の向上とスクリプトで操作するときの容易さです。
一人でそのHTMLファイルを触るのであればあまり気にしなくていいかもしれないですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/05/11 13:02

    横から失礼します。
    「スクリプトで操作するときの容易さ」とは、具体的にどういったことを指しているのでしょうか?

    キャンセル

  • 2015/05/11 13:30

    あまりない状況かもしれませんが、エレメントを削除して新しいエレメントを挿入、ってした場合、
    削除したエレメントにスタイル直書きだと新しいエレメントにもスタイル適応しなくちゃいけなかったりですとか。
    CSSに書いていればクラス指定するだけで済みますし。

    キャンセル

  • 2015/05/11 13:33

    なるほど。理解しました。
    返信ありがとうございます。

    キャンセル

0

私見ですが、htmlにstyleを記載しないほうがいいと思います。
理由は、同様の箇所が今後出てきた際にさまざまなところでstyleを記述していくと、指定が散在してしまって収集がつかなくなるからです。

使い回しの効くstyleをcssに登録しておいてclassを複数突っ込むほうが取り回しし易いと思います。
例)
.mt10{margin-top:10px;}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    borderの幅にテキストを配置するには?

    こちらで初めて質問させていただきますMAYAKOと申します。 私は現在、日々ウェブページ作成の勉強をしております。 本日はborderについて、2点質問をさせていただきます。 1点

  • 解決済

    ある要素の上で、幅いっぱいまで広げるCSS

    現在、ハイブリッドアプリ開発をしており、 CSSでご相談したいことがあります。 以下のようなHTMLがあるとします。 ※かなり簡略化しています。 HTMLとしては以下のような感

  • 解決済

    wordpress テーマstinger5のナビゲーションをカスタマイズしたい。

    wordpressテーマstinger5を使ってサイト構築中です。 ヘッダーのナビゲーションをカスタマイズしたいのですが、うまくいきません。                  

  • 解決済

    html スペースを取りたいとき

    htmlで上の記述と距離を取りたいときはどのような手法がベストでしょうか </table> </div> →ここでなく →ここでなく →このへんの位置感に文字を入れたい 今ま

  • 解決済

    この記述でのマージンの取り方を教えてください

    PHPの領域で以下の様に記述しましたが、送信のsubmitボタンと戻るのbuttonボタンとの間にマージンを取りたいのですが、CSSで試みても何をしてもマージンが取れないので教えて

  • 解決済

    html、文字サイズを改行せずに変更、センタリング

    すごく初歩的かもしれませんが質問させていただきます。 ページ内で価格を表記する際に、(税込)の部分のみフォントのサイズを小さくしたいです。 WordPressで扱っているので、CS

  • 解決済

    【html】h1を下げるには? 助けてください

    このように、ロゴを売るという文字が右にずれてしまっています。 「ロゴを売る」を下げるにはどうすればいいでしょうか。 <div class="contents">        <

  • 解決済

    marginが親に影響してしまいます。

    こんばんは。 div(赤)の真ん中にp(青)を入れて、丁度縦方向の中心になるようにしたいのですが、     <div style="height:200px; backgroun

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

  • CSS

    5597questions

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