Lesson 17「実際にHPを作ってみよう!part2」

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

本入部はこちら

学習概要

今回はお問い合わせフォームの作成といよいよCSSを使って見た目を整えていきます。
新たに学ぶもの:GoogleChromeの開発ツールの使い方、placeholder属性、フォントファミリー(フォント種類)の変更、Googleウェブフォントの使い方、文字の上下中央揃え

補足

ログインが必要です

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

ログインが必要です

この練習への質問一覧

ログインが必要です

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

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


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


では前回の続きでお問い合わせのページを作っていきたいと思います。


コマンドとえのきで新しいウインドウを開いたらこちらのコードを記入してみましょう心の中身なんですけれども全開帰った行動とですねほとんど同じになりますインシテミルタブ勝手にタブが堤防ディープ勝手でボディ口の中に減ったというタグでナビゲーションですねメニューの項目を作っていますメインのコンテンツの部分があって最後フッタータグでフッターというものがありますここまでの構成は前回と同じですねのコンテンツ部分この中にですね入ってるのが今回新しく追加されたものになりますこちらがお問い合わせの法務部を表示するための技術になります書き終わりましたら保存をしましょう先輩と同じようにですね同じフォルダの中に入れてくださいってパルメラ CONTACT . A しているとしましょうを賜ると行動に色付けがされます作ったインシテミルファイルこれを開いてみるとですね裏技ではこういった形で表示されるかと思いますヘタ部分と呼ばれるタイトルとメニューの部分ですね一番下には copyright でフッターの部分が作られてます最後に真ん中にはお問い合わせのフォームが表示されてますねレコードの中身を見ていくとですねコンタクトと表示されているタイトルの部分のですねあとホーム自転とこれ同じグループなのでセクションタグで囲ってあります前回と同じようにですね ID 属性品開発のホームなのでコンタクトという名前をつけていますでクラス属性というものがついていますで H 1タグでタイトル字体書かれていてその下ここからがホームタブ今まで使ってたのですねホームタグでホームを作っていますその中を見ていくとですね input タグというものでホームが作られてますタイプはテキストでテキストフォームが作られるで placeholder というのが今回初めて出てきたんですけれどもこれ何かと言うと placeholder 属性と言って placeholder に指定した値子可愛いメールこれがですねホームの中に薄く表示されますなのでこのホームがどんな方もなのかってのが分かりやすくなります後はどんな内容を書けばいいのかというのが遅く情報として表示できるような形になってる子のプレースホルダー外してみるとですね表示させてみるとセレナの E メールはなくなってました今まで見たようなホームになってるかと思いますこういう風にプレースホルダーというものでホーム自体に喉右側表示させてですねどんなホームなのかどんな内容書けばいいのかっていうのを細くで表示することができますぷれすおなだはどのホームにもつけることができますのでこのこれ操作つけてもですね実際にホームに包囲されてますけれどもホームの中に文字を変えた時には消えるようになってるので邪魔にならないになってます次にですね name 属性で E メールという名前を子のホームにつけてます Heavy r トヨタぐで開業しています後ろにスラッシュ着いてますけれどもつけてもつけなくても大丈夫です次にテキストエリアというタグでお問い合わせの内容の方ですね作ってますってゴローズローズで横幅縦幅を指定してます同じく placeholder というものでないようという文字を炎中に表示させてます name 属性でコメントという名前をつけていて最後にまた BR タグで改行していますで最後は同じようにインプットを使ってこのタイプをサブミットに指定しているので送信用のボタンが出てきますでネーム名前でホーム画面をサブミットという名前をつけてます valu という値で送信という文字を入れてますメールとボタンの名前が送信という名前でありますこの Value 属性を送るとやれば牡丹庭送るという文字が表示された形になりますこれで HTML の方でのお問い合わせのページは感染になりますこれですねしてみるとしての文章の構造は全て完成になりますのでこれからはスタイルシートを使って文章の今度見た目を作っていきたいと思います熊本 NP で新しくウィンドウを作っていただいて シート用のファイルにしたいので STYLE . CSS という名前でまず空の状態で保存をしてくださいお酒は最初に作ったフォルダの中ですね保存したらですねそのウインドウにまずこちらの行動を変えてみてください CSS は BODY タグ BODY タグの中にある全てのタブに対して全ての要素に対して伝えるをしているな形になっていますこれでまず保存をしてですねこれでブラウザでトップページを表示させてみたいと思いますそうするとこんな感じですね特に前と変わってなさそうですけれども下の方を見ていくとですね北浜の文字がですねマクロだった文字の色が若干ちょっとグレーっぽくなってますどんなスタイルを指定したのかなか弟見ているとまずからというもので文字色を指定してます好きにマージンですねゼロの場合はピクセルとか入れなくてその間零で大丈夫です Excel などの単位は0の場合はゼロといれていただいて大丈夫なのでパディングというのもゼロになってます内側の余白外側の予約ですね実際の画面とちょっと照らし合わせてみたいと思うんですけれどもここからですねこのブラウザについている通路ちょっと使っていきたいと思いますコマンドとコントロールキーと大文字の I と同時に押すと開発ツールというのは出てきますこれですねソースと呼ばれるものをしているので変えた中身ですねタグとかが全部見れるような形になっていますそれぐらいのタグ要素をクリックすると青く表示されてそこのエリアがどこですよっていますこのまは神様ですねちょっと撮ってみたいと思いますそして更新して見るとどんな感じかというとそのボディの要素の部分画像をクリックしてみるとあおくエリアが表示されてますこれが要素のエリアの部分ですねでその外側に赤い枠ができてますこれがマージン余白のエリアの表示できますするの右側ではですね実際にその要素に対してどんなスタイルが指定されてるかというのを見ることはできますスタイルシートの中身は見ることできるんですねその下を見ていくとですねその指定してる要素に対してのマージンパディング後はよその縦幅横幅大きさが見ることはできますか出して開発するというのは使っていけるのでかなり便利なものになってます今回の場合マージンが8ピクセル指定されてますねでデフォルトの状態だとおじいに対してモテ要素に対してまーちんトイレ貸してされてしまってますので画像が横幅いっぱいに表示されないですね今回画像を横幅いっぱいに表示したいのでマージンというのゼロにしてます了解ですねこのボディタオルに対してマージンとパディングをゼロにするのが当たり前になっていますので最初からそういうふうにきるするようにしましょうね最後はですねラインヘイトというものを使ってますがなにかと言うと行間の幅を指定してるものです150%なので文字の幅の1.5倍に増加幅をしてるって言う形になってますね画面のですねほうで見てみるとちょっと分かりにくいかもしれないんですが最初の状態よりも文字の行間の幅が少し広がってるなかったら神ですもうちょっとしたものですけれどもこういったものでした目が結構違ってきたりしますのでごいたところも覚えていきましょう次ですねという花はちょっと大きすぎるのでそれを小さくしていきますこちらの方をまず行動変えてみてください絵描き終わったら保存をして表示させてみたいと思いますととこちゃんが買った家ですね画面の横幅いっぱいまで画像が表示されてるかと思いますが目の奥さんによって画像の大きさかってくるのですねでトップバーナーに対して指定しているのでそれが明治というタグの中の ID 属性トップバナーというところしてスタイルを指定してみてスタイル何かとワイド横幅ですねこの横幅を100%なのでパーセント指定なので画面のサイズに対しての100%なので画面ぴったりしますよというスタイルの指定方法になります次に減った部分部分ですねたえろ指定していきたいのでこちらの行動を記入してみてください書き終わったら保存してですねこうちゃんまた画面で表示させてみたいと思います表示してみるとですねこんな形で英語のタイトルの部分ですねマルイ背景で待っててとはんメニューの部分ですねこちらもちょっと変わってるかと思います仲宮里見て行きたいんですがまず減ったというタグに対してスタイルが指定されてます margin BOTTOM これ酒とのマージンとですね同じなんですけれどもまあ神の舌だけしているような形になってますねへいと高さが200ピクセルとなってます実際見ていくとですねこちらの方に減ったの要素ですねその下に赤い方 指定されてますかなつるのですね左上虫眼鏡のところをして頂くと画面上から実際に要素自体を選択して見ることもできますねツールの右の方で見てみても予想したよ高さが200ピクセルになっていてマージンがしただけ15ピクセルになってます画像との幅をそとつけてます次んですね減ったタグの中の H 1タグ H 1要素に対してスタイルを指定してます出てったタグの中の H 1なのでこれですねタイトルの部分ですレベッカ2と書かれた部分でありますそれで見てみると要素がこういった形ですねの形になってますまだフォントサイズで文字の大きさを指定してますすぎですねフォントファミリーというものを指定してますこれ何かと言うと申しの種類を変えてますデフォルトで文字の種類ってのがあるんですけれどもそれでちょっとデザイン的にあまり綺麗ではないので文字の種類を変えてます本当指定するにはですね本当ファミリーとして表示させたい本当の名前をコーテーションで囲いますかんまぁとして次に表示させたいぽんと一つ目は表示できなかった場合に表示させたい本当次に指定しますという形でいくつも本当指定することはできますねもし全部の指定したフォントがユーザーのパソコンの中になかった場合にはパソコンがデフォルトで持っているフォント表示しますねこの本当ファミリーなんですけれども今指定してるのですね Google のウェブフォントというものになります Web フォントって何かと言うとですねインターネット上からですね本当を読み込んでブラウザに表示させるものになりますなのでパソコン自体にフォントがなかったとしてもですね確実にどのユーザーでも同じフォントが表示されるようなものになります10インターネットですね Google フォントで検索すると出てきますけれどもこういった形でですね本当か色々ありますその中から選んでいただいて表示されているリンクタグをですね使いたい HTML ファイルにコピペしますこちらのリンクタグというものでもう入れてあるんですけれども七味の中のヘッダー部の中にこのリンクタグで読み込んであげますインターネット上のフォント読み込んであげることできるんですねこれは各 HTML ファイルで指定します後は CSS の方でフォントを変えたい要素に対してこのフォントファミリーというものを殺すのはコスプレで入れてあげるそうすると指定した要素に対してフォントが変わるという仕組みになってますたものもありますので二斎場とデザインを変えたいとか言う時にはこう言ったものも使ってみていただければと思いますで次に減った H 1に対してマージン15ピクセルが指定されてますよ見ていただくと赤い枠でマージン15ピクセル外の薬が指定されてますねその次にですね text ALIGN Center となってますこれは本当の並びをしてそうです前店ので中央揃えにしてます今度フロートと会ってレフトとなってますなので要素の位置を左寄せにしてるって言う事ですねフロートを指定した後にですねへいととわいどすというもので高さと横幅を指定してます縦と横同じく150ピクセルですねで一番タワーですねブロックレベル要素になるので問題だと横浜一行文の大きさになるはずなんですけれどもこのワールドスケートを指定することでそのボックスの横幅を縮めてます四角いボックスにしてるところですね四角いボックスにしてさらに float left をすることで左に寄せられると中**になってますこのボックス俄リング20ピクセルが指定されてますねでボックス自体の大きさは縦横とも250ピクセルになってますのでボクスター750ピクセルとですね padding 20ピクセル合わせて全体的に奥さん170ピクセルになってるってことですね小野バイトスケートで指定した大きさというのは padding を含めないのでそこは注意をしてください次にバックグラウンド背景ですね背景色を RGB で指定してますのでちょっと暗くライトグレーぽくなってますねでその次んですねボーダーラディウスというものがあります同じようなのがしたにも二つあるんですけれどもこのボーダーラディウス何かと言うとボックスの角を丸くしてますワイド150ピクセルに対してボーダーラディウスを100ピクセルにしてます例えばそのボーダーラディウスをですね10ピクセルにしたとするとこんな形になります元々四角いボックスですそれに対して背景色がついて角がちょっと10ピクセル丸くなってるな形ですね俺が radius というところになります150ピクセルに対して開くピクセルを指定しているのでそうするとまんまる区成増で下の方がいい武器とってもう一つもずっというものがついてますこれブラウザによって認識されない場合があるのでブラウザごとに認識できるようにスタイルを分けてます同じ未来なんですけれどもそれぞれのブラウザごとに指定してるんですねで最後に LINE ヘイトというものを指定してますこれは前にありましたけれども行間ですねを指定してますで行間を150ピクセルにしてますねそうするとどうなるかなんですけれどもあなたのこの LINE ヘイト取ってしまいますそうするとボックスの一番上に来てますねこれが通常の状態ですねボックス自体が150ピクセルなので同じように LINE 一行かもです250ピクセルにするとボックスの中心真ん中に来ますボックス自体を上下中央揃えにしたい場合は外のボックスと同じピクセル数にライン並走してくださいねといいですね減った減ったの中の H 1の中の A タグに対してスタイルを指定しますそれがこちらですね A タグに対して栄養素に対してスタイルがしてさ内容はですねから文字色を変えてますでもう一つテキストデコレーションというものが俺はですねえータグには基本的にデフォルトでですね下の棒線がついてますか1000ですねただこのままだとちょっとデザイン的にあまりかっこよくないのでテキストをデコレーションなんとすることでテキストに関しての装飾を外すことができますこれでスッキリしましたねここまでしたいと思います次回また続きをやっていきます