テキストにスタイルを設定【文字を装飾するCSSコードを少しだけ紹介】

こんにちは、いどはるです。
私は、プログラミングを勉強中。CSSで文字を装飾する内容を学習したので、記事にしています。

✔️本記事の内容

  • テキストの色を変える
  • テキストの大きさを変える
  • テキストの太さを変える
  • テキストの位置を変える
  • テキストに線を引く・リンクの線を消す

それぞれのやり方、コードを書いていきます。

記事を書くときは、なんとなくWordPressのツールバーを使って装飾していましたが、 ↓

WordPressのツールバー

CSSを使って装飾すると1つ勉強になりました。

なお、本記事の内容はドットインストール#07 テキストにスタイルを設定しようで勉強した内容です。見てみてください。

また、エディターはAtomを使用しています。

AtomというエディターとGoogle Chromeを使うことで、HTMLやCSSの文書を作成することができます(参考:【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンHTML/CSSの学習環境を整えよう [Windows編]HTML/CSSの学習環境を整えよう [macOS編])。

では、文字を装飾していきましょう。

 テキストにスタイルを設定。5つ

「テキストの色を変える」、「テキストの大きさを変える」、「テキストの太さを変える」、「テキストの位置を変える」、「テキストに線を引く・リンクの線を消す」方法を紹介していきます。

テキストの色を変える

テキストの色を変えるとこんな感じです。h1の色をredにしました。

テキストの色を変える

CSSのコードはこういう風に書いています。

h1 {
  color: red;
}

テキストの大きさを変える

テキストの大きさを変えると、こうなります。

テキストのサイズを変える

コードはこういったもの。大きく分かりやすくするため50pxとしました。

h1 {
  font-size: 50px;
}

px(ピクセル)は、画素のことで、大きさサイズのような意味合いでOKです。

テキストの太さを変える

テキストの太さは、こんな感じに変わります。

normalと指定した場合。h1の太さの文字が細くなりました。

文字の太さnormal

コードはこれ ↓ で太さを変えられます。

h1 {
  font-weight: normal;
}

テキストの位置を変える

テキストは、位置を変えることができます。

テキストの位置を真ん中へ変更
こういったコードで指定すればOK。

h1 {
  text-align: center;
}

テキストに線を引く・リンクの線を消す

最後に、線を引いたり消したりするスタイル設定です。

テキストに線を引くとこんな感じ。

テキストに下線を引く
コードはこれ。

h1 {
  text-decoration: underline;
}

リンクは何も設定しないと、線が入っています。

リンクを作ると自動的に下線が付くaタグとhref属性でリンクを貼っています。

この下線を消すことができて、

リンクの下線を消す

コードはこれ。「a」タグに対して、スタイルを設定している点に注意。

a {
  text-decoration: none;
}

以上となります。ドットインストール#07 テキストにスタイルを設定しようも参考にしてみてください。では!