Loading...
Loading...
ホームページ制作、ランディングページ制作の制作実績多数！
WEBマーケティングのことなら株式会社ロックビルにお任せください。
投稿日:2019年02月17日
近年では様々な業種の企業の方がプロモーションやマーケテング活動でWebを活用する機会が増えています。専門職の方以外も「Web担当方」となる方が増加してきました。
そこで、今回はWebの知識がほとんどない方が制作会社へ制作依頼をする際や、Webに関連する仕事を任せられるようになった場合に、最低限知っておきたい知識についてまとめてみました。
Webページは様々なプログラミング言語から作られています。
プログラミング言語とはコンピューター言語の一種で、プログラムを記述するためのものです。
「人間とコンピューターとの共通の言葉」と覚えておけばわかりやすいと思います。
プログラミング言語を使用することによって、コンピューターにどんな表現をすか、どんな意味なのかを伝えることによって、動作を指示をしたりすることが可能になります。
今あなたが見ているような、ブラウザのウインドーに現れているページのことを『Webページ』と言い表します。
Webページが結合して一冊の本のようになっている、Webページの集合体を『Webサイト』と言い表します。
Webサイトを一冊の本とたとえるなら、本の表紙に当たるものが『トップページ』と言い表します。
また、目次にあたるページを『サイトマップ』と呼びます。
Webサイトには、お問い合わせができる機能や、投稿ができる機能を持っていたり、情報発信者と閲覧者がオンライン上でつながる役割を持っているケースがほとんどです。
例を挙げると、ウィキペディアやブログなどという理解でよろしいかと思います。
基本的にはWebサイトと同じ言葉と捉えて良いかと思います。
ホームページと呼ばれるのは、企業サイトや自己紹介サイトなど『わたしたちの〇〇を紹介するページ』と理解していただければと思います。Webサイトとホームページの違いは、人により理解が異なる部分もあるため、深く考える必要はありません。
『Webページ』『Webサイト』をまとめて『ホームページ』という、ワードが使われるケースもあります。
インターネット上で公開されている、Webサイトのが大抵の『HTML』という言語で成形されています。
HTMLとは“HyperText Markup Language”の略称で、Webページを形成する言語です。
『head要素』『body要素』を含み、Webページの文章構造を指定するものとなります。
わかりやすくにいうと、『ブラウザにこの文書はこのような意味を持っていますよ』と伝えるための言語です。
詳しくはWebページで右クリックして、『ページのソースを表示』という項目を選択すると、Webページの構造を確認することができます。
以下、ROCKVILのホームページのソースを元に、HTMLの基本的なをタグを1つずつ説明させていただきます。
<!DOCTYPE HTML>
<html （省略）lang=”ja” （省略）>
<head>
（中略）
<meta （省略）charset=utf-8″ （省略） />
（中略）
<title>ホームページ制作・ランディングページ制作なら株式会社ロックビル｜ROCKVIL inc.</title>
（中略）
<meta name=”description” itemprop=”description” content=”株式会社ロックビル(ROCKVIL)は、東京都にあるWeb制作、Webマーケティング、Webコンサルティングを主体としたセールスプロモーションの会社です。ホームページ制作やランディングページ制作を得意としており、制作後の広告代理運用やWebサイト運用支援を行っております。” />
（中略）
</head>
<body class=”home blog”>
（中略）
</body>
</html>
『文書宣言』と呼ばれるもので、HTMLの文書であることを示すルールになります。
Headタグは、この文書に対する情報について示されるタグです。
終了タグまで囲われた部分が、この文書の情報となります。
また、Headタグに書かれた情報はブラウザでWebページを見た時には表示されません。
charset属性は文字コード決めるもので、文字コードがUTF-8であることを決めています。
また、mataタグは閉じタグのないタグです。
titleタグはWebページのタイトルを示し、ブラウザで表示した場合のデスクトップ上に出てくる長方形の領域のタイトル部分の文書を指定しています。
head要素には多くの種類のダグを入れることが可能ですが、サイト設計において大事なってくるのが、mataタグです。
description(説明)とはこのWebサイトの説明であるということを、content属性にその説明文のテキストを入れます。
description内に書き示されている、言葉はSEO対策として重要です。
『ここまでが文書に関する情報である』というhead要素の終了タグです。
body要素の開始タグです。(classについては後ほどご説明をさせていただきます。)
body要素は見出しや段落について決めているタグで、ソースを見ると見出しやリンクがが表示されていることがわかります。
bodyの終了タグです。
ソースの最後にhtmlの終了タグがあります。
以上がhtmlの基本的なタグの構成になります。
ここで一つ疑問が生じるかと思います。
HTMLはWebページを形成する言語です。
ということは…デザインやレイアウトはHTMLでは変えられません。
レイアウトやデザインをコントロールをするための言語を紹介させていただきたいと思います。
CSSとは“Cascarding Style Sheets”の略称で、HTMLと組み合わせてWebページを作成するために使う言語です。
HTMLがWebページを形成する言語に対し、CSSは文書のカラーや大きさ、レイアウトなどのデザインをコントロールするための言語です。
HTMLとCSSは独立した別々のものなので、関連付けたいときにはHTML上のタグの中に指定を する必要があります。
例えば、ROCKVILのWebサイトのホームページのソースを見ると、タグの中に <link rel=”stylesheet” media=”all” type=”text/css” href=”https://rockvil.jp/wp/wp-content/themes/rockvil/style.css” /> とあります。
上記の記述は、『この文書に関して、リンク先のCSSファイルを適用させる』という指示をしています。
このように関連づけをしていくことで、HTMLで定義した文書構造にCSSで記述したデザインが反映されるようになります。
headタグの中にclassという属性があります。
これは『セレクタ』というものの一種で、セレクタとはグルーピングのことを指します。
例えば<body class=”xx”>という場合であれば、CSS上でxxと名付けられたデザインのグループをbodyタグに適応させるということになります。
class属性を使うことで、同じコードを何度も書く必要がなくなるのでとても利便性が高いです。
class属性とは別に、id属性というものがあります。
class属性は文章内で複数使うことができますが、id属性は文章内で１度しか使うことができません。
まずは、スクリプト言語とはなんなのかの前に、上記で紹介したHTMLとCSSはどの分類の言語なのかをご説明させていただきます。
HTMLは、文書をタグ付けする『マークアップ言語』というものに分類されます。
CSSは、デザインをコントロールする『スタイルシート言語』というものに分類されます。
それに対し、Webページやアプリケーション内で動きをを指示するためのプログラミング言語のことを『スクリプト言語』と呼びます。
スクリプト言語にはさまざまな種類が使用されています。
今回は一般的なスクリプト言語である、JavaScriptについて大要だけを紹介させていただきます。
動作がないWebページに、動作をプラスすることを目的として開発された言語です。
また、JavaScriptをより利便性を高めたライブラリに、jQueryというものがあります。
簡単にいうと、記述が難しいJavaScriptをわかりやすく書くための助けとなるソフトウェアといったほうが伝わるかと思います。
その他のプログラム言語にはスクリプト言語以外にもさまざまな種類があるうえ、毎年のように新しい言語が発表されています。
どのようなその都度にチェックしてみてもいいかもしれませんね。
以上がWebの知識がほとんどない方が制作会社に制作の依頼やWebに関連する仕事を任せられるようになった人が、最低限知っておきたい知識についてまとめてみました。
HTMLについてはすべての要素を記憶する必要はありませんし、WEB担当者の中にもコードが記述できないという方はたくさんいます。
しかし、Webページがどのように構成され設計されているか、それぞれの要素がどのような意味を持っているか、については理解しておくことをおすすめします。検索エンジンからの評価を高めたい方にとっては必須の知識となります。
まずは初めに理解すべきWebの知識として、今回紹介した内容などをご確認いただければと思います。
最後まで、お付き合いいただきありがとうございました。
