トップ 言語 HTML
ホームページなどのページはHTML/CSSを記述して表示します。HTMLは構造をCSSはデザインを決めます。この記事では、HTMLと、右寄せなどCSSの入門知識を解説しています。
この記事の目次です。
HTMLとはは、本ページのようなWebページの文書を記述できるマークアップ式の言語です。
HTMLは、HyperText Markup Languageの略で、文章の中に記述することで画像、リスト、表、リンクなどさまざまな機能を記述して設定出来ます。
またCSSでレイアウトなどのデザインを調整したり、JavaScriptで表示後に動作を加えたりすることができます。
メモ帳などのテキストエディタでhello.htmlという名前で以下のコードを記述したファイルを作成します。
<!doctype html> <html> <head> <title>Hello</title> </head> <body> Hello </body> </html>
作成したsample.htmlをブラウザで表示します。
CSSは、スタイルシートと呼びますが、CSSでHTMLタグの要素のレイアウトを設定できます。
たとえば、HTMLの文字の開始は通常左からですが、CSSを使用して右寄せすることができます。
<!doctype html> <html> <head> <title>Hello</title> <style> body { text-align:right; } </style> </head> <body> Hello </body> </html>
作成したsample.htmlをブラウザで表示します。
JavaScriptを組み込んで、レイアウトの設定を行ったり、ユーザの操作に伴って動的に変更したりすることができます。
以下は、HTMLの表示色確認ツールです。JavaScriptを使用してこのようなツールも作れます。
入力フィールドに設定した色を背景に設定され、HTMLの表示色を確認できます。
HTML入門知識について見ていきます。
Webページをインターネットで公開する場合は、HTMLファイルをWebサーバプログラムが動作するサーバーに配置します。 そうするとWebサーバプログラムが、ブラウザからの要求に応じてそのファイルのHTMLコードを読み込んで送信してくれるようになり、クライアント側でWebページが見れるようになります。
WebサーバプログラムとPHP、Ruby、Java言語のプログラムと連携すれば、HTMLファイルを配置しなくてもこれらの言語で記述したプログラムがHTMLコードを作成することができます。
このようにサーバサイドで動くプログラムのことをサーバーサイドプログラムとかバックエンドと言ったりします。 それと対比して、ブラウザ側にコードが渡ってから動くHTMLやCSS、JavaScriptはフロントエンドといいます。
なお、ホームページをWeb公開するためにはレンタルサーバでサーバスペースを借りるなどして公開用のサーバを用意する必要があります。 以下はレンタルサーバを借りて公開する例です。
バリューサーバーでのホームページ公開の仕方を紹介しているページです!申し込みから独自ドメインを設定してWebページ公開までを説明しています。
1993年6月にインターネット・ドラフトとして発表されたものをいいます。
1995年11月にRFC 1866として仕様が発表されたものです。 シンプルなHTMLで、インライン画像やフォームが使えます。
HTML 3.2 は、1997年1月14日にW3C勧告として仕様が発表されたものです。 HTML 3.0は、策定作業中に破棄されました。
HTML 4.0は、1997年12月18日にW3C勧告として仕様が発表されたものです。
HTML5は、2014年10月28日にW3C勧告として仕様が発表されたものです。 動画や音声、グラフィックの描画が可能になりました。 また、今までよりも記述する量がすくなくなりました。
HTMLの書式について見ていきます。
HTMLはWebページの「構造」を指定するための言語(マークアップ言語)です。 Webページ内のコンテンツそれぞれに役割を与えます。
以下はHTMLの記述例になります。
<!doctype html> <html> <head> <title>Hello</title> </head> <body> Hello </body> </html>
書式とは、構文とも呼ばれ、ソースコードの描き方、ある要素にどのような属性が指定できるか、子要素に何を含めることができるか、属性値として何が指定できるかなどです。
HTMLは初めに文書型宣言を記述します。 「<!doctype html>」はHTML5の文書型宣言になります。
HTMLはツリー構造に親要素の中に子要素が記述されます。
HTMLのルート要素はhtmlで、子要素としてhead、bodyが置かれます。 headに基本情報、body日本文に当たる内容を含めます。
HTMLコード自体は開始タグと終了タグで囲んで記述します。このタグで囲まれた部分を要素といいます。
タグは、「<」と「>」で囲まれた要素の記述で、開始タグは「<要素>」、終了タグは「</要素>」のように記述します。
また、HTML内にCSSやJavaScriptを組み込むことにより、レイアウトや動的な描画が行えます。
タグには「<link rel="stylesheet" href="style.css" type="text/css">」の「rel」「href」「type」のように詳細が指定できるようになっています。 この「rel」「href」「type」などのタグに指定する部分を属性といいます。
HTMLの要素(タグ)の属性に指定する数値や色、文字列、URLなどのことを属性値といいます。
開始タグと終了タグで囲まれた中の記述を要素の値といいます。要素には「Hello」のようなテキストや要素を値として記述できます。
HTMLでは、「<」と「>」はタグを表すために使用されます。 ですので、そのまま書くとそこはタグの一部と解釈され、うまく表示されません。
そのような、タグの表示に用いられる記号など特殊文字をHTMLで表示するには、&から始まるコードを用いて表示することができます。
なお、これらのコードは書式の通りに、必ず半角小文字で書く必要があります。
上述のHTMLの特殊文字の表示の例として、表示できないサンプルとそれを表示できるようにしたサンプルを示したいと思います。
HTMLでは、「<br />」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。
これを表示すると以下のようになります。
HTMLでは、「
」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。
HTMLでは、「<br />」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。
これを表示すると以下のようになります。
HTMLでは、「<br />」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。
HTMLの特殊文字、記号の対応の例です。 この他にもさまざまな文字を表示させることが可能です。
記号・文字 | 意味 | HTMLでの表し方 |
---|---|---|
& | アンド記号、アンパサンド | & |
< | 不等号、小なり、~より小さい | < |
> | 不等号、大なり、~より大きい | > |
" | ダブルコーテーション、二重引用符 | " |
' | アポストロフィ | ' |
HTMLのタグについて触れていきます。
HTMLのタグとは、<タグ名>の記号で囲まれた半角の英数字のことをいい、HTMLの要素を記述するために使用されます。 タグを使用してHTMLの要素を記述することでWebページは作られています。
HTMLのタグの種類について見ていきます。
HTMLの見出しは、<h1>~<h6>タグで定義されます。
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し3</h4> <h5>見出し3</h5> <h6>見出し3</h6>
HTMLの段落を定義するタグは<p>です。
<p>段落です。</p> <p>別の段落です。</p>
HTMLのリンクを定義するタグは<a>です。
<a href="https://www.zeakseeds.com">リンク</a>
CSS(スタイルシート)は、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。 以下ではCSSの入門知識について解説していきます。
CSSの記述例を見ていきます。
CSSはHTMLのタグのstyle属性に「プロパティ:値」というように記述します。
<p style="color:red">HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>
ただし、一般的にタグに直接style属性を記述してコーディングするのではなく、HTMLなどの文書ファイルとは別に「.css」ファイルを作成して記述します。
HTMLでCSSを別ファイルに記述する例です。
HTMLファイルではheadタグの要素として、linkタグを記述し、linkタグの属性にて取り込むCSSファイルを指定します。
<html>
<head>
<title>ブラウザに表示されるページタイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>
</body>
</html>
CSSファイルには以下のように記述します。
p { color:red }
CSSの記述例を見ていきます。
セレクタ { プロパティ:値 }
スタイルを適用する対象を指定する部分を「セレクタ」といいます。
設定するスタイルの性質(色や大きさなど)を「プロパティ」といいます。
プロパティに設定する設定値を「値」といいます。
「セレクタ {プロパティ:値}」の設定するスタイルのかたまりのことを「宣言」といいます。
CSSの実装スタイルが共通化されてきています。
ブラウザの種類やバージョンごとに初期状態で適用されるスタイルシートの差を、ある程度統一する目的で用意するCSSファイルをリセットスタイル、リセットCSSなどと呼ばれます。
CSSでは、Webブラウザのデフォルトスタイルを活かしながら、ブラウザ間の表示差異をできるだけ少なくするスタイルをあらかじめ設定しておく場合があります。 このようなCSSファイルをノーマライズと呼びます。以下のCSSが広く利用されています。
参考)https://necolas.github.io/normalize.css/
ホームページのボタンのフリー素材(HTML/CSSコード)です。 カラーコードを調整を変更すれば好きな色のボタンが作成できます。
サンプルです。
CSSのコードです。
a { text-decoration:none; } .button-light-blue { font-size:1rem; background: #0bd; color: #fff; border-radius:5px; padding:10px 15px; } .button-light-blue:hover { background:#0090aa; }
HTMLのコードです。
<a class="button-light-blue">ボタン</a>
この記事の更新履歴です。
スポンサーリンク
サイト内のページ
言語
C・C++
/HTML
/Java
/JavaScript
/PHP
/シェルスクリプト
開発環境
Ant
/Burp
/Eclipse
/Fiddler
/gcc
/gdb
/Git
/g++
/JDK
/JMeter
/JUnit
/Teraterm
/ZAP
技術・仕様
Ajax
/CORBA
/Jakarta EE(旧称J2EE、Java EE)
/JNI
ライブラリ/Framework/CMS
bootstrap
/jQuery
/FuelPHP
/Lucene
/MyBatis
/Seasar2
/Spring
/Struts
/WordPress
Web API
Google Maps
ITインフラOSとミドルウェア
Linux
/Windows
/シェル
ActiveMQ
/Tomcat
/MariaDB
/MySQL
/Nagios
/Redis
/Solr
ITインフラセキュリティ
公開サーバーのセキュリティ
SI
ホームページの作り方
スポンサーリンク
関連サイト内検索ツール
zealseedsおよび関連サイト内のページが検索できます。
IPアドレス確認ツール
あなたのグローバルIPアドレスは以下です。
18.97.9.175
HTMLの表示色確認ツール
パスワード生成ツール
文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。
ここに生成されます。
スポンサーリンク
Copyright (C) 2007-2024 zealseeds. All Rights Reserved. Loarding…