No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。目次ゼロから始めるHTML/CSS講座CSSの適用方法CSSの適用方法style要素style属性link要素まとめゼロから始めるHTML/CSS講座CSSの適用方法CSSの適用方法CSSをHTMLに適用するための方法は3つあります。以前作成した桃太郎のあらすじを利用し各方法を紹介していきます。インデント追加など一部修正をしています。charset="UTF-8"><title>昔話</title></head><body><h1>桃太郎</h1><p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p><p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。href="http://codecamp.jp/">CodeCamp</a></body></html>style要素head要素の中にstyle要素を設定すると、要素の内容としてCSSを指定することができます。以前「CSSの基礎と記述方法」内のmomotaro.htmlで文字色を変更するCSSを適用したのはこの方法です。<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。href="http://codecamp.jp/">CodeCamp</a></body></html>HTMLの属性の1つにstyle属性があり、この値としてCSSのプロパティと値を記述することができます。この方法は文章の構造を示すHTMLとデザインのCSSを混合して記述する上、全ての要素に細かくCSS指定をする必要がありメンテナンス性が著しく低下するため、通常使用しません。一時的なテストに利用する程度としてください。link要素link要素のrel属性に[stylesheet]、href属性にファイルを指定することで、CSSを別なファイルから読み込むことができます。CSSのみ記述したファイルを新規作成し、link要素に作成したファイルを指定してください。<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。red;}link要素はrel属性にファイルの種類を指定することでCSS以外のファイル読み込みもできますが、CSS以外で利用することはあまりないため、紹介は割愛します。link要素を複数指定することで、CSSファイルを複数読み込むことも可能です。<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。blue;}まとめCSS適用について「style要素」「style属性」「link要素」の3つの方法を紹介しましたが、基本的にlink要素による外部CSSファイル読み込みを利用してください。CSSの外部ファイル化は、複数ページでCSSの使い回しができるというメリットがあります。style要素やstyle属性でページごとにCSSを適用してしまうと、デザインに修正や変更があった際に複数のHTMLファイルを修正しなければなりません。CSSをHTMLと別ファイルにして管理することで、HTMLが何ページあろうと修正はCSSファイルだけで済みます。よって複数のWebページがある場合、下記のようにHTMLとCSSを分けて作成します。2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。Ltd.CodeCampusテクノロジーの「学ぶ・働く」を知るメディアプログラミングWEBデザインテクノロジーアプリ開発ビジネススキルキャリア学習ガイドtwitterLINE。