HTMLとCSSの概要について。構造とデザインを担当。

こんにちは、NEOです。記事をご覧いただきましてありがとうございます。

 

これからアフィリエイトに取り組むあなたには、ブログの作成に挑戦していただきます。

 

ブログを作成しなくとも、例えばSNSで稼ぐ方法もありますが、それらの媒体には流行り廃りがありますので、そこに依存するビジネスモデルはお勧めできません。

 

ですので、あなただけの媒体を作ることは、非常に大切です。

 

そして、ブログを作成していく中で、HTMLとCSSの基礎的な知識が必要になりますので、今回は「HTMLとCSSの概要」についてご説明します。

 

Sponsored Link

 

HTMLとCSSの概要

HTMLとCSSは、ホームページを作成するための言語です。

 

「言語」と聞くと、インターネットの知識を持っている方以外は、難しそうに感じられるかもしれません。

 

ですが、アフィリエイトに取り組む上では、基礎を理解していけば十分ですので、ご安心ください。

 

分からないことが出てきたら、その都度調べるようにしましょう。

 

HTMLとは

HTML(エイチティーエムエル)とは、HyperText Markup Languageの略であり、ホームページを作成するために開発された言語です。

 

ホームページの文書構造を分かりやすく定義するため、文書の内容を「要素」というパーツで捉え、それを「タグ」という記号で識別します。

 

※タグ・・ <html> のように要素名を<>で囲んだもの。<html> </html>のように使用する。

 

HTML要素は、「見出し」「段落」といった一般的な文書の構成要素と同じ考え方をしていますので、直感的に理解することができます。

 

HTMLとCSSの概要について。構造とデザインを担当。

 

①html要素(ルート要素)/htmlタグ

HTML文書であることを宣言する

 

②head要素(ドキュメントのメタデータ)/headタグ

文書のヘッダ情報を表す

 

③meta要素(ドキュメントのメタデータ)/metaタグ

文書に関するメタ情報を指定する

 

④title要素(ドキュメントのメタデータ)/titleタグ

文書にタイトルを付ける

 

⑤body要素(セクション)/bodyタグ

文書の本体を表す

 

⑥h1~h6要素(セクション)/h1~h6タグ

見出しを付ける

 

⑦p要素(コンテンツのグループ化)/pタグ

ひとつの段落であることを表す

 

a要素(テキストレベルの意味づけ)/aタグ

リンクを張る

 

table要素(テーブルデータ)/tableタグ

表を作る

 

ol要素(コンテンツのグループ化)/olタグ

順序つきのリストを作る

 

Sponsored Link

 

CSSとは

CSS(シーエスエス)とは、Cascading Style Sheetsの略であり、HTMLと組み合わせてホームページのスタイルを指定するための言語です。

 

HTMLがホームページの文書構造を定義するのに対して、CSSではそれらをどのようにデザインするかを指定します。

 

CSSはスタイルシート(レイアウトを別の場所に定義し、それを構造に対して適用する考え方)の一種ですので、スタイルシートとも呼ばれます。

 

HTMLとCSSの概要について。構造とデザインを担当。

 

①font-size

フォントのサイズを指定する

 

②font-weight

フォントの太さを指定する

 

③color

文字の色を指定する

 

④background-color

背景色を指定する

 

⑤border

ボーダーの太さ、スタイル、色を指定する

 

実は、HTMLだけでも、ある程度デザインすることはできますが、文書構造を定義するための言語ですので、パソコンや検索エンジンに理解されない文書構造になってしまう恐れがあります。

 

また、ブラウザによってHTML要素の表示の仕方が異なりますので、同じHTML文書でもブラウザ毎にデザインが異なる(崩れる)といった恐れがあります。

 

こういった理由から、HTMLは文書構造、CSSはデザインを定義する形で役割分担することが望ましいとされています。

 

HTMLとCSSの使用場面

実際にあなたがHTMLとCSSの知識を必要とする主な場面は、ブログを作成(WordPressを構築)する時です。

 

HTML

WordPressでは、HTMLやCSSの知識をお持ちでない方でも、直感的にブログ記事を作成できる「ビジュアルエディタ」を利用できます。

 

HTMLとCSSの概要について。構造とデザインを担当。

 

ただ、これを「テキストエディタ」(HTMLを直接表示)に切り替えると、<a></a>といったHTMLタグで構成されていることが分かります。

 

HTMLとCSSの概要について。構造とデザインを担当。

 

実作業では、ビジュアルエディタで作成してから、テキストエディタで追加・変更することがありますので、HTMLの基礎知識が必要になります。

 

CSS

一般的に、WordPressのデザイン(テンプレートのデザインバリエーション)はシンプルです。

 

もちろん、それでもブログを運営できますが、他のブログとの差別化を図るためには、デザイン面でも独自性を打ち出していく必要があります。

 

そして、ブログのデザインを変更する際には、希望のデザインを実現するCSSの機能を調べることになります。

 

HTMLとCSSの勉強方法

HTMLとCSSの勉強方法は色々ありますが、まずはインターネット上のホームページやYouTube動画を教材にされることをお勧めします。

 

インターネット上には、とても丁寧に解説しているホームページや動画が山程ありますので、これを利用しない手はありません。

 

また、書店や図書館には、初心者向けの書籍がありますので、あわせてご利用ください。

 

先ほどお話ししました通り、まずは作業に取り組み、分からない部分が出てきた時に、ひとつひとつ着実に理解するようにしましょう。

 

 

この記事が少しでもあなたのお役に立てれば幸いです。

 

ご不明な点などございましたら、いつでもお問い合わせくださいね。

この記事を読んだ方は、こちらも読んでいます。

Sponsored Link

 

コメントを残す

ページトップへ