footer東京都を拠点にしたWebサイト制作。公開CSSの基本を知ったところでここではメインで使う「プロパティ」をピックアップして解説します。メインなので全部のプロパティは表記していません。プロパティとは何でしょうか?プロパティとは以下の赤い箇所のことです。20px;}ちなみに青がセレクタ、緑が値です。この言葉は頻繁に出てくるので是非覚えてください。プロパティは二部に分けます。第一部はテキストや文字に装飾をする系や余白のCSSプロパティを説明し、第二部は枠線、背景、回り込み、リスト、高さ、横幅...といったプロパティを説明します。「CSSがまだ不安...」という方は前回の7.装飾をするためにCSSを使うを参考にしてください。paddingテキスト、文字にかけるCSScolor文字色を定義するプロパティ。赤や青、緑など好きな色を指定することができます。blueなどの固有名詞等で指定できます。font-size文字のサイズを変更するプロパティ。大きくしたり小さくしたり、単位も様々です。1.5em;}適用例:文字を1.5倍にしますサンプル文字emとは「1文字分」なので基準サイズの1.5倍の大きさということになります。pt等、様々な単位で指定することができます。簡単に説明するとpxやpt等の固定の単位を絶対指定、emや%の基準となるサイズによってかわる単位を相対指定といいます。PCやスマホ、タブレットと様々な大きさのデバイスがあるので基本的にはemという相対指定で進めていくことをお勧めします。font-weight文字の太さを定義するプロパティ。bold;}適用例:文字を太くしますサンプル文字100や200といった数値での指定もできますがboldを使うのが無難です。boldにしていたものを戻す場合は値にnormalを指定します。font-familyゴシックや明朝など、どのフォントを使うか定義するプロパティ。ゴシックとかメイリオとか固有名詞で指定します。値がコンマで複数個指定されています。これは全部を指定するのではなく、「1つ目がなかったら2つ目、それもなかったら3つ目...」といったように優先順位をつけて指定しています。こんなことをするのかというとフォントというのは見ている人のパソコンにそのフォントが入っているかはわからないので、なかった時のためにいくつか予備で指定するのです。W3ですがこれはMacのフォントで一般的なWindowsコンピュータには入っていません。これはWindowsユーザーには無視されて次のフォントにいきます。試しにどのフォントも入っていない場合(そんなことは基本的にないですが、海外などで日本語フォントが入っていない場合)、最後に設定したsans-serifというサンセリフ体(ゴシック体)の文字を使えという命令をしています。この指定にするとそのパソコンに入っている基本的なゴシック文字が使われ日本語も表示できるようです。text-decoration文字の装飾を定義するプロパティ。例ではunderline、つまり「下線」を引きました。他には上に線をひくoverline、取り消し線のline-through、何も指定しない場合や設定した値を戻したいばあいのnoneなど。使うのはunderlineでしょう。text-align行内での表示位置を定義するプロパティ。使うプロパティの一つ。centerの他に右寄せにするright、基準値となるleftがあります。line-height行内におけるテキストの高さを定義するプロパティ。高さを指定する値は%の他にemやpxなどfont-sizeと同じように指定できます。ここもpx指定よりも相対指定のemや%がいいでしょう。line-heightは単位を省くと「倍」という意味になります。1.5倍)font-sizeの値より大きい場合は余った数を上下に割り振ります。text-indent文字を引っ込める(インデントする)プロパティ。1em;}適用例:1行目の文字を1文字分下げます。2行目の文字は通常の位置から始まります。サンプル文字サンプル文字インデントするというのは文字を下げる、という意味です。1emすると1文字分インデントされ2行目からはもともとの位置からスタートとなりよくある文章の形と思ってもらえればわかるかと思います。pxや%等の数値での指定もできます。実際にはemで「1文字分」としたほうが後々の管理がしやすいでしょう。余白を指定するCSS続いて余白を決めるCSSを学びます。これはよく使うプロパティなので是非覚えましょう。margin要素の外側の余白を決めるプロパティ。左右50pxと設定しますサンプル文字marginプロパティは外側の余白を設定します。要素自体の余白は全く関与しません。左右は一緒で下だけ別などなど4方向細かく設定できます。40px;}といった感じに細かく設定できます。このmarginプロパティは次に出てくるpaddingプロパティとセットで覚えるようにしましょう。padding要素の内側の余白を決めるプロパティ。下5pxと設定しますサンプル文字paddingプロパティはmarginと変わり要素の内側の余白を設定します。marginとごっちゃになりやすいところです。適用例を見ると分かる通り要素の内側なので青い部分が広がっているのがわかると思います。marginと同じく、上下左右をそれぞれ細かくと上だけ左だけといったように個別にも設定できます。※marginと同じのため省略します。最初はどこからが内側でどこからか外側なのかわからなくなりますが、次回で紹介するborderやbackgroudプロパティでわかりやすくなるので合わせて見てみましょう。プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。