【初心者ノート】HTMLのマークアップを学ぶ生涯の学習ノート人生は学びの旅。旅の記録を残しましょう。ウェブデザイン前回の記事で基本的なHTMLファイルを作成し、コンテンツの文章を入力してブラウザでWEBページを表示してみました。テキスト文章だけしか記述していませんのでブラウザには文章しか表示されず、改行すら入っていません。マークアップすることで、見出しは見出しらしく表示され、段落を分けることで見やすくなります。HTMLで文章をマークアップ見出しタグと段落タグ文章はおもに、見出しと段落に分けることができます。見出しをマークアップするには<h1>~<h6>のタグを使います。<h1>が一番大きな見出しで、hの後ろの数字が大きくなるほど小さな見出しになります。段落をマークアップするには<p>タグを使います。練習ページでは、「シンガポールを楽しもう♪」を大見出し(タイトル)<h1>でマークアップし、文章の内容によって3つの段落<p>を設定します。<h1>シンガポールを楽しもう♪</h1><p>国土の面積が東京23区とほぼ同じくらいの小さな国、シンガポール。</p><p>小さな国ですが、世界中から企業が集まり、とても裕福な国としても知られています。観光資源も豊富で、マーライオン、ガーデンズバイザベイやマリーナベイサンズなどが有名ですね。そのほか、多国籍な国を象徴するいろいろな様式の宗教寺院など、文化的な観光スポットもたくさんあります。</p><p>当サイトでは、シンガポールの魅力をたっぷり紹介します。</p>ブラウザで見てみましょう。<h1>タグでマークアップした見出しは、少し大きな文字(本文の文字の高さの2倍)で太字で表示されています。<p>タグでマークアップした3つの段落は、段落間に隙間があけられました。HTMLファイルだけしか作成していませんが、ブラウザは上記のようなスタイルで飾り付けが行われました。このように、WEBページ作成者がスタイル(飾り付け)を指示しない場合は、ブラウザが予め決めたスタイルを適用します。文字を飾り付ける次はCSSを使って文字の飾り付けをします。テキストエディタを開き、名前をつけて保存でstyle.cssという名前でファイルを保存します。href=”style.css”>に記述したファイル名と合わせなければいけません。保存するときは必ず文字コードを「UTF-8」にしてください。CSSの書き方スタイルシート(CSS)は次のように書きます。値;}セレクタはHTMLに記述した要素(h1やpなど)と同じものを書いて関連付けます。セレクタの後ろには、{}の中にプロパティと値を記述します。プロパティは文字の大きさや色、ボックスの大きさや上下左右の余白などを指定できます。文字の大きさを変えるタイトル(見出し)の大きさを40ピクセル変えてみましょう。タイトルはHTMLのh1要素に記述しました。これをスタイルシートと関連付けるために、CSSには次のように記述します。40px}先頭に「h1」と記述することで、HTMLの<h1>要素と関連付けされます。段落内の行の高さを変える段落内の行間を少し広げてみましょう。行間を広げるためには、行の高さを指定します。段落はHTMLの<p>要素に記述しました。CSSには次のように記述して、HTMLの<p>要素を飾り付けます。2em}2emというのは、文字の高さの2倍という意味です。場合、この指定をしていないとブラウザの既定値として行の高さ1.5emが自動的に設定されます。ここまでをブラウザで表示してみましょう。スタイルシート(CSS)を適用する前後のブラウザ表示を比べてみます。タイトル(見出し)を40ピクセルにしましたので、文字が大きくなりました。段落の行間も広がりました。ここまでのまとめ今回はコンテンツの文章に対し、HTMLで見出し(タイトル)と段落のマークアップをし、CSSで飾り付けをしました。マークアップとは、元の文章の意味ごとに見出し<h1>、段落<p>などのHTMLタグをつけること。HTMLでマークアップした要素(タグ)に対応した飾り付けを、スタイルシートにセレクタを設定して記述する。HSV(HSB)とRGBコンピュータは、色(カラー)を表現する数値化されたデータを処理することで、ディスプレイ表示や印刷を行います。関係WEBページを作る(WEBデザイン)ためには、HTML、CSS、php、JavaScriptの知識が必要です。CSS3の基礎をしっかり学ぶWEBデザインの基本HTML5とCSS3について、実際に練習用ページを作りながら入門者向けにまとめてみたいと思います。HTM...記事を読む【初心者ノート】articleを罫線で囲む前回記事「各要素の配置を調整する」では、HTML要素のボックスの大きさと配置を調整しました。ボックスモデルの概要を説明しました。今回はボックスについても...記事を読む【初心者ノート】HTMLのマークアップ、artcle、header、footer前回記事「HTMLのマークアップを学ぶ」では、見出し(タイトル)と段落をマークアップしました。ボックスの回り込み前回までの記事で、HTMLとCSSのボックスモデルについて説明しました。ブラウザはコンテンツを表示するとき、HTMLの各要素(bod...記事を読む【初心者ノート】スタイルシートでページの背景に色をつける前回の記事「HTMLのマークアップ、artcle、header、footer」まででページのヘッダーと記事、フッターをマークアップしました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。-一人での実車運転開始-お疲れ様です。私は第二段階4時間終了したところです。奈良交通に内定を頂きそのまま入社の予定です。今すごく迷っています。-一人での実車運転開始-お疲れ様です。休日出勤は希望では無いのですね。-一人での実車運転開始-お疲れ様です。-一人での実車運転開始-アドバイス頂きありがとうございます。子供がまだ小さいのですが転職を決意。最初は何とか出来るだろうという感じでしたが、いざ実車教習が始まると教官に怒られて一気に不安が襲ってきました。-一人での実車運転開始-はじめまして。大型2種免許の記事を拝見させて頂きました。私も同じ道を歩もうとしているところです。今のところ実車教習4時間終わっただけなのですが、一人前になれるかとても不安です。