ウェピックスではウェブ界の情報をピックアップします!
menu
Last Update:2015/07/02

HTML や CSS って何?

Pocket

HTML や CSS とは

HTML や CSS はWebページを作成するための基本的な技術です。公開されているWebページの殆どで HTML や CSS が利用されています

HTMLとは

HTMLはWebページを作成する為の代表的なマークアップ言語です。

HTML(エイチティーエムエル)とは【Hyper Text Markup Language:ハイパー・テキスト・マークアップ・ランゲージ】の略称で、Webページを作成する為の代表的なマークアップ言語です。マークアップ言語(markup language)とは、文書構造(見出しや段落など)やデザイン(レイアウトやフォントサイズ)に関する指示を文書の中に埋め込んで記述するコンピューター言語の一種です。文書はテキストファイルに記述することが出来ます。公開されているWebページの大半は、このHTMLが使用されています。

HTMLは、文章の中に < と > で挟まれたタグと呼ばれる、特別な文字列を組み込む事で、様々な効果を設定する事が可能です。例えば、テキスト、画像、動画などのリンクを組み込む・テキストを太文字で表示する・音声を組み込む事などが出来ます。HTMLの特徴はハイパーテキストという点です。ハイパーテキストとは、他のドキュメント・文書へのハイパーリンクを設定する事が出来るものです

<html>
<head>
<title>タイトルを指定する</title>
</head>

<body>
ここに内容を記述します
</body>

</html>

ハイパーリンク

<a href="http://wepicks.net/">サバスター</a>

サバスター

また、HTMLを書く為には、特殊なファイルフォーマットは必要なく、テキスト形式ファイルに記述することで表現が可能という点も大きなメリットといえるでしょう。このテキスト形式ファイルを作成する為に必要なのは、テキストエディタです。テキストエディタとは、コンピューターで文字情報のみのファイルを作成、編集、保存すつためのソフトウェアです。代表的なエディタは、Microsoft Windows のメモ帳や、Mac OS X のテキストエディット、UNIXの vi、Emacs などです。

CSSとは

CSS(シーエスエス)は、Webページのレイアウトや色などのデザインに関する体裁を効率的に定義するための言語

CSS(シーエスエス)とは、【Cascading Style Sheets:カスケーディングスタイルシート】の略称で、Webページのレイアウトや色などのデザインに関する体裁を効率的に定義するためのプログラム言語です。

テキストエディタ(編集用ソフトウェア)などで作成された文書なども含めて、文書の体裁を整える技術全般のことをスタイルシートいい、CSSはスタイルシートという技術の中で使用する言語の1つです。CSS=スタイルシートと考えて頂いて大丈夫です。

Webページにおいて、HTMLは文書の意味や構造を定義します。例えば、見出しや段落などです。一方、CSSではデザインを定義します。レイアウトやフォントの大きさ色などです。HTMLでもデザインに関するタグが用意されていますが、CSSでは装飾能力がさらに強化されています。CSSはHTMLファイル内に直接記述することが出来る他、外部化して別ファイルにCSSを記述することも可能です。CSSが定義されたファイルを外部化してHTMLファイルからCSSファイルを呼び出し、HTMLとCSSで構造と体裁を分離させることが出来ます。

HTMLファイルからCSSファイルを読み込むには「@import」「addimport」「link」などのインポート用HTMLタグを利用するなど、複数の手法が用意されています。インポート機能を利用して読み込まれるファイルは、HTMLファイルが設置されているファイルのドメイン以外に設置されていてもインポートが可能です。また、メディアに合わせてCSSを切り替えることが出来ます。

CSSを利用することで、デザインを一元管理しメディアに合わせてデザイン性に優れたWebページを作成することが出来ます。

2013年12月現在の最新CSSバージョンは、CSS3(Cascading Style Sheets. Level3)です。このバージョンでは、角丸、透過の設定やアニメーションなどLevel2までにない新しい機能が追加されています。CSS4(Cascading Style Sheets. Level4)は草案の段階です。


タグ(=記事関連ワード)

日付

投稿日:2015年4月14日
最終更新日:2015年07月02日

関連記事

このカテゴリの他のページ

この記事へのコメント

トラックバックurl

http://wepicks.net/rentalserver1day-firsttime-htmlcss/trackback/