33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

数値ではなく単語による指定方法について

本日の教材動画はこちら 

 今回は数値ではなく単語を使ったCSSのデザイン指定方法についてみていきます。今まで当たり前に使ってきてましたが、今回は底の部分を不可彫りしていきます。

プロパティに対して決まっているもの

プロパティってなんだっけ?って一瞬なりますが、CSSの基本書式(セレクタ・プロパティ・値)を思い出すとわかりやすいです。このプロパティ部分に対して決まっている値(単語)があれば使う事ができます。

  • align → center(中央) / left(左) / right(右)
  • vertical-align → middle(上端揃え) / top (中央揃え)/ bottom(下端揃え)
  • text-decoration → underline(下線) / none (なし、初期値)/ etc...
  • margin → outo(余白を自動で調節する)

などなど…。 text-decorationにはline、style、colorの3種類に分かれていたり、maginにはauto以外の使い方(ショートハンドで検索)があったり、このほかにも色々種類がある。覚えるのは大変なため勉強や検索しながら使うとよい。

CSSのルールについてのもの

inherit … 親要素の設定を継承する

通常、継承されない設定を強制的に継承させることができる。例えば下記のコードの場合…

<p>

<a>ここには親要素のcolor指定は有効ではない</a>

</p>

pに何かしらの色設定していても、aの部分にはかからない。だがinheritを使えば、pの色指定がa部分にも継承されるようになる(同じになる)

URLに関して

URLの書き方は "サイトのurl" という風に、ダブルクォーテーションで囲んで使用する。ここは特に意識しなくても問題なく使えそうな部分ですね!

ダブルクォーテーションを使う時の注意点

CSSにおいてダブルクォーテーションは、何かを指定する(囲む)時に利用しますよね。ただそれを「文字として扱いたい」と気があるかと思います。そういった場合はバックスラッシュでエスケープ(挿入)すれば使う事ができます。例えば

"夏目漱石の"吾輩は猫である"について語りたい"

といった文章を表示したい場合、何もしなければ「夏目漱石の」と「について語りたい」部分が””で囲われてる判定になります。これをちゃんと一文として表示したい場合は

"夏目漱石の\"吾輩は猫である\"について語りたい"

という風に、ダブルクォーテーションの前にバックスラッシュを置けばいい。バックスラッシュは「書いた次の文字のプログラムとしての意味を無くさせる」役割がある為、バックスラッシュ後に書いた文字は「ただの文字」として認識されるようになる。

 

ちなみに普段バックスラッシュは¥の表示替わりになっているため(バックスラッシュを入力すると¥として表示される)、¥を文字として使いたい場合は "\\3,500" とすれば表示は¥3,500 となる(この記事ではそう認識されないために全角で書いてますが実際は半角で使ってくださいね)

 

【参考サイト】

text-decoration …… テキスト傍線のつけ方・色・スタイルをまとめて指定する

CSS 何だったけってなりがちなメモ。initial と inherit