使い分けで変わるデザイン力!HTMLとCSSの使い分け方法

まずはHTMLとCSSがなんなのか?その基本の意味と構成を理解します。

■HTML(Hyper Text Markup Language)
…Webページを作成するための言語

HTMLは「HTMLファイル」テキストエディタ(winだとメモ帳など)を使って作成。
拡張子は「html」または「.html」です。

このHTMLファイルをブラウザで開くときとメモ帳で開く時で表示が変わります。


・ブラウザで開いたとき(Webページが表示される)

・メモ帳で開いたとき(記述内容が表示される)

■CSS(Cascading Style Sheets)
…Webページの見栄えを設定する言語

CSSは「CSSファイル」テキストエディタを使って作成。
拡張子は「.css」です。

ブラウザて開いたとき、cssが関連付けされることで表示が変わります

・htmlにcssを関連付けしてブラウザで表示(cssファイルのスタイルが反映されて表示)

■HTMLとCSSの切り分け

・htmlで文章構造を記述
・cssで見栄えを記述

→この二つを合わせてWebサイトを構成する。

私はhtmlとcssの根本的な意味は知っているので、ここはあまり難しくありませんでしたね。
htmlとcssの見本として載せていますが、関連付けのタグなどは記入されていません。
あくまで、役割がわかりやすいようなものにしました。
まだまだ基礎が続きます!

この投稿は、以前運営していた同名のブログに当時書いたものを再掲載しています。
そのため、現在はデータがない画像などもあります。ご了承ください。

また、アフィリエイトやホームページの情報についてのブログですが、情報としても古いものが多いです。
過去の記事を改めて更新する予定はございませんので、ご承知おきください。