Home > TagScript > Webページに表示されないあれこれ

htmlタグやcss、Javascriptを使ってWebページのデザインを作成する

新規作成日 2016-12-04
最終更新日

Webページは、htmlとcssで作成されています。使用したいデザインを構成するhtmlタグとcssの使い方を把握して、それを組み合わせることで、サイトを構成するそれぞれのWebページは、構成されています。

そして、Javascriptは、htmlとcssをプログラムで操作することができます。

Webページの価値の本質は、その内容であるため、htmlやcssに精通していなくても、価値のある内容をWebサイトで提供することができます。

更に、htmlとcss、そして、Javascriptを活用して、デザインを変化させることで、より読みやすく、理解しやすいWebページにすることができます。

htmlとcssとJavascript

Webページは、基本的には、htmlとcssとJavascriptを使って表現します。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作成するためのMarkup(マークアップ)言語となります。

Markup言語とは、テキストファイルで表記されることが多い、視覚表現や文章構造などを記述するための形式言語を示します。

ハイパーテキスト (hypertext) とは、複数の文書(テキスト)を相互に関連付け、結び付ける仕組みです。

インターネット上のホームページを作成するために使われるhtmlは、テキストや図に他のテキストに移動できる仕組みを持っていることを示しています。

htmlが進化するに従って、表現する能力が向上しています。

cssとは

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

HTMLは、本来Webページの構造を記述する言語ですが、インターネット普及の仮定で色や画像やテキストの大きさなどのスタイルに関する情報も合わせて記載されることになりました。その結果、Webサイト内のテキストや画像などの内容を変更せずに、スタイルの統一や変更の際の取扱に手間がかかります。

そこで、現在では、構造の記述とスタイルを明確に区別することが推奨されています。

Javascript

Javascriptは、ブラウザで実行することができるプログラム言語です。

組み合わせのパターンを考える

htmlもcssも用意された機能をそのまま使うだけでは、表現できないデザインがあります。自分が実現したいデザインを実現する組み合わせを見つけていく必要があります。

テンプレートを作成する際に役に立つhtml、cssの組み合わせ

Webサイト内のそれぞれのページで共通するデザインは、毎回作成するのではなく、テンプレートして用意し、それを基にそれぞれのページを作成するとWebさいと内のデザインが統一されるだけでなく、作成の手間が軽減できます。

Webページそれぞれに必要となるグローバルリンクやパンくずリストなどのデザインは、特徴的なhtmlとcssの使い方があり、自分で考えて構築するのは困難です。公開されているデザインを構築する組み合わせを組み合わせて、自分の望むデザインのテンプレートを作成していくことになります。

記事を作成する際に役に立つhtml、cssの組み合わせ

それぞれのWebページの記事を読みやすくするために有効なhtml、cssで表現するデザインやJavaScriptがあります。こちらも公開されているデザインを実現する組み合わせを活用したり、それを基に、自分で調整したり、部分的に変更して、自分の望むデザインのテンプレートを作成していくことになります。

cssフレームワーク

複数人で、Webサイトを作成する際、Webサイト内でデザインを統一して一体感を出す必要があります。それぞれが、デザインを調整してしまうと統一感がなくなります。そのため、共通して使用するcssを用意します。新たに作成することは少なく、既存のcssテンプレートから選択することが多いです。