2019年11月26日スポンサーリンク15分間講座を終了された皆様、お疲れ様でした。今回の講座からは本格的にHTMLをマスターしていこうということで始めさせていただきます。今回のテーマ「ブロックレベル要素とインライン要素」となにやら固めのキーワードが書いてありますが、とりあえずは、ちょっとHTMLから離れた話をしたいと思います。こんな感じで書いていますよね。「こんにちは」から始まり、「私は犬です。」と左から右に向かって書いています。改行し、「好きな食べ物は」から「よろしく」まで上から下に向かって書いています。15分間講座でpタグを使ったホームページ作成をちょっとやりましたが、あれも左から右に向かってタグを入力していきましたよね。HTMLを書くときも基本的には同じ方法(左から右へ、上から下へ)と書くのですが、問題は書いたHTMLをブラウザで見たときに発生します。つっこんで説明します。ここで再びpタグの出番です。こんどはpタグを2回使ったサンプルを取り上げてみます。こんな風にpタグで囲まれた文章を2つ、左から右へ向かって書きました。なっているかな・・・あれれ、左から右へ向かってHTMLを書いたのに、上から下へ向かって改行されて表示されているぞ!そうなんです。ここで初めて説明しますが、pタグというタグは数多くあるタグの中でも「ブロックレベル要素」というタグに分類されるタグなのです。ブロックレベル要素とは続けて書いた時に、強制的に改行されて表示されるタグの事を表します!それじゃ、今回のテーマ「ブロックレベル要素とインライン要素」のもう1つの方、「インライン要素」のサンプルを取り上げましょう。ここで初めて紹介しますが、インライン要素の代表格であるspanタグさんにご登場お願いしましょう!!最初の例の「p」の部分を「span」という文字列に変更しただけのサンプルです。なっているかな・・・おお!今度は改行されていません!!!このように続けて書いたときに前後に改行が入らずそのままの横並びでブラウザで表示されるタグの事をインライン要素と言います。さきほどの例ではspanタグを左から右へ向かって2つ書きました。今度は上から下に向かって改行してspanタグを2つ書いてみましょう。こいつを保存してブラウザで見てみましょう。なっているかな・・・あれれ、改行したのに左から右へ向かって並んで表示されちゃったぞ!今回の例のように「左から右へ向かって書く」または「上から下へ向かって書く」場合、(※これらの事を「順番に書く」ということにします。)インライン要素はHTMLを順番に書いても、ブラウザで表示させたときには常に左から右へ向かって横並びで表示されるという特徴があります。ここでHTMLのルールを2つ追加しましょう。ほとんどのHTMLがこの「ブロックレベル要素」と「インライン要素」のどちらかに分類されます。自分が書いているHTMLがブロックレベル要素なのかインライン要素なのかしっかり頭で考えながらHTMLを書いていくことが、HTML上達の一つのコツとなります。ところで、さっきの2回目のspanタグの例をよ~く見てください。「spanタグって順番に書くと横並びで表示されるけど、改行して表示させることってできないの?」とか、いろいろ疑問が湧いてきますよね。湧いてください!!これらの疑問についてここではあえて答えを出しません。今後の講座でしっかり取り上げますので安心してくださいね。HTMLは書いた数だけ強くなります。それが血となり肉となり力となるのです。ブロックレベル要素とインライン要素」はここまでにしておきます。次は実際にいろいろなタグをとりあげて、どれがブロックレベル要素でどれがインライン要素なのかということを実例を交え解説したいと思います。お楽しみに!===よろしければ、ポチっとお願いしますm(__)mこのブログの更新情報をTwitterで配信しています。よろしければフォローお願いします!@jugedredfacebookページも運営中です。MEドレッドフリーライター&Webクリエイター。1999年から趣味のホームページ制作を開始。TypeやWordPressのカスタマイズでWeb制作を覚えました。地元の制作会社で5年間勤務して独立。現在は個人事業主としてWeb制作に関することを何でもやってます。LINK:https://html.jugedred.netスポンサーリンクスポンサーリンクお仕事のご依頼お待ちしております。このブログの運営者にお仕事を依頼しませんか?現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。ブロックレベル要素とインライン要素【HTML基礎編】の第1回目です。第1回は「ブロックレベル要素」と「インライン要素」です。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。タグについてもうちょっと知ろう【セキュリティ】パスワードを厳重に管理しよう!「パスワードリスト攻撃」の...検索フリーランスドレッドフリーライター&Webクリエイター。1999年から趣味のホームページ制作を開始。TypeやWordPressのカスタマイズでWeb制作を覚えました。地元の制作会社で5年間勤務して独立。現在は個人事業主としてWeb制作に関することを何でもやってます。画像スポンサーリンクWordPressが高速で動作することで定評のあるエックスサーバーです。このブログはエックスサーバーで動作しています。管理画面も使いやすく、機能も豊富で、初心者にイチオシのレンタルサーバーです。詳細ページ公式ページ国内最大手のASP「A8.net」です。有名商品からニッチ商品まで様々なジャンルの広告を使ってアフィリエイトができます。これからアフィリエイトを始める人にとって、最初に登録したいASPです。詳細ページ公式ページバリエーション豊富な広告主が充実しているバリューコマースアフィリエイトです。初心者向けのアフィリエイトセミナーなどを実施しており、安心して利用できます。登録は無料で報酬は1000円から支払ってくれます。7の「サイトのドメインに属していないメールアドレスが送信元に設定されています。