ITエンジニアのプレイングマネージャー化応援サイト

4.スタイルを設定して表現力アップ

ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

前回は、「段落と改行で見やすくする」方法を学びました。
 

今回は、文章に色やなどのスタイルを付けてさらに読みやすくする方法を学びましょう。

スタイルを設定する

文字などのHTML要素を装飾するときには<style>を使います。

スタイルを適用するには3つの方法があります。

1.ヘッダの<style>内に書く

2.個々のタグの中に直接書く

3.CSSファイルを別に作り<head>内でリンクを張る

情報の一元化の観点から本来は、3番目の方法が望ましいです。

しかし、この方法は既にご紹介していますので、ここではより簡便な1、2の方法をご紹介します。

1.ヘッダの<style>内に書く

<アウトプット>

ブラウザで確認してみましょう

<ソースコード>

 上記では「p要素」の文字を赤くするという処理を書いています。

<p>内の“ひつまぶし”と“味噌カツ”の文字が赤くなります。

この時 <style>内の“P”をセレクタといいます。

2.個々のタグの中に直接書く

<アウトプット>

ブラウザで確認してみましょう。

<ソースコード>

“ひつまぶし”の<p>の中に直接書いています。

したがって“ひつまぶし”だけが青文字になります。

方法1と方法2を混在させた場合は、方法2のスタイルが勝ちます。

優先順位はCSSプロパティを適用する要素に近いものほど高くなる
 

と覚えましょう。

そうすれば、

2.個々のタグの中に直接書く

1.ヘッダの<style>内に書く

3.CSSファイルを別に作り<head>内でリンクを張る

の順でスタイルが適用されることが理解できるでしょう。

なお、CSSでどんな修飾ができるかについては、インターネットで各自調べてください。

 

以上、今回は「スタイル」タグについて学びました。

次回は、「スタイルを適用する対象をセレクタで広げる」方法を学んでいきましょう。

 

 

新人エンジニア向けHTML講座の一覧に戻る

新入社員研修ポータル

IT企業の人財育成に関することなら全てお任せ下さい TEL 0120-559-463 受付時間 10:00 - 17:00 (土・日・祝日除く)

ZOOMを使った遠隔研修メニュー(PDFが開きます)

ZOOMを使った遠隔研修

新人エンジニアのためのJavaタイピングゲーム

新人プログラマのためのプログラミング動画

YouTubeチャンネル

お問い合わせはこちらから

お名前 (必須)

メールアドレス (必須)

題名(件名)

メッセージ本文

確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。

新入社員研修ポータル

PAGETOP
Copyright © Say Consulting Group, Inc. All Rights Reserved.