東京のWeb制作会社LIGLIGならできるおもしろいこと。LAMPインフルエンサーマーケティングマネジメントマーケティング人事戦略ビジネススキル採用情報メディア掲載情報ニュースリリースイベント情報Web制作Web担当初心者がまず知っておきたいHTMLやCSSに関する基礎知識【実例付き】2014.10.09Web担当初心者がまず知っておきたいHTMLやCSSに関する基礎知識【実例付き】LIGブログ編集部2014.10.09Web制作シェアこんにちは、LIGブログ編集部です。最近ではさまざまなプロモーションやマーケティング活動などでもWebを活用するようになり、専門職の方以外も「Web担当者」となる方が増えてきました。いえ、アクセス解析や広告出稿などをメインに担当するような方から、簡単なサイト更新であれば全て対応されるような方まで、その職務範囲はさまざまだと思います。そこで今回は、Webの知識がほとんどないまま初めてWebに関連する業務を担当することになった人が、最低限知っておきたい基礎知識についてまとめてみました。業務上Webに関する知識は必要ないという方も、普段見ているネットの仕組みはこうなっているのか、と確認の意味でご覧いただければと思います。▼目次Webページの仕組みWebサイトの構造HTMLのタグCSSについてid属性スクリプト言語Webページの仕組みWebページはさまざまなプログラミング言語から作成されています。プログラミング言語とはコンピュータ言語の一種で、プログラムを記述するためのものです。「私たち人間とコンピュータの共通の言語」と考えると分かりやすいかと思います。プログラミング言語を用いることによって、コンピュータにどんな意味であるかを定義付けたり、動作を指示したりすることができるようになります。Webページとは、以下のように定義されるものとなります。Web)システムを使ってインターネット上で公開されている文書。Webブラウザに一度に表示されるデータのまとまりで、テキストデータやHTMLによるレイアウト情報、文書中に埋め込まれた画像や音声、動画などから構成される。インターネット上では本のように複数のWebページをひとまとめに公開するのが普通で、そのようなWebページのまとまりをWebサイトという。Webサイトは、本の表紙や目次に当たるトップページ(ホームページ)とそこからリンクされた他のWebページで構成される。出典:IT用語辞典Webページ、Webサイト、ホームページなどの違いをまずはおさえておきましょう。現在インターネット上で公開されているWebサイトのほとんどが「HTML」という言語で作成されています。Language”の略称で、Webページを作成するための言語です。「head要素」「body要素」を含み、Webページの文書構造を規定するものとなります。その基本的な構造図は以下のとおりとなります。見出しや段落などWebページWebページWebページなお、Webページ上で右クリックし「ページのソースを表示」という項目を選択すれば、そのページの構造を確認することができます。HTMLのタグ以下、LIGのホームページのソースをもとに、HTMLの基本的なタグを1つずつ説明したいと思います。content=”株式会社LIG(リグ)は東京都台東区でウェブサイト制作を行うスペシャリスト集団です。ホームページ制作、システム開発、ウェブマーケティング、リスティング、SEO対策などのお仕事を承っています。副業として、日本初の『セミの抜け殻販売サービス』を展開したいと考えています。html>「文書宣言」と呼ばれるもので、HTMLの文書であることを表す決まり文句になります。dir=”ltr”>HTMLは、という形をとります。langはlanguage、”ja”はjapaneseを表すので、HTMLで言語設定は日本語であるということになります。right、文書の方向が左から右へ続くということになります。このタグで囲われているもの全てのテキストが日本語設定で、左から右へ続くということを表しています。記載に誤りがあったため文章を修正しました。<head>headタグは、この文書に対する情報について指示するものです。終了タグまで囲われた箇所が、この文書の情報となります。/>charset属性は文字コード指定するもので、文字コードがUTF-8であることを指定しています。metaタグは閉じタグのないタグです。[リグ]</title>titleタグはWebページのタイトルを指し、ブラウザで表示した場合のウィンドウのタイトル部分の文書を指定しています。content=”株式会社LIG(リグ)は東京都台東区でウェブサイト制作を行うスペシャリスト集団です。ホームページ制作、システム開発、ウェブマーケティング、リスティング、SEO対策などのお仕事を承っています。副業として、日本初の『セミの抜け殻販売サービス』を展開したいと考えています。”/>head要素にはさまざまなタグを入れることが可能ですが、サイト設計において重要になってくるのがmetaタグです。descriptionとはこのWebサイトの説明であるということで、content属性にその説明文のテキストを入れます。description内に記載されているワードは、SEO対策として重要です。</head>「ここまでが文書に関する情報である」というhead要素の終了タグです。id=”special46”>body要素の開始タグです。(idについては後ほど説明します。)body要素は見出しや段落について指示するタグで、ソースを見てみると見出しやリンクが並んでいることがわかります。</body>bodyの終了タグです。</html>ソースの最後に、こちらのhtmlの終了タグがあります。以上がHTMLの基本的なタグの構成になります。Sheets”の略称で、HTMLと組み合わせてWebページを作成するために使う言語です。HTMLが文書構造を定義する言語に対し、CSSは文書の色や大きさ、レイアウトなどデザインを制御するための言語になります。HTMLとCSSは独立した別々のものなので、関連づけさせるときにはHTML上で指示をする必要があります。id=”default_css”>とあります。これは「この文書に関してリンク先のCSSファイルを適用させる」という指示になります。このように関連づけをしていくことで、HTMLで定義した文書構造にCSSのデザインが反映されるようになります。id属性headタグの中にidという属性があります。これは「セレクタ」というものの一種で、セレクタとはグルーピングのことを指します。id=”××”>という場合であれば、CSS上で××と名付けられたデザインのグループをbodyタグに適応させるということになります。id属性を使うことで、同じコードを何度も書く必要がなくなるので大変便利です。id属性は文書内で同じ値のものは1度しか使えません。同じ値を使いたい場合は、class属性というものを使います。class属性に関する記載を追記させていただきました。スクリプト言語HTMLは、文書をタグ付けする「マークアップ言語」というものに分類されます。それに対し、Webページやアプリケーション内で動きを指示するためのプログラミング言語のことを「スクリプト言語」と呼びます。マークアップ言語がほぼHTMLとなるのに対し、スクリプト言語はさまざまな種類が使われます。今回は代表的なスクリプト言語であるJavaScriptについて、概要だけ紹介させていただきます。JavaScript動きのないWebページに、動きを加えることを目的として開発された言語です。JavaScriptをより便利に扱うためのライブラリに、jQueryというものがあります。JavaScriptをもっと簡単に書くためのツール、というのがわかりやすいかもしれません。その他プログラミング言語にはスクリプト言語以外にも多くの種類があるうえ、毎年のように新しい言語が発表されます。どのようなものかその都度チェックしてみてもいいかも知れないですね。一部内容に誤りがありました。お詫びして修正させていただきます。まとめいかがでしたでしょうか。HTMLの1つ1つを全て記憶する必要はありませんし、Web担当者の中にもコードが書けないという人はたくさんいます。Webページがどのように構成されており、それぞれの要素がどのような意図を持っているものか、についてはSEO対策などにも活用できることです。最初に理解すべきWeb知識として、今回紹介した内容などをご確認いただければと思います。以上、最後までお付き合いいただきありがとうございました。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。