Lesson 16「実際にHPを作ってみよう!part1」

この練習には本入部生のみ参加できます。

本入部はこちら

学習概要

今までの集大成!トップページとお問合せページを実際に作っていきましょう!今回はHTMLでトップページを作っていきます。
テキストエディタも今までより優れた「Atom」を使っていきます。

補足

ログインが必要です

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 16「実際にHPを作ってみよう!part1」の内容※SEO用のため読めません

こちらの部活では HTML CSS について学んでいきます。

今回学んでいくのはこちら「ホームページを作ってみよう。

じゃあこれからホームページを作っていきたいと思います後からですねこちらのホームページを作っていきたいと思います。こちらのトップページとですねあとはお問い合わせのページですねを照らすホームを作っていきたいと思います今までですねゴッドイーターというエディタソートを使ってきましたけれども今回からですねもうちょっと高機能なギターソフトを使っていきたいと思いますブラウザからですね URL で Atom . IO といれていただくとページが表示されますこれはですねギットハブというところが作っている無料成田ソフトになりまして Windows の方でも使えますので Windows の方はぜひこちらの方も使っていただければと思いますダウンロードしてですねインストールできましたらこの後もというソフトをちょっと開いてくださいホール友ですね設定だとちょっと使いにくいので見た目を少し変更したいと思います左上のですねあとのというところからメニューをプリファレンスというものを開いていただいてその中のテーマというところをひらいてくださいそうすると言いたいしたいのですね色を変更できますのでどうぞ使いやすい色にですね変更をしてみていただければと思います設定が終わったらですね上のセッティングトヨタ太ウェルカムガイドというタグですねあと左上のウエルカムというタグこれも全部撮りしちゃいましょう続いて前回と同じようにフォルダを作成していきますまたきその名前でフォルダを作成していただいてですね酒どのエリアを開いていただいてこちらのコード変えてみてください今まで行った内容ですけれどもこちら書き終わりましたら保存をしてくださいコマンドとウイスキーで保存ができます保存する時の名前はですね今までと同じように INDEX . HTML で保存したいと思いますね保存の場所は避けろ作成したフォルダの中に保存お願いしますオズワルドですねエディターがインシテミルファイルだということを認識して行動にわかりやすく色がつきますね左の方にですね実際に保存したファイルフォルダが表示されてますので後で確認することができます実際の仕事場でもそうなんですけれどもまずは HTML で文章の構文構造ですねを組んでいきましてその後に CSS で実際の見た目というのを指定していきたいと思いますとのホームページもですね基本的にはこのような構成になってきますまず減ったと言われるまナビゲーションメニューのとかロゴがあるんですねが減ったの部分でトップバーナーと呼ばれる画像がある部分その下にメインのコンテンツがあってその中に Section デコ別れていて about 騙りメリットがあったりって言う形でそれぞれ書かれてます一番下には降ったというものがついてると高校生がま基本的なホームページの構成になってきますのでこれ押してみるでこれから組んで行きますまだトップページをですね H てメールで組んでいきたいと思いますねとの中でもですね減ったと呼ばれる部分ですねこのメニューの部分を実際にしてみると組んで行きますマゾ BODY タグの中にですでお茶の行動変えてみてください書き終わったら保存しましょう保存したらブラウザで表示させてみたいと思いますブラウザで表示してみるとですねこちらのような表示になるかと思います子供中身はどうなっているかと言うとですねヘッダータグというものでまず囲んでありますね減った部分はですねこの減ったタグというタグで囲んであげてて見出し H 1タグでその中に A タグでリンクが入っていますリンクで押せるような形になってますね電話とはどういうものなナビゲーションのタグになりますまメニューのタグですねその中に UL Li 俺でリストのためになりますメニューを作ってあげるという形の合成になりますねいくつかのタグにはですねクラス属性 ID 属性ついてますけれども親の家の家でスタイルシートで変えたいので名前を付けてます俺でヘッダー部分でホームページのタイトルとナビゲーションメニューのアイデアの方は母になります次に画像の部分ですねトップバナナと思いますけれどもお茶の放映してみるで組んでいきたいと思いますた部分井川ですねメインのコンテンツになってきますのでちょっと DIV タグというもので囲んであげましょう俺はデブは汎用的に使えるもので特に役割はないものになりますと中にイメージタグ入れて解体てください 佳境たら保存をしてですね次に感じの画像の準備をしたいと思いますですね上の URL これブラウザに入れてあげるとサンプルのサイトが立ち上がりますのでそっからですね画像の上で右クリックしていただいて画像の保存をしてください保存した画像ですね最初に作成したフォルダこの中にまたイメージフォルダというものを作っていただいてその中に画像を保存していただければと思いますちょっとこちらではですねもう作ってあるのでそのままイメージホルダーを入れてしまいますけれどもそのイメージフォルダの中に画像が入っているな形にしてください画像はですねトップバナー png という形に名前をしていただければと思います俺実際ブラウザでですね表示させてみるとコマンドとあるで更新できますので更新してみるとですね画像が表示されます英語自体の大きさが大きいのでこのような形でちょっと入りきらない形になってますけれども画像の奥様スタイルシートで指定するので今はこのままにしておいてください次にですね about と書かれてる席その部分ですねこちらでしてみる電変えていきたいと思いますラインコンテンツの DIV タグの中にですねこちらの行動変えてみてください書き終わったら保存お願いします保存が終わったらですね実際画面に表示させてみると画像の下の方にですねアバウトと書かれてタイトルがあってその下に文章があるような形で表示されてるかと思いますコードの中身を見ていくとですねセクションというタグでまず囲まれてますねこのセクションというタグですね HL 5から導入されたものになりましてママで HTML 4とかだとリブタグというものを使ったんですけれどもセクションという専用の旅はできましたのでこちらで囲ってあげますねその中に H 1タグでタイトルを入れてあげていいタグで段落を入れてあげるないようになっていますこの B 級なんですけれどもいいタブ一つに全部の文章を入れちゃってもいいんじゃないのーと思われるかもしれないんですが4 P タグというのは役割は段落の役割なりますたので段落ごとで P タグで囲ってあげるというのがあったらしい書き方になりますですね文字が大きいから小さいからで一番高いタグを使うんではなくてそれのちゃんと役割を意識してしてみるを書くようにしてください次にですねメリットと書かれた部分ですね紅茶の部分を A してみるで作っていきたいと思います about を書いたセクションタブのですね下に来ちゃのコードまた書いてみてください書き終わったらですねまた保存をして実際にブラウザで開いてみたいと思いますブラウザで表示させてみるとですね about の下にメリットという形でまた文章が出来上がってるかと思います実際ですねコード見てみますとセクションというタグで囲まれていて愛属性 Class 属性がえスタイルシートのために指定されてます先ほどないように H 1タブタイトルが指定されていてクラス属性 title というものがスタイルシートように名前が付けられていますその中ですね次にですねまたセクションタブでこれ区切られてます出てくるというのはこっからここまでは一つの塊ですよって言うな意味合いなりますので今回はメリットというもので三つのメリットがありますのでそれぞれのひとつずつは固まりになりますのでセクションというタグで区切ってありますてそれぞれに Class 属性というものをつけてありますそれぞれのですねセクションの中身を見ていくと H 2タグというものがついていますねこれはまた見出しですね酒のメリットというのは大きな未来になって中の小見出しという形で H 2と2のオタクですねを指定していますそれに対して P タグで段落があって文章が入ってるとような形は三つ続いてますすぎですねリクルートの部分ですねこちらはテーブルで作られてますけれどもこちらの方を応援してみるでりすさんに組んでいきたいと思います先ほどの下着ですねまたこちらの行動変えてみてください書き終わったら保存していましょうねそれをまたですねブラウザで表示させてみるとこちらのような形になります股下2ですねリクルートというものがあってテーブルができてるかと思いますでは句点とかちょっとついてないですけれどもこちらがテーブルが出来上がっていますように行動見ていくとですね先ほどと同じく Section タグで囲まれていてその中に Table TAKU 富山でテーブルが作られていますで今までになかったのはですね ペットと呼ばれるため後は DVD と呼ばれる多分これが新しく出ていますもう一つですね T フットサル何ていうものもありますこんなものですね何かと言うとですね貞風呂の中でまた減ったボディとフッターという形で三つ山セットに分けることができるんですねこのテーブルましょうにもですね見出しのようなものを付けたりすることがありますそういった場合にその T ヘッドというもので見出しの部分囲ってあげて他の部分は D ボディのタグで囲ってあげるそれで使い方もできますね T ヘッドのタグの中を見ていくとですね TR タグという形で一行表を作るようというタグが付いてますねその中ですねこれも今までちょっとなかったんですけれどもお TH タグというものを使っています TD タグではなくていいしたことも使っていますがなにかと言うとこれもですね TT とは違う手表の中のですね項目女なんかに使うものになります同じ音ですね T BODY の中にも TR で一度作ってあってそんな彼に停止という形で項目名があって TD タグで実際の内容というのが書かれてるんでこういう形で作られています最後はですねフッターという部分を作っていきたいと思いますメインコンテンツのですね DIV タグこの下にこの行動ですね変えてみてください俺が振ったと呼ばれる部分ですね巻き終わったらまた保存をしてですねブラウザの方で開いてみたいと思いますブラウザで開いてみるとですね先のテーブルの下の方にフッターでコピーライトという形で文字が表示されてるかと思います行動中身をですね確認していきますとフッターの部分はですね降ったというタグで囲まれてますこれもですね愛してる5というものから導入された新しいタグになりますこの二のタグの中にですね実際に文字が入っていてコピーライトとかされていて泥タブでリンクが指定されていて Web カズのサブロンでこの文字を押すとルーカスのホームページへ飛ぶような形のものになっていますこれですねトップページの HTML としての文章の構造というのは関西になります後は時間指定メールでおテラスホームの方を作っていきたいと思います