HTMLの書き方入門 - はじめてのWebデザイン

レッスン内容

• HTML学習の用意①開発環境を用意する【HTMLの書き方入門】

  HTMLを学習するために必要な開発環境を確認しましょう。パソコンに元々入っているソフト・アプリでも制作可能ですが、コーディングに適したエディタを使うとより効率的に制作できます。
• HTML学習の用意②制作するサイトの準備【HTMLの書き方入門】

  本講座では、WebサイトをコーディングしながらHTMLの基礎を習得します。今回のレッスンでは、これから作るサイトを確認して、必要なファイルをフォルダにまとめて制作の準備を整えましょう。
• HTMLのタグとはなにかを知る【HTMLの書き方入門】

  今回のレッスンでは、HTMLの基礎知識である「タグ」とは何かについて学びます。タグの書き方と、開始・終了タグを確認しましょう。
• HTMLの基本書式について知る【HTMLの書き方入門】

  index.htmlの役割とHTML文書（htmlファイル）の基本書式について学びます。実際にhtmlを書きながら、HTMLの構造とhead要素・body要素を確認してください。
• HTMLのhead要素とは【HTMLの書き方入門】

  htmlファイルの上部にあるheadタグの中には、機械（googleやSNS、ブラウザなど）に向けた情報が主に書かれています。head要素の役割と、head内でよく使われる基本的なタグを知りましょう。
• body要素と見出し・段落のタグ【HTMLの書き方入門】

  htmlファイルのbodyタグの中には、Webページとして表示する情報が入ります。最も基本的な、テキストに意味を持たせるタグを書いてみましょう。hタグとpタグを使って、テキストを見出しと段落にわけていきます。
• 文中で使うタグ、リストを示すタグ【HTMLの書き方入門】

  HTMLでは「ここは重要である」「ここは引用文である」など段落内の一部分にだけ意味を持たせるタグもあります。また、段落ではなくリスト（箇条書き）としてテキストをマークアップすることも可能です。リストの作り方やulとolタグの違いも解説します。
• aタグを使ってページにリンクを作る【HTMLの書き方入門】

  表示されている部分とは別のページ、パートに移動させるための「リンク」を設置しましょう。リンクを作るためのaタグ、クリックした際の移動先を示す属性hrefの使い方を解説します。
• imgタグを使って画像を表示する【HTMLの書き方入門】

  imgタグを使ってページに画像を表示させる方法を学びます。表示する画像ファイルを指定するsrc属性、代替テキストを設定するalt属性について解説します。
• ページの構成を示すセマンティックマークアップ【HTMLの書き方入門】

  マークアップ（HTMLタグ）によって情報の意味・役割を伝えることをセマンティックマークアップと言います。今まで作ってきたページにページの構成を伝えるためのHTMLタグを加えて、より機械が内容が把握しやすいセマンティックマークアップを完成させましょう。
• インデント(字下げ)でHTMLをわかりやすく示す【HTMLの書き方入門】

  コードを分かりやすく綺麗に書くために必要なインデント（字下げ）の方法とルールを解説します。特にチームでお仕事をするときには「他の人にもわかりやすい」コードを書けつことも必須。普段からキレイなコーディングを心がけましょう。
• 会社概要の作成と、tableタグを使った表の作成【HTMLの書き方入門】

  会社概要のページをHTMLでコーディングしていきましょう。情報を整理して表示するために表（テーブル）と、tableタグを使って作成する方法を解説します。
• formタグを使ったお問い合わせフォーム作成【HTMLの書き方入門】

  お問い合わせページを作成しながら、フォームの作り方を解説します。コードが長く難しく見えますが、チェックボックスなども簡単に作れますよ。
もっと見る