HTML・CSSプログラミング基礎・言語の書き方入門

HTMLはハイパーテキストマークアップランゲージと呼ばれ、ブラウザにサイトを表示するために必要な言語です。一番基礎的な言語となっており、見出しや、段落、テキスト、フォントの大きさ、見た目などを設定する機能があります。HTMLは非常に簡単なので30分くらいで学べるものです。HTMLの入門をご紹介します。

人気記事

HTML プログラミング言語・入門

HTMLはプログラミング言語の入門としてもっとも基礎的な言語です。
しかし、ウェブサイトをいきなり作ると言っても、htmlの役割がわかりませんよね。
htmlの役割については下記のようになっています。

  • HTML ・・・ウェブサイトの文書構造を書いたもの
  • CSS  ・・・HTMLで書いた文書構造の見た目を制御する言語
  • JavaScript / PHP  ・・・ 動きやデータを制御するプログラム

文書構造がなければ、ブラウザ・サイトには表示されるものの、検索エンジンにうまく引っかからず、
検索しても自分のサイトが出てこないと言った問題がおきます。

それを正しくロボットに伝えるために必要なのがHTMLです。
一番基礎的な言語といえます。

ツイッターやフェイスブックのようなSNSを開発したいという人は、PHPやRubyといったサーバーサイド言語が必要です。HTMLを覚えたけど次に何をしたら良いのかわからないという方にはこちらを。

HTML プログラミング 基礎とは

2inone0I9A7532_TP_V

HTMLは本当に簡単です。30分もあればある程度覚えることができます。
下記がhtmlの一例になっています。

body, html, head, h1, p

タグは基本的なタグとして覚えておく必要があります。英語で言う英単語のようなものです。

CSS HTMLの基本のbodyタグ

HTMLはそれぞれ入れ子構造になっているため、ページの中身になるものは、bodyタグの中に入れることになります。bodyタグの中にテキストなど構造を書かなければ、Webページには何も表示されません。

ちゃんと表示されない時にはbodyタグの中に書いてあるのかしっかり確認しましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>トップページのタイトル</h1>
    <p>リプレイはプログラミング教育を応援しています。エンジニアが増えて、便利な社会の実現に貢献していきます。</p>    
  </body>
</html>

CSSのHTMLのリンクの外部ファイルの読み込み

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/master.css">
  </head>
  <body>
    
  </body>
</html>

CSSをHTMLに直書きすること

基本的に、CSSは外部ファイル化します。外部ファイルというのは下記の通りに外部にファイルを置いて読み込むということです。

外部化すると読み込むファイル数が増えるので、若干サイトを読み込む速度が遅くなります。ただ、ファイル数がそこまで多くなければ、問題はありません。

こちらが直書きしたパターンです。CSSは基本的に何千行など増えていきますので、
その何千行とあるコードを直書きしてしまうと管理が大変です。

サイトを作るということは長期的に保守していくことになりますので、
わかりやすくするというためにも外部ファイル化することが推奨されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      body {
        background: #f3f3f3;
      }
    </style>
  </head>
  <body>
    
  </body>
</html>

HTML プログラミング言語のこれまでとの違い

GORIPAKU2069_TP_V

HTMLにはXHTML4.01, HTML5という違いがあります。これは以前までは違う文書構造で作っていたものが、HTML5となって文書構造の書き方が変わったということです。

上記している書き方はHTML5の書き方になっています。XHTML4.01で書かれたウェブサイトが見られなくなったということではありませんが、できるだけ最新のHTML5の書き方で作っておくことが推奨されています。

ロボットの読み込み方が変わっているので最新にしなければ、古いものと見なされてしまうからです。

XHTML4 の書き方とは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="キーワードを入力,キーワード1" />
<meta name="description" content="ここにはキーワードの説明文をいれます。" />
<title>タイトル</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
</head>

HTML プログラミング ソフト・エディタ

HTMLを書くときにエディターと呼ばれる入力ツールが必要になります。ブログで言う投稿画面のようなものです。そのエディターツールがあると効率的に、かつ間違うことがなくプログラミングをすることができるのでエディターを利用することをおすすめします。

Atom

atom

Atomは非常にシンプルなエディターながらプラグインなどを用いることによって、様々な機能拡張をすることができます。機能拡張ができてシンプルで使いやすいのにも関わらず、利用は無料ということで人気です

HTMLのみならず他のプログラミング言語やシェルスクリプト実行することができるので、非常によく利用されています。初心者の方から中級者、上級者の方までオススメのエディターツールです

公式サイト:https://atom.io/

Dreamweaver

Adobeというデザインツールやプログラミング補助ツールを運営している会社が出している、プログラミングエディターツールであるDreamweaver。有料となっているために、AtomやSublime textの方が無料ということで人気になってきています。

Dreamweaverは起動するのに時間もかかるので、Atomの方が軽量でおすすめです。

Sublime Text

サブライム

Atomが出てくるまでエディターツールとして一世を風靡していたエディターツールです。Atom同様プラグインで拡張できるので人気でしたが、有料会員になることをアラートで催促されるなど面倒な仕様になっていました。

今はSublime text3まで出ていますが、Atomの方がモダンなエディターとしては人気となっています。

HTML関連のおすすめ書籍

HTMLを勉強する方法として、ネットで勉強する方法や、書籍で勉強するという方法があります。ウェブデザイナーを目指すという方には本格的なプログラミング・Webデザインスクールに通うことをオススメしますが、ここでは書籍をご紹介します。

古い書籍ですが、本当に初心者に優しい基本的なところから解説してくれている書籍です。

HTMLとCSSがある程度勉強できたという方にはJavaScriptを勉強することをおすすめします。JSはウェブサイトやホームページに動きをつける役割を果たし、どのサイトでも基本的には使われています。

JSがあるとユーザーがマウスクリックしたり、スマートフォンでサイトを閲覧するときに便利な機能を作ったり様々なことができます。エンジニアになるにはほぼ必須のプログラミング言語ですね!

初心者向けhtml入門のまとめ

HTMLをかけるようになるのは、エンジニア、デザイナーを目指すための基本です。
エンジニアはもちろん、ウェブデザイナーになりたいという方だと必須ですので、1からものづくりを勉強したいという方にオススメのスクールをご紹介しておきます。