HTML&CSS入門「style属性を使ってデザインを変えてみよう」

スポンサーリンク
Pocket
LINEで送る

htmlにはstyleがあり、このstyleを使うと文字のサイズや色を変えたり背景の色を変えたりと見た目の変更が行えます。

styleで文字のデザインを変えてみる

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″></meta>
    <title>html lessen</title>
  </head>
  <body>
    <h1 style=”font-weight:bold; color: red;”>HTMLレッスン</h1>
    <img border=”1″ width=”300px” src=”http://notsleeeping.com/wp-content/uplo ads/2016/08/110126-HTML5_Logo.png”/>
    <p>htmlレッスンサイトです</p>
    <h2>HTMLとは</h2>
    <p>htmlはマークアップ言語です</p>
  </body>
</html>

ホームページのタイトルを目立たせたいので太字の赤色にしたいと思います。

h1タグの中にstyle=”font-weight:bold; color: red;と記入します。

このstyleにはCSSと全く同じ記述なので、CSSを覚えればhtmlのstyleにも応用できます。

複数styleを追加したい場合はstyle=”color: red; font-size: 20px;”と続けて書けばOKです。

スポンサーリンク

Screenshot from 2016-08-13 02-57-55

要素をデザインする

タイトル「HTMLとは?」の下の文章をデザインしてみましょう。

<p style=”background: red;”>htmlはマークアップ言語です</p>

backgroundは背景色を変更するプロパティです。

これをブラウザで見てみると

Screenshot from 2016-08-13 03-16-18

要素の背景が赤くなりました。

 

今回学習したstyleは要素の見た目を変更するものですが、要素の見た目の変更は基本的にCSSで設定することが推奨されているのであまり使用する頻度は高くないと思います。もちろん、使わなければならない時もあるので習得しておきましょう。