はてなブックマーク

事前にrubyがインストールされている必要があります。 以下の手順で説明していきます。 ① rubyをインストール ② sassをインストール ③ sassのコンパイル Windowsにrubyをインストール（導入） Macではターミナルでrubyをインストールできるのですが、Windowsの場合は、コマンドプロンプトかPowerShellを使います。 私はPowerShellを使って説明していきます。 まず、rubyが既にインストールされているかどうか確認します。 PowerShellを立ち上げて、以下のrubyのバージョンを確認するコマンドを入力してEnter。

デスクトップパソコン、タブレット、スマホなど、 画面サイズや解像度が全く違うデバイスを使う現代では、サイトの文字サイズをpxで固定する事はデメリットしかありません。 全ての要素に対して、デバイスごとに最適な文字サイズを書き直す必要が出てくるからです。 そんな問題を解消するのが、相対的なサイズ指定を行う「rem」や「em」です。 特に相対的なサイズ指定「rem」を行えば、メディアクエリでルートのサイズを変えるだけで、サイト全体のフォントサイズを一括変更できるのです。 この記事では、そんなレスポンシブサイトに最適なフォントサイズ指定方法を提案していきます。 CSS html { /* ルートのフォントサイズを10pxに設定しておく */ font-size: 62.5%; } body { /* ルートのフォントサイズを1.6em（16pxと同等のサイズ）に設定 */ font-size: 1