41日目 最小限の見た目実装④（margin調整）
おはようございます。日曜日ですが、本日も少しだけ進めます。
昨日はRailsを用いてCSS部分の編集を行ないましたが、本日もCSS部分を編集します。
昨日までのおさらい
以下のような見た目を表示できるチャット用の画面を、RailsからHTML・CSSなどを用いて作成しようと思っています。
昨日は以下まで進めることができました。
ただ、テキストエリアと横線の上の部分を良く見るとアドレスバーとテキストエリア、縦線の間にスキマがあるので、そのスキマを消すことを今日はやろうかと思います。
現時点でのコード（昨日まで）
HTML
1 <div class = "real_chat">
2 <div id = "free_space">
3 <div id = "input_area">
4 <textarea name="comment"></textarea>
5 </div>
6 </div>
7
8 <div id = "history_space">
9 <div id = "output_area">
10 <table id = "result">
11 </table>
12 </div>
13 </div>
14 </div>CSS（SCSS）
1 // Place all the styles related to the chat controller here.
2 // They will automatically be included in application.css.
3 // You can use Sass (SCSS) here: http://sass-lang.com/
4
5 body{
6 height: 100vh;
7 }
8
9 .real_chat{ //「index.html.erb」のdivタグの"real_chat"というclassが、チャット画面全体を指す
10 display: flex; // 「自由スペース」と「履歴スペース」を横に並べる
11 height: 100%;
12 #free_space{ //「index.html.erb」のdivタグの"free_space"というidが、「自由スペース」を指す
13 width: 70%;
14 height: 100%;
15
16 #input_area{ //「index.html.erb」のdivタグの"input_area"というidが、インプット部分を指す
17 width: 50%;
18 margin-left: auto; // インプット部分を「自由スペース」の右寄せにする
19 //vertical-align:top; // デフォルトで「自由スペース」の上寄せになっているため、指定不要
20
21 textarea[name="comment"]{ //「index.html.erb」のtextareaタグの"comment"というnameが、入力テキストエリアを指す
22 width: 100%;
23 }
24 }
25 }
26
27 #history_space{ //「index.html.erb」のdivタグの"history_space"というidが、「履歴スペース」を指す
28 width: 30%;
29 height: 100%;
30 padding: 0 0 0 0;
31 border-left: double; // 「履歴スペース」には「自由スペース」との境界線がわかるように区切り（二重線）を付ける。
32
33 #output_area{ //「index.html.erb」のdivタグの"output_area"というidが、アウトプット部分を指す
34 width: 100%;
35 height: 100%;
36 }
37 }
38 }現象に関する原因の把握
先ほど、スキマが表示されてしまう原因ですが、この原因については、ブラウザの「デベロッパーツール」を利用します。
まず、Railsアプリケーションをローカルで起動した状態で、該当するチャットの画面を開きます。（画面の開き方は以下の記事の「試しにローカルで動かして見ると…？」という見出しをご参考ください。）
「デベロッパーツール」の開き方は以下の通りで、「Google Chrome」「Brave」「Microsoft Edge」ブラウザ（chroniumをベースにしたブラウザ）ならば同じように開くことができると思います。（以下の写真は「Google Chrome」の場合です。）
「デベロッパーツール」を開くことができたら、以下のように画面右側に「Elements」「Console」「Sources」「Network」などのタブが出現しますが、ここで「Elements」をクリックしておいて、現在表示されているWebページのHTMLが表示されるようにします。
「Elements」をクリックして表示されたHTMLの内容のスクリーンショットを撮って以下に貼りますね。なお、<head>以外の<body>以下の内容は全て展開済です。
上記のHTMLの中からどの行がスキマを作ってしまっているか、探します。探し方としては、HTMLのいずれかの行にマウスカーソルを持っていって重ねながら、表示画面の中でハイライト（青色かオレンジ色等）されている部分がスキマの部分であるかどうか確認します。
例えば、以下のように「<div class ="real_chat">」の行にマウスカーソルを重ねた場合、青色にハイライトされて表示されている部分がありますが、その部分にスキマは含まれていないため、スキマを作った原因はその行にないということを確認できます。
それで、どの行がスキマを作っているか探してみると、<body>の行を重ねたときに、スキマの部分がオレンジ色でハイライトされていることがわかりました。
どうやら<body>の部分のCSSの設定の中で、スキマを作った何かの要素があるようですので、CSSがどんな感じになっているか確認します。
ただ、状況によっては、CSSが隠されていて見えない場合があるので、以下の図のように①～③の操作を実施して、CSSが見られるようにします。（「デベロッパーツール」の「Styles」タブを選択した場合に表示される領域にCSSの設定内容があります。）
上記の①～③の操作を行ない、CSSが見られるように調整できたら、以下のように画面右側の表示内容が変わると思います。
上の図の中で、画面右下に、CSSの設定が複合された場合の総合的な設定内容が図で表示されていますが、試しに、その図の中の一番外側（marginと表示されている領域）のところにマウスカーソルを持っていき、重ねてみてください。以下のようにスキマ部分のみオレンジ色でハイライト表示されると思います。
（※「margin」とは対象の要素（divタグ等）の周囲の余白部分を設定できるところです。例えば、「margin」に「3px」と指定すると、要素の周囲に、「3px」の余白を作ることになります。）
「margin」のところにマウスカーソルを重ねるとスキマの部分がオレンジ色でハイライトされているということは、スキマを作っているのは「body」タグのCSSで設定されている「margin」が原因ということが考えられます。
改めて、画面右側下の「Styles」タブ選択にて表示されているCSSの設定内容を確認します。すると、自分自身で設定した「body」への内容だけではなく、「user agent stylesheet」という項目もあって、その項目にて「margin」に「8px」が設定されているようです。
「user agent stylesheet」とは何か調べてみましたが、どうやらブラウザごとにデフォルトで設定されるCSSへの内容のようです。（詳しくは以下の記事）
この「user agent stylesheet」のために、スキマを作っているようですので、その「user agent stylesheet」の設定を無効にしようと思います。
上記の記事によれば、「リセットCSS」というやり方がありますが、今回はデフォルトで設定されている「margin」への設定内容を単に上書きする、というやり方で実施します。
原因への対処
先ほど、CSS（SCSS）のコード内容を載せたと思いますが、その5～7行目に「body」タグへの設定内容があります。
5 body{
6 height: 100vh;
7 }そこで、上記から以下のように、「margin」への設定を上書きする行を追加します。（6行目の下に「margin: 0; //「user agent stylesheet」の設定をリセット」を挿入）
5 body{
6 height: 100vh;
7 margin: 0; //「user agent stylesheet」の設定をリセット
8 }その状態で、追加したSCSSファイルを保存して、アプリケーションを起動した状態（※HTML、SCSSファイルの変更程度であればアプリケーションの再起動は不要）で、再度、チャット用の画面を見てみます。
上の図を見ると、スキマがなくなっていることがわかるかと思いますが、もう少し、テキストエリアと縦線の区切り周辺を拡大してみてみます。
すると、スキマはなくなっているものの、今度はテキストエリアが縦線の区切りからはみ出しているのが気になるかと思います。
おわりに
ここまで読んでくださって、ありがとうございました。
次回もなんとか続けられればと思います。
次回もよろしくお願いいたします。
この記事が気に入ったらサポートをしてみませんか？