title-backcolor

素人の作るHTML&Wordpress

Coder and BiginnerCoder and Biginner

getElementById(

Let's make a site!

— 素人でもサイトは作れる!—

ソースを見ると、気が遠くなりそう・・・・。でも、ちょっとした根気があれば簡単なサイトならすぐに作れるようになります。そんな簡単な事を、書いていこうと思います。

サイトの構造

2014-03-09

インターネットエクスプローラー(IE)を使っている場合は、まず Google Chromeをダウンロードして使いましょう!IEは、HTMLを独自の解釈で表示してしまうので、うまく表示されなかったり、CSS3にまだ対応できていない状況だから・・というのが理由です。

1.基本的な事

どのサイトでも、どこかリンクの貼っていない所を右クリックして「ページのソースを表示」にすると、新しいwindowが開いて、ソースが表示されます。
難解な文字が並んでいますが、慣れてしまえば読み解く事ができます。
<>で囲まれているのがタグ。一番の上のDOCTYPE HTMLは、HTML5だよと言う事が宣言されています。
2行目の<html>は、ここからHTMLで書かれているよという宣言です。タグはほとんどの場合開始タグと終了タグの対になっています。なので、ページの一番下までスクロールすると、</html>があり、HTMLはここまで!ということになります。

htmlの中身は、大きく分けると二つです。

<html>
<head>
-------省略------------
</head>
<body>
-------省略------------
</body>
</html>

headの部分とbodyの部分です。それぞれ、開始タグと終了タグがあります。

headの部分は見えません。見えているのはbodyの部分だけ。
headの部分は、そのサイトの基本的な事が書かれています。「言語は日本語だよ」だったり、「cssファイルのリンク先」だったり、「jQueryのリンク先」だったり、「ファビコンはこれを使うよ」とか、「キーワードやサイトの説明」だったり。
その下にあるbodyの部分が、通常見ているサイトの部分です。

2.実際のサイトを確認する

このページのどこかを右クリックしてソースを表示させます。①一番上には<!DOCTYPE HTML>の表示があります。このサイトは、HTML5で書かれている事を表しています。

②2行目の<html lang="ja">は、ここからHTMが始まる事を表し、lang=”ja”の部分は、言語(language)は日本語だと言っています。フランス語だと”fr”、英語だと”en”と表記されます。

③次に3行目からheadの部分が始まります。metaからはじまるタグがいくつもありますが、このメタタグは、検索エンジンにサイトの情報を提供するために書いてあります。
④4行目は、このページがHTML文書であり、文字コードがUTF-8だという説明です。
5行目は、googleのウェブマスターツールを使う場合に挿入します。
⑤6行目の<title></title>には、そのページのタイトルを記入します。よくページタイトルの後にサイト名やブログ名が入っている場合がありますが、必要はないと思われます。
7行目は、スマートフィン向けの機能です。name=”viewport”を記述する事で、表示領域を指定する事が出来るのですが、ここではちょっと割愛。
8行目は、ブラウザのタグにそのサイトのマークを表示させる場合の記述です。タグに表示させるマークの事をfavicon(ファビコン)と呼びます。
⑥9行目は、サイトのデザインを決めるためのCSSシートのリンク先が表示されています。
⑦あと必要な部分は、63行目と65行目。63行目がこのページの説明で、65行目が検索してほしいキーワードが記述されています。

headの部分で最低限必要なのは①から⑦です。

bodyの部分ですが、HTMLでずらっと記述していき、それをCSSでデザインしていくって感じです。HTMLの記述が同じでも、CSSが変わればデザインは変わるという便利さです。bodyの部分に関しては、次回、簡単なサイトを作って確認していこうと思います。

—Comments—

何かあれば、メッセージをどうぞ

Up