Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Kako_rocket

CSS超入門：テキストの装飾

Posted at

前回はCSSの基本知識について勉強しました～
今回はCSSのテキスト装飾機能について取り上げます。フォントサイズや行間の調整など盛りだくさんです、、、

##CSSの単位
CSSは「数値＋単位」というかたちで値を指定する。
CSSで長さを指定するときに使われる単位には、以下のようなものがある。

単位 読み方 説明
px ピクセル ディスプレイの1ピクセル（画素）を1pxとする単位。フォントサイズやボックスの大きさを指定するのによく使われる　
em エム 1文字の大きさを1emとする単位。フォントサイズやボックスの大きさを指定するのによく使われる
% パーセント 基準となる長さに対するパーセンテージを指定する。基準となる長さがどの長さを指すのかはプロパティによって異なる。主にボックスの大きさを指定するのに使われる
rem ルートエム <html>タグに指定されたフォントサイズを1remとする単位。フォントサイズを相対的に指定するのに便利
vw ビューポート・ウィズ ビューポート（ウィンドウサイズまたは端末の画面サイズ）の幅の100分の1を1vwとする単位
vh ビューポート・ウィズ ビューポートの高さの100分の1を1vhとする単位

##Webページのフォントサイズを指定する方法
Webページのフォントサイズを指定する方法は大きく分けて2つある。
(1)タグごとにフォントサイズを指定する方法
(2)基準のフォントサイズを決めておいて、各要素のフォントサイズを相対値で指定する方法

(1)はCSSが解読しやすく、どの要素が何ピクセルで表示されるのか一目瞭然なのが利点。
(2)はCSSの管理や修正がしやすく、例えばパソコン向けとスマホ向けでフォントサイズを変えたいときに便利

(2)はまず<html>要素に対して「基準のフォントサイズ」を単位pxで設定する（※<body>要素ではないことに注意）

html{
  font-size:14px;
}

基準のフォントサイズを指定したら、次に見出しなどのフォントサイズを指定する

ex.css
h1{
  font-size:1.4rem;
}
h2{
  font-size:1.14rem;
}

ここで使用している単位は「rem（ルートエム」。ここでいう「ルート」とは、すべての要素の親要素のことで、常に<html>を指す。単位にremを使うと、<html>に指定されたフォントサイズに対する倍率で、要素のフォントサイズを指定することができる。今回の倍率だと次のような設定になっている。

<h1>　　　　　<html>のフォントサイズ(14px)の1.4rem(1.4倍)　　=約20px
<h2>　　　　　 <html>のフォントサイズ(14px)の1.14rem(1.14倍)　=約16px
そのほかの要素　<html>のフォントサイズ(14px)を継承　　　　　　=14px

##テキストの行間を調整する

body{
  line-height:1.7;
}

line-heightプロパティを使用すると、テキストの行の上下にスペースが追加される。
値には単位をつけない数値を指定する。
line-heightプロパティは子要素に継承されるため、<body>に設定しておけばページ全体の行間を一括して調整できて便利。だいたい1.5~1.8くらい

##段落のテキストのリード文だけ太字にする
クラス名セレクタを利用するタグはないので、段落の<p>にクラス名をつけて代用する。
→そのクラス名をセレクタに使って、CSSでテキストを太字にする

・・・
<style>
body{
  line-height:1.7;
}
.lead{
  font-weight:bold;
}
</style>
</head>
<body>
<h1>アベンジャーズ</h1>
<p class="lead">「アベンジャーズ」はマーベル・スタジオ製作、ウォルト・ディズニー・スタジオ・モーション・ピクチャーズ配給で公開された2012年のアメリカ合衆国の映画。</p>
<p>複数のヒーロー映画のクロスオーバー作品であり、それらすべての作品を同一の世界観として扱う「マーベル・シネマティック・ユニバース」シリーズに属する作品に当たる。</p>
<p>その作品群の中では第6作品目の映画であり、その「フェイズ１」のクライマックスを飾る作品でもある。</p>
</body>
</html>

これが
image.png
こう表示されますよ～

##表示するフォントを設定する
Webページに表示するフォントは、コンピュータにインストールされているフォントか、WebサーバーからダウンロードするWebフォントを使用する方法がある。
コンピュータにインストールされているフォントを使うのが一般的だが、Windows,Mac,Android,iOSのすべてにインストールされているフォントはないため、どんな機器から閲覧されても問題ないように、いくつかの候補を挙げておく必要がある。

一般的なフォント指定の方法
日本語のWebサイトでは通常、ゴシック体を選ぶ。次のようなCSSを書くのがお決まり

<style>
body{
  line-height:1.7;
  font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ　ProN",
Meiryo,"MS　Pゴシック",sans-sarif;
}
</style>

または、これを省略した

<style>
body{
  line-height:1.7;
  font-family:sans-serif;
}
</style>

が主流（※省略パターンの場合、微妙に表示が変わることもある）

Webフォントを使用する
Webフォントを使うとフォントの選択肢が増えるほか、どんなコンピュータで閲覧しても同じフォントで表示できるという利点もある。
ここでは、Google Fontというサービスが提供している日本語フォント「Noto Sans Japanese」を使用する

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<style>
body{
  line-height:1.7;
  font-family:'Noto Sans Japanese',sans-serif;
}
</style>
</head>

##テキストの行揃えを変更する
テキストはほとんどのタグで左揃えになるが、CSSを使って中央揃えや右揃えにすることができる
本文の大見出し<h1>のテキストを中央揃えにするには、次のようにCSSを書く

<style>
・・・
.headline{
  text-align:center;
}
・・・
</style>
</head>
<body>
<h1 class="headline">アベンジャーズ</h1>

テキストの行揃えを変更するには、text-alignプロパティを使う。設定できる値は次の４つ

text-align 説明
text-align:left; テキストを左揃えにする
text-align:center; テキストを中央揃えにする
text-align:rignt; テキストを右揃えにする
text-align:justify; テキストを均等配置にする
text-align:justifyは主に記事など長い文章をきれいに見せるように使われる

##2行目以降を1文字下げる
注意書きの先頭にある「※」マークだけを前に出して、テキストを整列させる。「注意書き」を意味するタグはないから、タグにクラス属性をつけて代用する。<p>タグまたは<ul>タグを使用してマークアップする。

<style>
.note{
  padding-left:1em;
  text-indent:̠-1em;
}
</style>
</head>
<body>
・・・
<p class="note">※表示価格はメーカー希望小売価格（消費税別）です。実際の価格は販売店にお問い合わせください。</p>
</body>

※表示価格はメーカー希望小売価格（消費税別）です。実際の
　価格は販売店にお問い合わせください。

ってなる。
この場合、padding-leftプロパティによって「テキストの開始位置」を1em右に、text-indentプロパティによって「テキストの1行目の開始位置」を1em左に移動させた。

##テキストの色を変更する
ページ全体のテキストの文字色を変える方法と、部分的に色を変える方法の2種類がある。

colorプロパティ
テキスト色を変更するにはcolorプロパティを使用する。colorプロパティの値には「色」を指定するわけだが、この色指定には何通りかの方法がある。最もよく使われるのは、色を6ケタのRGBカラーで表記する方法。
コンピュータの画面に映し出されるすべての色は、赤、緑、青3色の光線の強弱で表現されており、赤青緑それぞれの光線の強さは、16進数の数値を使えば2ケタ(00~FF)で表現できる。
RGBカラーは＃で始まり、「Rの2ケタ」「Gの2ケタ」「Bの2ケタ」を続けて書いたもので、実際の数値はPhotoshopなどの画像編集ソフトで調べる。

ページ全体のテキスト色を変更する
ページ全体のテキスト色を変更するときは、CSSのセレクタを「body」にする。

<style>
body{
  color:#002a5a;
}
</style>

部分的にテキストの色を変更する

<style>
.important{
  color:#ff0000;
}
</style>
</head>
<body>
<p> ほとんどの物体の表面に張りつくことができ、超人的な腕力、スピード、反射神経を持つ。危険を知らせる <span class="important">スパイダー感覚</span>の持ち主。手首のウェブ・シューターからは、強力なクモの糸を発射する。</p>
</body>

ほとんどの物体の表面に張りつくことができ、超人的な腕力、スピード、反射神経を持つ。危険を知らせるスパイダー感覚の持ち主。手首のウェブ・シューターからは、強力なクモの糸を発射する。

スパイダー感覚！！！！！！

##見出しにサブタイトルをつける
見出しにサブタイトルをつけるには、<h1>などの見出しタグのほかに、<br>と<span>を使用する。
サブタイトルだけを<span>で囲み、クラス名に「subtitle」とつける。また、タイトルとサブタイトルの間には<br>を使って改行する。

<style>
h1{
  font-size:1.5em;
  line-height:1.2em;
  text-align:center;
}
h1 .subtitle{
  font-size:0.7em;
  font-weight:normal;
}
</style>
</head>
<body>
<h1>スパイダーマン<br>
<span class="subtitle">～アイアンマンに憧れる、やんちゃな高校生ヒーロー～</span></h1>

image.png
見出しが中央揃えになり、サブタイトルが少し小さい字で表示される

##最後に
うーん長い、、、覚えることが多すぎる～～

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?