ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

HTML5、CSS3

 
ホームページが作れれば、クラウドソーシングなどで１万円から５万円程度の案件がこなせます。

スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。

ホームページ作成に必要なHTMLとCSSの基本

HHTML（HyperText Markup Language）は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のこと。

CSS（Cascading Style Sheets）は、HTMLで記述されたWebページの体裁（レイアウト）を指定するための言語のこと。

基本的なHTMLの書き方

  • <!doctype html>

    • 　このファイルははHTMLだとブラウザに説明するための宣言。

  • <html lang=”ja”>

    • 　html要素内で使われている言語は日本語という意味。

  • <meta charset=”utf-8″>

    • 　meta要素はhead要素内に配置し、このページに関する色々な情報を記述します。

    ・文字コード
    ・ページの紹介文（概要文）
    ・ページに関連するキーワード
    ・TwitterやFacebookなどのSNSの情報
    ・作ったソフト
    ・著者
    　今回の場合は、「このページは文字コード utf-8 」と宣言しています。

  • <head></head>

    • 　この中に metaタグ、titleタグの書き込み、スタイルシート(CSS)の読み込み、JavaScriptの読み込みを記入。

  • <body></body>

    • 　文章の本体。

  • <nav></nav>

    • 　ナビゲーションと呼ばれる部分。リンク集の内容を示す見出しやリンクのリストなど。

  • <article></article>

    • 　自己完結する内容を表すセクション。記事の見出しや文章など。

  • <section></section>

    • 　汎用的なセクションを定義する。コンテンツ内においてテーマでまとめられた部分（見出しや文章など)。

  • <header></header>

    • 　まとまりの最初の部分。

  • <footer></footer>

    • 　一般的にそのセクションの筆者、関連ドキュメントへの陸、コピーライトなどの情報。

  • <title></title>

    • 　Webページのタイトル。

  • <h1></h1>

    • 　見出しとなるテキスト。h1からh6まで。

  • <p></p>

    • 　段落。

  • <a href=”#” target=”_blank”>

    • 　リンクを作成。

  • <img src=”./images/sample.jpg” alt=”サンプル画像”<

    • 　画像ファイルのURL.

  • <div></div>

    • 　CSSを適用させる部分で使う。

  • <address></address>

    • 　連絡先。

  • <small><small>

    • 　誤解を避けるための注意書きや警告、法的制限、コピーライトを表す法律用語など。

基本的なCSSの書き方

　セレクタ { プロパティ : 値; プロパティ; 値; ・・・ }

 

HTML & CSS を覚えよう

自分でホームページを作ることが出来たら・・・・。

  • お金が節約できます

    • 　Webデザイナーにホームページ作成を依頼すると最低でも10万円以上の制作費が請求されます。

  • 時間が節約できます

    • 　すぐにコンテンツを更新したい時でもデザイナーにWebサイトのイメージを伝えるのに、打ち合わせが必要になり時間がかかります。

  • 副収入が得られます

    • 　ホームページを作るスキルを活かして、クラウドソーシングで仕事を探して副収入をえたり、お店や企業から仕事を受注して収入を得て独立することも出来ます。

 

あわせて読みたい記事

コメントは受け付けていません。