記事内に商品プロモーションを含む場合がありますひなドリスタイルシートって何?わかドリスタイルシートはHTMLを装飾して魅力的にするためのものだよ。最近のWebページはほとんどの場合HTMLとセットで作成するね。リンクはページ内の移動や別ページへの移動に使ったりするよ。簡単なサンプルこのページではこれだけ覚える!スタイルシートはHTMLを装飾する今回のゼロわかスタイルシートとは?HTMLを装飾するものスタイルシートはHTMLを装飾するためのプログラミング言語のひとつです。これがあることで、サイト全体に同じデザインを適用したり、レイアウトをそろえたりすることが出来ます。スタイルシートには、主に以下の3種類があります。HTMLの要素のstyle属性に直接スタイルを記述する方法です。red;”>テキスト</p>のように、タグの中に直接スタイルを記述します。最近のサイトでは、外部CSSファイルを読み込んで統一感を出すことが主流のため、あまり使うことはないでしょう。一つ一つの要素に書かなければならず、修正が大変なこともデメリットとして挙げられます。HTMLのhead要素内に<style>タグを追加してスタイルを記述する方法です。</style>のように、HTMLファイル内でスタイルを定義します。こちらも、頻繁に使うことはないでしょう。特殊なページのみデザインを変える時などに使われる可能性はあります。外部スタイルシートHTMLファイルとは別のCSSファイルを作成し、HTMLのhead要素内に<link>タグを追加してCSSファイルを読み込む方法です。href=”style.css”>のように、HTMLファイル内で外部スタイルシートを指定します。ほとんどの場合、スタイルシート(CSS)と言えばこちらを指します。これらのスタイルシートを使用することで、HTMLの要素にスタイルを適用し、ウェブページをより魅力的なものにすることができます。スタイルシートがないとどうなる?スタイルシートがない場合、Webページは基本的にHTMLのマークアップのみで表示され、非常にシンプルな見た目になります。レイアウトが崩れたり、やたらと空白が目立ったり、画像がちゃんと表示されなかったり場合もあるでしょう。Webブラウザはデフォルトのスタイルを持っており、スタイルシートがない場合はこれが適用され、結果として想定していないページの見た目や機能になったりします。マウスを特定の場所に乗せたときのホバーアクションやアニメーションを追加することが難しかったりします。スタイルシートがないと想定外の動きや見た目になってしまい、わかりにくいWebページになってしまう可能性が高いということが言えます。このように、スタイルシートは今やWebページにおいてなくてはならない存在になっていると言えるでしょう。CSSの基本構造セレクタスタイルを適用する要素を指定する部分をセレクタと言います。セレクタには、要素名、クラス名、ID名などが使われます。プロパティプロパティはどんな装飾をするかを定義したもので、色、フォント、背景、余白などがあります。値プロパティに対する値を設定する箇所です。プロパティが色の場合、赤、青などを指定することが出来ます。<p>ここにテキストがあります。</body></html>※ページの都合上、内部スタイルシートで書いてます。このページではこれだけ覚える!スタイルシートはHTMLを装飾するわかドリ単体だけでは動かないよ。スタイルシートはHTMLとセット!今回のゼロわかこの記事でわかったことスタイルシートとはHTMLを装飾するものお疲れさまでした。今回は、スタイルシートをゼロからわかっていただきました。わかドリとても偉い!次はJavaScriptについて学んでみましょう。MEわかドリ現役SE。何とか転職したりして10年生き残った。プログラミングのブログを運営。現役SEわかドリ現役SE。何とか転職したりして10年生き残った。プログラミング未経験だったかつての自分であるひなドリを救うため、プログラミングのブログを運営。