Q&A
どのようなソフトで書いていますか？
cssファイルをHTMLファイルと同じ階層に保存したいです。
発生している問題
macを使っているのですが、外部ファイルにcssを書く際、HTMLファイルと同じ階層に保存する必要があると学びましたが、そもそものパソコンの使い方としてそのやり方が全くわからないので教えていただきたいです。
試したこと
もちろんググったのですが、内容が初歩的すぎるためか、私のサーチ能力が低いのか、何時間も理解できる記事が出てきませんでした。申し訳ありませんが教えていただけると嬉しいです。
>もちろんググった
適切なキーワードが投入できなければ欲しい情報にはたどり着けません。
大抵が「探し方が悪い」ので、どのようなキーワードで検索したかもきちんと具体的に記載してください。
参考に記事があればそれも。
いずれも質問本文を編集して追記してください。
あと、聞きたいのは「ファイルの作りかた」なのでしょうか。
HTMLファイル自体は作ったのでしょうか。状況が良く分からないので記載してください。
※ちなみに、「HTMLから参照できる階層（ブラウザで参照可能な場所）」に置く必要はありますが、「同じ階層に置かなければならない」わけではありません。ブラウザから参照できればどこにでも置けます。
maisumakun さん
sublimetext を使っています。
mts10806 さん
https://techacademy.jp/magazine/4890
こちらの記事で 「ここで注意点ですが、保存するときは、さきほどのHTMLファイルと同じ階層に保存するようにしましょう。」とあったのですが必要ないのでしょうか。
同じフォルダに複数のファイルを保存したいです。
必ずしも同じ階層である必要はありません。HTML側での指定によります。（絶対パスや相対パスなどで調べてみてください。）
また、エディターで開いているときはドラッグをしても移動されないかもしれません。一度エディターを閉じてみてはいかがでしょうか？
参考先を見ました。
＞同じ階層に保存するようにしましょう。
→ これは、参考記事（コード）記載の「パス位置」が同階層のため、このような表示になっていると思います。（「初心者向け」なので、コピペを想定していると思います。）
通常は「mts10806」さんのコメントのとおり、参照できればどこでも良いのです。それが外部に置く理由のひとつです。
質問本文を編集して追記してください。・・・
というか、テックアカデミーは今色々といわくつきだったりするので、記事内容の正誤はともかく今は控えた方がいいかも知れません。
https://teratail.com/questions/180985
回答2件
0
参考にすると良さそうな記事をあげておきます。
すごーーーく要約すると
0. .cssでファイルを作成してhtmlファイルから参照できる場所に保存
0. そのファイルの中にCSSを記述する
（あくまでテキストファイルなのでここまで作り方・保存の仕方はHTMLとかと同じです）
0. 置いた場所に向けて読み込ませたいHTMLファイルにlinkタグでリンクする
0. ブラウザからHTMLファイルを参照、実行
例えば下記のような階層になっているなら
├index.html ├style.css
index.htmlには下記のように書きますし
html
1<link rel="stylesheet" type="text/css" href="./style.css"/>
下記のような階層になっているなら
├ index.html ├ css ─ style.css
index.htmlには下記のように書きます
html
1<link rel="stylesheet" type="text/css" href="./css/style.css"/>
コメントで書きましたようにhtmlもCSSも「ブラウザから直URLで実行して内容確認できる場所」であればどこに置いても良いです。
もちろん、ファイル管理の観点からきちんと分かりやすいようにするのは必要ですが、基本は「ブラウザから直URLで実行して確認できる場所」です。
※なのでインターネット上にあるCSSファイルとかを直リンクで読み込むことも可能。他人のものの場合、CDN以外やっちゃダメですが。
で、表題である「HTMLファイルと同じ階層に保存する方法」に答えると
**htmlと同じように保存してください。**以上。 です。
これだけで解決しないのでしたら、現在の「できない」状態を画面キャプチャでいただいた方がいいかもしれません。
投稿2019/03/26 06:06
編集2019/03/26 06:08総合スコア80850
質問者さんの
＞そもそものパソコンの使い方としてそのやり方が全くわからない･･･
このことから、プログラミング・コーディング初心者と言うより、PC初心者であれば、「階層」と言う言葉自体が明確になっていない可能性がありますね。
※※※
「テックアカデミー」の件、知らなかったです。
このようなことがあったとは･･･勉強になります。
「teratail」タグをmyタグに追加しました。
(^^;)
0
認識が違ったらすみません。
HTMLファイルと同じ階層保存する
って同じフォルダ（例えばhtmlファイルをサンプルってフォルダに入れてる場合はサンプル）の中に保存したいって事なのではないかと。
投稿2019/03/26 04:57
総合スコア445
ありがとうございます。そうです。同じフォルダに保存したいのですが、ドラッグしてもフォルダに入らず苦戦しています。
原因はいまいち分かりませんが、ドラッグで駄目なら作ってるソフトから「別名保存」かファイルのコピペでも駄目ですか？
因みにですが、mts10806さんも仰ってますが、同じ階層は絶対ではないですよ。
横からすみません。
これは Finder の話ではなくて、質問者が使っているエディタ sublimetext はサイドペインにディレクトリ表示があるので、そこで表示されているファイルをドラックをして「移動できない」と言っているのではないかと拝察。
＞Lhankor_Mhyさん
なるほど。
コメントのやり取りを見落としてました。
質問者を含め大変失礼致しました。
あなたの回答
tips
プレビュー
