タグ: HTML・CSS

HTML・CSSについて。

HTML

HTMLはマークアップ言語で、Webサイトのページの内容を記述する時に使用する。HTMLタグと呼ばれる<タグ名>のようなマークで、文字や画像などページに使用する項目を定義する。

HTMLのルールに沿って書かれた.htmlの拡張子のついたファイルなどをHTMLファイル、HTMLと略して呼んだりする。

CSS

CSSは記述されているHTMLに対して、色を付けたり大きさを指定したり、アウトを指定するための装飾用のファイル。拡張子は主に.css。

拡張子は.htmlや.cssじゃないといけないのか？

HTMLとCSSは.htmlや.cssで記述されることが多いが、プログラムでルールに沿って記述されたコードを表示させることで、HTML・CSSとして表示させることも可能。サーバーの設定やプログラムでそのように表現することも可能。

HTML・CSSを使ってどういった表現が可能か？

• 見出し
• 段落
• リスト
• テーブル
• 画像
• 動画

など様々な要素がある。基本的には縦に要素が表示されるものだと思っていればシンプルに納得できる（厳密に言うと違うが）。
例えば、縦に並ぶ要素を横に並べたいときはCSSを横に並ぶように記述する。

※ただし、横に並べるには横に並ぶようにHTML側もそのように記述しておかなかければいけない

HTMLタグの組み合わせとCSSの組み合わせは対なので、どちらも矛盾がないように記述する。
プログラム言語ではないため、自分で作成したHTML・CSSファイルはエラーが表示されず処理されて表示される。表示された時に思ったようなレイアウトになっていない場合は、どちらかあるいはどちらも記述内容をチェックする。

レイアウトによく使用するプロパティ

レイアウトは表示が問題なければ、以下のプロパティ以外でも可能。

• display:flex;
• display:table;
• width:***px;
• width:***vw;

文字の設定に使用するプロパティ

様々な単位がある。

• font-size:***px;
• font-size:***vw;
• font-size:***vw;

文字の色変更に使用するプロパティ

文字の色設定は16進数表記やrgba表記でも可能。

• color:#******;
• color:rgba(***,***,***,*);

背景に使用するプロパティ

背景は単色・グラデーションの他、画像を使うことも可能。

• background:#******;
• background:url(***.***);

印刷など

CSSは印刷の文書も表現できる。単位はmmなども使用可能。

JavaScript

HTMLやCSSを操作するためにあるスクリプト言語。HTMLやCSSと同じように.jsとすればJavaScriptファイルとして認識される。HTML・CSSと違い、記述方法を間違えるとうまく処理結果が表示されないことがある。
※ブラウザに搭載されている