ショートカットキーで保存を実行すると、ファイル名を決定するためのウィンドウが現れるので、html-day2.htmlと名前を付けて保存します。実際にいろいろなタグを使ってみようこれで、本格的にHTMLを記述する準備が整いました。これから、紹介するタグはウェブページを作るときに頻繁に使われるタグです。タグの種類と役割について理解しながら、要素タグを使ったコーディングに慣れていきましょう。<h1>見出しタグとは記事やページの見出し部分の要素に使われるタグです。<h1>から<h6>まで存在しており。数字が小さくなるに連れて小見出しになります。それでは、実際にhtml-day2.htmlを開いて<body>タグの間にhタグを記述してみましょう。CodePen.0上のウィンドウのResultをクリックすると、hタグによって生成されたそれぞれの見出し要素が表示されているのがわかると思います。一目でわかるように数が大きくなるにつれて、文字サイズが小さくなっていきます。この見出しタグはGoogleなどの検索エンジンがページの情報を収集する際の目印として利用されるタグと言われています。そのため、日頃からページの構成に合わせて適切な見出しタグを使うように心がけましょう。<p>複数行にわたる文章を表示するときにうってつけなタグが<p>タグです。PはParagraphの略で、<p>タグの前後には自動的に改行が挿入されます。以下のように<body>タグ内に<p>タグを使って文章を入力してみましょう。<p>ここは最初の文章です。<p>ここは次の文章です。CodePen.0上のResultをクリックしてみてください。2つの文章が<p>タグによって囲まれているため、html上では改行の記述は一切ないのに、自動的に改行が挿入されて文章が段落構造になっているのがわかります。<img>このコースの1日目でヤフーのウェブサイトを例にだしたことを覚えているでしょうか?実はページ中央に配置されたYAHOO!というロゴは、<img>タグを使って表示されています。<img>タグはその名の通りに画像を表示するためのタグとなります。<img>タグがこれまで紹介したタグと違う点があります。それは、タグに属性を追加する必要があるということです。難しく聞こえるかもしれませんが、とても簡単です。ウェブサイトが以下のような構造だったとしましょう。imagesフォルダに入っている、mountain.jpgという画像を表示させるにはtop.htmlの<body>タグ内に<img>タグを使って次のように記述します。></body></html>ここでよく<img>タグに注目してもらうと、<括弧>の中に別の文字が入っていることがわかると思います。これが、属性と呼ばれるもので要素にたいして情報を追加することができます。src=”images/mountain.jpg”というのは表示させる画像へのパス(道のり)のことです。このままだと画像の実寸サイズがそのまま表示されてしまいます。画像のサイズが画面の幅より大きいと、画像がはみ出してしまいます。そのため、width=”300′′という属性を追加して画像のサイズを変更しています。<a>Googleで検索ワードを入力すると、次の画像のように検索結果一覧が表示されると思います。私たちは、その検索結果の一覧から気になるタイトルをクリックして、ページに移動しています。<a>タグも<img>タグ同様に属性が必要となります。それでは、Googleのトップページに移動するためのコードを書いてみましょう。target="_blank">Googleへのリンク</a></body></html><a>タグの中にhrefとtargetという2つの属性を追加しています。hrefには移動先のページのURLを記述します。target=”_blank”と指定することで、移動先のページが別ウィンドウで表示されます。CodePen.0上のウィンドウのResultをクリックしてみてください。Googleへのリンクをクリックすると別タブでGoogleのトップページが表示されるのがわかると思います。<ol>順序のあるリストを作成する場合には<ol>タグを使います。ヤフーニュースではアクセスランキングの部分に<ol>タグが使われています。このように、リストの順番に意味がある場合には<ol>タグを使用します。それでは、あなたの好きな食べ物ランキングベスト3を<ol>タグで作ってみましょう。<body>タグ内に次のように記述してみましょう。CodePen.0上のウィンドウのResultをクリックしてみてください。<ol>タグの中に、カレーや肉まんなどの各アイテムを<li>タグで囲うだけで、自動的に先頭に番号が振られているのがわかると思います。今日のレッスンはここまでお疲れさまでした。2日目のレッスンはここで終わりです。今日は開発に便利なツールを用意したり、ウェブサイトの作成に欠かせない基本的なタグについて実際に手を動かして勉強しました。次回はいよいよ最終日です。これまで習った知識をもとにオススメの飲食店を紹介するウェブページを実際に作ってみましょう!「自分に本当にできるかな?」と不安になる必要ありません。stepで勉強していきましょう。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。次の記事WordPressテーマ作成に必要なツールを揃えようデザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。