HTML実践学習9 CSSとは

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

Webサイトでテキストに色を付けたりデザインをするやり方をご説明します。

スタイルシートとは

スタイルシートとは、CSS(Cascading Style Sheet / カスケーディング・スタイルシート)の略で、Webサイトのデザインを指定することができます。拡張子は「.css」になり、html文書に対して使用します。html文書に直接スタイルを記載せず、スタイルシートを使用する理由は複数ページのデザイン(見栄え)を一括で管理することが可能なためです。またソースの見た目もシンプルになることも利点です。

文字のスタイルを変更

CSSを使用すると下記のようなことができます。

(CSS適用前)文字に背景色を付けます。

CSS適用後)文字に背景色を付けます。

(CSS適用前)文字サイズを大きく、赤文字にします。

(CSS適用後)文字サイズを大きく、赤文字にします。

このように文字にデザインを施すことができました。また文字だけでなく画像のサイズ、背景画像、余白、重なり位置などWebサイトをデザインをするために様々な指定をすることが可能です。

参考記事:http://www.ink.or.jp/~bigblock/css/start.html

セレクタ、プロパティ、値

CSSの基本文法はセレクタ・プロパティ・値の3つから構成されます。基本文法は下記のようになります。

セレクタ { プロパティ [属性]: 値 [プロパティ値];}

「セレクタ」でどの要素に対してデザインを適用するかを決め、「プロパティ」と「値」でどのようなデザインを適用させるか決めます。

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

POINT

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をコピーしました