HTML実践学習10 CSSの練習

ITリテラシー学習
ITリテラシー学習

HTMLのタグ内でCSSの書き方を説明しながら実際に書く練習をしていきます。

インラインCSS

htmlのタグ内にCSSを記述する方法を「インラインCSS(インラインスタイルシート)」と呼びます。これはあまり好ましくない記述方法です。理由は「メンテナンス性に欠ける」ためです。

このように3ページ分の文字を青くしたい場合、各htmlに記述するとなると3ファイルに記述する必要があります。1000ページであれば、1000ページに記述する必要があります。また変更が入った場合はその都度全ページのソースを触る必要があります。そのためhtmlにデザインを施す場合は、外部CSSファイル参照を基本としましょう。

CSSを記述する場所

CSSを書く場所は下記の3つになります。
(1)htmlファイルのstyleタグに記述
(2)htmlファイルの要素に記述(インラインスタイルシート)
(3)外部ファイル(cssファイル)に記述

エミュレーターで下記のソースをコピーして試してみましょう。
http://www.trancedive.com/contents/tools/html_emulator/

 <style type="text/css">
 
 div#main{border:5px solid red;}
 #sidebar{border:5px solid blue;}
 .excerpt{border:5px solid green;}
 
 </style>
 
 <div id="main">
<div class="thumbnail">
<img src="***.jpg">
</div>
<div class="excerpt">
<p>抜粋テキストが100文字入ります</p>
</div>
<div class="thumbnail">
<img src="***.jpg">
</div>
<div class="excerpt">
<p>抜粋テキストが100文字入ります</p>
</div>
</div>

<div id="sidebar" class="widget-area">
<h2>新着記事</h2>
<ul>
<li>記事1</li>
<li>記事2</li>
<li>記事3</li>
</ul>
</div>

参考記事:https://saruwakakun.com/html-css/reference/selector#section1

CSSの優先度

タグに直接記述されたスタイル(インラインCSS)が、外部ファイルやstyleタグで記述されたスタイルよりも優先的に適応されます。
外部ファイルよりも、styleタグで記述されたCSSの方が優先されるように思いがちですが、優先度は同等です。
ただ別の条件で「ソースは上から読み込まれる」というルールがあります。
よって、後で読み込まれたスタイルが優先されてしまうため、head内でstyleタグの下に外部ファイルのリンクを記述した場合は、外部CSSの指定の方が優先されます。

POINT

スタイルは「htmlファイルのタグに直接記述 > htmlファイルのstyle要素に記述 = 外部のCSSファイルを読み込み」の優先度で表示されます。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました