プログラミング備忘録【Ruby on Rails】

初学者として日々学んだことや発見をいつでも引き出せるようブログにまとめてみた。初学者のため間違った説明があった場合、コメントいただけると嬉しいです。

HTMLとCSSの細かな内容

基本設定

フォントサイズ

font-sizeのデフォルト値は、ブラウザのデフォルトフォントサイズの16pxです。 この16pxを基準に、パーセンテージで指定しています。 今回は62.5%なので、

16 * 62.5 * (1 / 100) = 10

となり、今回は10pxと指定しているのと同義です。

html {
  font-size: 10px;
}

としても良いですが、文字サイズについては pxは使わないほうが無難 です。 今後「PC」「タブレット」「スマホ」など、様々な端末に最適化して表示する為の設定をする際、絶対指定であるpxだと自在に文字サイズを変更できず不便である為です。

そして、html要素の子要素以下の文字サイズについては今回は、remという単位を使います。remというのは、html要素のfont-sizeを1 として、比率でサイズを指定するものです。

html要素のfont-sizeが10pxだった場合:1remは10px、12pxは1.2rem

html要素のfont-sizeが16pxだった場合:1remは16px、12pxは0.75rem

先程学んだ通り、html要素に対して基準となるfont-sizeの値を62.5%(10px)に指定しました。 例からもわかる通り、基準となるfont-sizeの値は62.5%(10px)とすると使い勝手が良いです。計算が直感的に行えるためです。

font-sizeの指定方法には、rem以外にもいくつかあります。 それぞれの特徴をおさえて、今回remを使用するメリットについて理解しましょう。

[font-sizeに使用できる各単位]

単位 指定方法 基準 基準が16pxの時の単位変換
rem 相対指定 html要素のfont-size 1rem = 16px
em 相対指定 親要素のfont-size 1em = 16px
% 相対指定 親要素のfont-size 100% = 16px
px 絶対指定 なし 16px = 16px

emと%は、要素が入れ子になっている場合、親要素のフォントサイズを参照します。その為、入れ子構造が深くなればなるほど、emや%でfont-sizeを指定していると、調整が難しくなってしまいます。

remは参照する場所がルート(html)なので、親要素を気にせずフォントサイズを指定することができます。

よってブラウザ側が対応している限り、可変的な要素を指定する場合は remを使用するのが便利 です。

HTML

imgにリンクを貼る

<a href="index.html">
    <img src="./images/logo.png" class="logo_image">
</a>

CSS

clearfix

・一般的に再利用性を考え、clear: bothにする

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

要素の中央配置とvertical-alignの注意点

vertical-alignが効かないパターンと、効くパターン | HPcode

・vertical-alignの前提として、ボックスの中での上下中央を指定するためのプロパティではないということを理解しておく必要があります。

要素の中央配置

1. tableの中央配置

[html]

<table class="table">
  <tr>
    <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto cum dignissimos totam. </td>
    <td>Lorem ipsum dolor</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat</td>
    <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat id aspernatu</td>
  </tr>
</table>

[css]

.table {
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-collapse: collapse;
}

.table th,
.table td{
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding: 12px;
  vertical-align: middle;
}

f:id:keikamiguchi:20200711130018p:plain 2. desplay: inline-blockと併用して隣あっている要素同士の高さを揃える(ここでは内部要素を中央揃えにしている)

[html]

<div class="items">
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur fuga voluptatibus dignissimos error eius ullam voluptate ut! Debitis totam rem, dolorum ab quaerat fuga tempora.</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur fuga voluptatibus dignissimos error eius ullam voluptate</div>
</div>

[css]

.item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  display: inline-block;
  margin: 16px 0;
  padding: 8px;
  width: 30%;
  vertical-align: middle;
}

f:id:keikamiguchi:20200711125800p:plain

3. 画像の上下どちらかにある謎の隙間を消したい場合

img {
  vertical-align: top;
}

*あるいはbottomのどちらか

4. 要素の中央配置(基本的にはdesplay: flexを使用)

[html]

<div class="box-wrapper">
  <div class="box">
     <p>ダミーテキスト</p>
  </div>
</div>

[css]

.box-wrapper{
  display: table;
  height: 200px;
}
.box{
  display: table-cell;
  vertical-align: middle;
}

*なお、positionにabsoluteやfixedを指定している要素には効かないので注意

応用

バナー広告の貼り方

[html]

<div class="banner_content">
  <p>
    <a href="#"><img src=""></a>
  </p>
  <p>
    <a href="#"><img src=""></a>
  </p>
</div>

[css]

・ここではバナー広告を横並びにする場合のcssの例を記載

.banner_content {
  display: table;
}
.banner_content p {
  display: table-cell;
}

tableの無駄な隙間を無くす

・以下のようにtableのデフォルトの状態では、以下のような無駄な余白があります。 f:id:keikamiguchi:20200711144755p:plain [html]

        <table class="company">
          <tr>
            <th>商号</th>
            <td>株式会社サンプル</td>
          </tr>
          <tr>
            <th>所在地</th>
            <td>〒111-1111 東京都渋谷区</td>
          </tr>
          <tr>
            <th>設立年月日</th>
            <td>2015年1月1日</td>
          </tr>
          <tr>
            <th>資本金</th>
            <td>200万円</td>
          </tr>
          <tr>
            <th>従業員</th>
            <td>10名</td>
          </tr>
        </table>

[css]

.company{
  border-collapse: collapse;
}
.company tr{
  height: 5rem;
}
.company th{
  width: 100px;
  background-color: #B1B1B1;
  color: #fff;
  border-bottom: solid 1px #fff;
}
.company td{
  width: 560px;
  padding-left: 1rem;
  border: solid 1px #B1B1B1;
}
.company tr:last-child th {
  border-color: #B1B1B1;
}

・border-collapse: collapseを指定することで、無駄な余白を無くしています。 ・.company tr:last-child thへの指定により、最後のthとtdのズレを修正しています。 f:id:keikamiguchi:20200711144858p:plain

デザイン

上下中央配置

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ