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

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

ただいまの
回答率

90.84%

  • CSS

    5146questions

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

  • HTML5

    3604questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

cssはどこに?書くんですか

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 237

yuki8844

score 1

cssはどこに書くのですか?
HTMLを書いた同じページにですか?
それとも違う新たなページですか?

初歩過ぎてすみません。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kszk311

    2018/05/24 23:23

    解決されたのであれば、自己解決またはベストアンサーを選び、解決済みとしておいてもらえますか。

    キャンセル

  • yuki8844

    2018/05/31 15:39

    すいません申し訳ないです…

    キャンセル

回答 4

+4

基本的なパターンは3パターンだと思います。

パターン1(bodyに書く)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<style>
  .content {
    background-color: #ccc;
  }
</style>
</head>
<body>

<div class="content">
  コンテンツ
</div>

</body>
</html>

パターン2(タグに書く)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>

<div class="content" style="background-color: #ccc;">
  コンテンツ
</div>

</body>
</html>

パターン3(外部にcssファイルを置く)

// フォルダ構成
- index.html
|- css - style.css
|- js  - app.js
|- img -  01.png
       |- 02.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>

<div class="content">
  コンテンツ
</div>

<script src="./js/app.js"></script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/24 21:33

    ご丁寧にありがとうございます。
    まだまだわからない事だらけなので
    勉強します。

    キャンセル

+3

どっちでも行けますよー

別ファイルにcssをかいたなら
htmlファイルで読み込みが必要です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/24 21:36

    どちらでも可能なのですね
    まだ始めたばかりなのでわからない事だらけですが
    ぼちぼち勉強します。
    ありがとうございます。

    キャンセル

checkベストアンサー

+2

その疑問がなぜ発生したのかを書くともっと的確な回答が得られるとは思いますが。

実践〜スタイルを作ってみよう〜

2.CSSはどこに書くの?

「どこに書く?」という質問からは少し外れますが、
回答にあまり出てないパターンで「CDN」いうのもあります。
ライブラリなどサイズが大きいものについては自前に置くより外部サービスを利用するのも1つの手です。
CDN例:CDNにホストされているjQueryファイルの読み込み

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/24 21:32

    ありがとうございます。
    わからないコトだらけなので勉強します。

    キャンセル

  • 2018/05/25 05:09

    始めは誰もが初心者でわからないことだらけです。
    試行錯誤で、できることできないことを覚えていきます。
    まずは手を動かして覚えていきましょう。

    キャンセル

  • 2018/05/31 15:38

    ありがとうございます!
    遅くなりすいません。

    キャンセル

+2

(i)外部ファイルで指定する方法

<link rel="stylesheet" type="text/css" href="example.css">

をhtmlファイルに書きます。
今回はcssファイルの名前がexample.cssです。

(ii)html内でcssを書く方法

<style type="text/css">
  //CSSの記述
</style>


このように書きます。(i)のように二つのファイルに分けてHTMLとCSSを適用する方法が一般的ですが、どちらの方法も使いこなせるようにしておくと、記述の幅が広がります。

詳しくはHTML cssを適用するをご覧ください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/23 22:09

    ちなみにjavascriptも同じことが言えます。

    キャンセル

  • 2018/05/24 21:36

    分けるのが一般的なんですね
    知りませんでした。
    まだまだ勉強不足なので勉強します。ありがとうございます。

    キャンセル

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

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

関連した質問

  • 解決済

    Bootstrap3.1.1で特定のページだけサイト幅を変更

    Bootstrapでサイトを作っているのですが 480px 768px 992px のサイト幅を使用しております。 ここで質問なのですが、特定のページだけ、 480px 768p

  • 解決済

    headタグ内へのCSSの書き方

    <head> <style> リセットCSS </style> <style> レイアウト用のCSS </style> </head>こういう書き方はできますか?

  • 解決済

    WordPress 固定ページごとにCSSを読み込ませる方法

    掲題通りなのですが、固定ページごとにCSSを読み込ませたいのですが分かりません。 調べてはいるのですが解決できず質問させていただきました。 分かる方ご教授いただけたら幸いで

  • 解決済

    サイトページのデザインのコピー

    wordpressで作成したこのコンテンツページを Aサイト このページにコピーしたいと思います。 Bサイト ただ、そのままコピペしてもダメでCSSも書き加えないとダメ

  • 解決済

    PHPでのWEB画面の作成について

    PHPでWEB画面を作成しています。 現在下の画面のようになっています。 上の画面のようにするには、どのようなCSSを書けば いいでしょうか? また、上はプログラムからの相

  • 受付中

    固定ページへのリンクの表示を変える方法

    写真のように固定ページに固定ページへのリンクを貼ったのですが、普通すぎるのでこれを色付けしたり、ここをクリックとこ注釈を入れたりしたいのですがwordpressどこをいじればいいの

  • 解決済

    sass(及びCSS)でサイドバーの幅をページ毎に変える方法

    表題のようにページ毎にサイドバーの幅を変えるにあたり、デザイナーの方はどのようなアプローチをされているかが知りたいです。CSS初心者ですが、SASSでのコーディングを予定しているた

  • 解決済

    CSS適用したときにブラウザが重くなる

    ボックス全体をリンクにしたのですが、ボックスの中にある文字とその左右しかクリックが反応しないことがわかりました。 つまりボックスの中の文字をクリックすれば正常に動作します。

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

  • CSS

    5146questions

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

  • HTML5

    3604questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。