HTML/CSS

【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTMLファイルにCSSで記載したデザインを適用させたい
  • HTMLに埋め込む形でCSSを適用するサンプルコードが欲しい

 

今回はHTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。

初心者の方でもわかりやすいように、コピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。

 



 

HTMLにCSSを適用させる2つの方法

HTMLにデザインを適用させるためにCSSを使います。

そのCSSをHTMLファイルに適用させるには大きく分けて2つの方法があります。

 

  • HTMLファイルに直接記述して埋め込む方法
  • 外部のファイルに記述したCSSをHTMLファイルに読み込む方法

 

今回は、前述の「HTMLファイルに直接記述して埋め込む方法」について解説していきます。

 

【サンプルコード】HTMLにCSSを直接埋め込み

では早速HTMLファイルに直接CSSを記述する方法をみていきましょう。

実は、直接CSSを記述する方法にもやり方が2つ存在します。

 

  1. HTMLタグ要素の中にインラインでCSSを書く
  2. HTMLファイルのstyleタグにCSSを書く

 

HTMLタグ要素の中にインラインでCSSを書く

この方法は、HTMLファイル内の装飾したい要素を囲むタグにstyle属性を加えてその値にCSSを書き込みます。

ポイント

基本構文は<タグ名 style = “プロパティ: 値”>

 

See the Pen inline-css by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

このやり方だと、要素毎に細かいデザインを適用させることができるので、細かい微調整が可能で柔軟にスタイルを適用できますね。

 

HTMLファイルのstyleタグにCSSを書く

この方法は、HTMLファイルの<head></head>内に<style>タグを追加して、そこにCSSを埋め込みます。

ポイント

基本構文は<style> 【ここに適用するCSS】 </style>

 

See the Pen head-in-css by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

外部のCSSファイルを読み込む方法だと、複数のページにまとめてデザインを適用できるというメリットがあるのですが、<style>タグを用いるこの方法では、1ページ毎にデザインを調整することが可能です。

HTMLにCSSを埋め込むメリット

HTMLに直接CSSを埋め込むメリットとしては主に以下のようなことがあります。

  • 各ページ・各要素毎にデザイン(スタイル)を適用できる
  • 外部ファイル(.cssファイル)を使わないので、ディレクトリ構成がすっきりする

 

基本的には細かい微調整が簡単に行える。ということが大きなメリットですね。

とはいえ、実務では外部ファイルを作成して、読み込むことが多いのでどちらのやり方でもできるようになっておきましょう。

 

HTMLにCSSを埋め込むデメリット

デメリットとしては、HTMLファイル の量が増えてくると、コードが見辛くなってしまうことです。

そのため、CSSの記述方法は上手に使い分けて実装することが、コーディングでは大切になってきます。

 

【HTML/CSS】まとめ

今回は、HTMLファイルにデザイン(スタイル)を適用する際の「HTMLに直接埋め込む方法」について解説しました。

 

  • HTMLファイルに直接記述して埋め込む方法
  • 外部のファイルに記述したCSSをHTMLファイルに読み込む方法

 

  1. HTMLタグ要素の中にインラインでCSSを書く
  2. HTMLファイルのstyleタグにCSSを書く

 

 

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.