入門この記事では、ブラウザに文字を表示させて、HTMLの基礎について解説していきます。コンテンツの転載は固くお断りいたします。文字コードモバイル対応タイトルbody要素hタグpタグ改行やタブスペースは必要?コードと結果まずは、適当な場所にフォルダを作成して、その中に『main.html』というファイルを用意しましょう。『main.html』を適当なテキストエディターで開き、以下のコードを書き込んでみて下さい。コードの保存が完了したら『main.html』のファイルを右クリックして適当なブラウザで開いてみて下さい。すると、以下のように表示されるはずです(以下の画像はSafariで開いたもので、ブラウザの種類によってフォントや文字の大きさ等が多少異なる場合があります)。タグ文書の構造化HTMLの基本は『タグ』と呼ばれるもので、様々な種類のタグを使うことによって、ウェブページの文字列などを構造的に表現することが可能です。構造的というのは例えばマンションをイメージしてみて下さい。1つのマンションの中にはいくつもの世帯ごとの部屋があり、その部屋の中にはリビング、寝室、トイレ、お風呂場などがありますね。寝室の中にはベッドや衣類ケースが置かれているでしょうし、トイレには便器とトイレットペーパーなどがありますね。HTMLも似たようなイメージです。タグの書き方さて、タグについてですが、『<』と『>』で文字を囲むとそれがタグとなります。『<』と『>』はそれぞれ半角英数字です。先程のコードでタグは『<html>』『<head>』『<body>』『<h1>』『<h2>』『<p>』などがありますね。タグは基本的に閉じるタグもあり、タグの中の文字列の前に『/』を加えると閉じるタグになります。『</html>』や『</body>』などです。タグは作成して閉じるまでが1つの要素となります。上のコードだと1〜17行目が『html要素』で、2〜6行目までが『head要素』7〜16行目までが『body要素』となっています。htmlとheadとbody基本的に、1つのHTMLファイルには『html』『head』『body』の3種類が1つずつ必要です。『head』と『body』は『html要素』の中に配置する必要があります。以下のような書き方はしてはいけません。head要素html要素の中には大きく分けて『head要素』と『body要素』があり、まずはhead要素の中には何を書いていくのか解説していきます。head要素では、そのHTMLファイルの情報や設定値を記述します。HTMLファイルのタイトル、文字コードの種類などです。他にも、ウェブ上に公開されるページであるならば、Google等の検索エンジンによって検索結果に表示するのを許可するのかどうかの設定も可能ですし、また、HTMLファイルに必要な外部ファイルの指定もできます。body要素body要素では主に、ウェブページとしてブラウザ上で描画される要素を記述していきます。この記事のように複数の見出し、見出しと見出しの間に文章を書いたり、表示させる画像ファイルの指定をしたりします。コードの解説では、コードの簡単な解説です。上のコードでhead要素の中には『metaタグ』と『titleタグ』の2種類のタグがありますね。metaタグはメタ情報を記述するためのタグです。文字コードHTMLファイルがどの文字コードで記述されているのかを指定するためには、以下のような書き方をします。上のタグの構造を名前別に記すと以下のようになります。要素名とはタグの名前のことで、タグの中には属性を記すことも出来ます。書き方は、上のコードの通りです。最初に紹介したコードのhead要素の中には2つのmetaタグがあり、1つ目のmetaタグでは『charset』という属性を用意し、その値として『UTF-8』を指定しています。『charset』は文字コードを指定するための属性で、一般的には『UTF-8』を指定すれば問題ないでしょう。以下の1行を加えることで、パソコンであってもスマートフォンであっても、文字等が同じような大きさで表示されるようになります。上の1行が無かった場合、スマホで見てみると以下のような表示になります(Chrome使用)。文字が小さすぎて読めませんよね。上の1行を加えるとどうなるか、下の画像のようになります。読みやすい文字の大きさになりましたね。このように、先程の1行を追加することで、どのデバイスでも適切な大きさでコンテンツを表示させることが可能です。コードの説明はややこしくなるので、また別の記事で解説するとします。現在は、おまじないのようなものだと思って下さい。タイトルHTMLファイルをブラウザで表示した場合に、そのページタイトルを決めるには、以下のようにtitleタグを書きます。最初で紹介した実行結果の画像にも表示されている通り、ブラウザのタブ部分に、titleタグで指定したタイトルが表示されていますね。ブログ等で使用する場合は、その記事のタイトルをtitleタグで指定してあげると良いでしょう。ブログ自体のタイトルとはまた別です。基本的なタグの使い方や種類は別の記事で解説するので、ここでは簡単に紹介だけしておきます。hタグhから始まり、その後に1〜6の数字のどれかがくる場合、それはhタグで、見出しを作る際に使用します。h1が一番大きい見出しで、h6が一番小さい見出しです。pタグpタグで囲うと、それが1つの段落となります。基本的に、段落と段落の間には1行分のスペースが入るようになっています。改行やタブスペースは必要?今までは開始タグや、タグを閉じた後に改行を入れたり、開始タグの前にタブスペースを入れたりしていましたが、以下のように1行でコードを書いても、問題なく表示されます。下の画像は上のコードの表示結果。このようにブラウザでの表示に問題はありませんが、コードの見やすさのために適度な改行やタブスペースはあった方が良いでしょう。[Go言語入門]基本的なデータの扱い方と種類[Go言語入門]コードの中にコードの解説。2017プライバシーポリシーコンテンツの転載は固くお断りいたします。