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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

894閲覧

bootstrapの考え方について

Kousukeh10969

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/04/08 11:11

現在、bootstrapを学んでいて、その中で気になったことがあります。bootstrapはhtmlファイル内のclassの値として入れることでcssファイルに書くより簡単にデザインできることはわかりました。

そこで、写真のように簡単なbootstrapをつかってページを作ったのですが、そのページを見ると作った覚えのないファイル(写真では_alert.scss:2)のcssによって記述されています。

イメージ説明

これは、bootstrapを利用すると、自動的にscssファイルが作成されるという認識でよろしいでしょうか?
よろしくお願いします。

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

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

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

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

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

m.ts10806

2019/04/08 12:06

そもそも「scssが何か」というところは調べてみました?
Kousukeh10969

2019/04/08 13:14

自分の中の気になったところがそこではなかった為、調べていませんでした、、
guest

回答1

0

ベストアンサー

Bootstrap自体はSCSSを基にして作られています。

twbs/bootstrap

上記はBootstrapのレポジトリです。そのまま使用する場合はdist/cssにあるCSSを使いますが、これらはsccsにある各SCSSファイルから生成されています(SCSSについての知識があれば、自分で再生成することも可能です)。このとき、CSSの他にMAPファイルというものが作られます。これらはCSSファイルと1対1で対応しており、"bootstrap.min.css"のMAPファイルであれば"bootstrap.min.css.map"というようにです。このMAPファイルは何かというと、CSSファイルのある部分が元になったSCSSのどの部分に該当するかという情報が載っています。Google Chromeと言ったモダンなブラウザはこのMAPファイルが存在する場合、デベロッパーツールの画面では、CSSではなく元になったSCSSの場所を示してくれると言うことです。SCSSが自動的に作られるわけではありません。

もし、"bootstrap.min.css.map"がなく"bootstrap.min.css"だけであれば、ブラウザはそのままCSSでのファイルの位置を示してくれるでしょう。しかし、完成されたCSSは圧縮されており、また、複雑です。CSS自体をカスタマイズすることはあまり効率が良くなく、SCSSでカスタマイズした方がはるかに楽です。どのSCSSのどこを見てカスタマイズすると良いのかという情報は、CSSだけを見てもわかりません。しかし、MAPファイルがあれば、どのSCSSのどの部分にあたるかがわかるため、カスタマイズも容易になると言うことです。

投稿2019/04/08 12:07

raccy

総合スコア21733

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

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

Kousukeh10969

2019/04/08 13:17

cssファイル、mapファイル、scssファイルの関係性についてはよく分かりました!ありがとうございます!!! ただレポジトリというのは何なのでしょうか、、。調べると要するに何かの保管場所とのことなのですが、いまいちイメージがつかないので教えていただきたいです!
raccy

2019/04/08 13:45

レポジトリとは、端的言えばソフトウェア等(通常のアプリケーションのみならず、BootstrapのようなCSSフレームワークなども含む)のソースファイルなどを保管・管理する場所です。リンク先のGitHubは、Gitというバージョン管理システムを使ってソースファイルを管理できるレポジトリを提供しているサービスです。Bootstrapを含む多くのオープンソースのソフトウェアがGitHubを利用しています。
Kousukeh10969

2019/04/09 02:17

なるほど!githubというのは聴いたことがあったのですが、あまり詳しく知ろうとしてなかったです! githubの有用性についても学びます。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問