A DIAR

2012年


1月15日
  1. No.1 HTMLでホームページ
  2. No.2 文字表示
  3. No.3 ページをレイアウト
  4. No.4 箇条書きやリスト
  5. No.5 表組みへ
  6. No.6 画像・音楽・映像・表示する
  7. No.7 ファイルをリンクでつなぐ
  8. No.8 ページ全体の部分を簡単な配置分け
  9. No.9 余白と水平線作るマージンはこちらも
  10. Bistro会社ここまでで完成サイト👍

👀 やるべき項目 No を選択 してください

HTMLでホームページ
No.2  Top Page
文字表示

htmlファイルをプラウザ表示する
　　　＜html＞タグ内容を囲む、＜body＞表示したい内容を囲む、＜p＞段落(paragraph)余白します、＜div＞要素グループ化余白なし。
　　　pタグ内に全角の文字列を入力する、フォルダを開きindex.htmlとファイル名入力して保存する。
見出しを作る 　　　
　　　＜＞で囲まれている、タグ内に h1 から h6　6段階の見出しランク順に記述する、文字の大きさはスタイルシートCSSを使用する。
文字を太くする
　　　＜b＞タグを使用する、＜em＞は強調 、＜storong＞タグは より強調する。
斜体で表示
　　　＜i＞イタリックのiを使用、＜em＞は強調で斜体


　　　＜p style="font-style:italic"＞またcssのfont-styleプロパティでの斜体(イタリック体)＜/p＞


記号 空白表示 　　
　　　＆#133; …　 　　 ＆hearts; ♥　 　　 ＆diams; ♦ ＆emsp; ≪　weblan3.com 参考サイト  ≫
下線を引く
　　　＜ins＞更新内容を記述するとき、＜del＞削除線を引く、＜ins title="更新タイトル記述"datetime="2020-07-04T00:00+09:00"＞
　　　最後に記述されている+09:00は日本時間を表す。→_→ ok
注釈文字小さくする
　　　＜small＞文字を小さくするが注釈以外使用しない、smallタグで囲まれた文字をさらにsmallタグで囲むとフォントサイズが2減ります。

＜p style="font-size: 15px">～＜/a>で文字の大きさを変える。

　
文章を途中文中で字を大きくするには ＜span style="font-size:2em;color: blue">大きく＜/span> となる。
＜big>～＜/big>で文字を大きくする事ができます＜big>＜big>～＜/big>＜/big>で２増すしかし古いやり方みたいです。

No.3  Top Page
ページをレイアウト
  ■CSS #sample, p.sample{ padding: 1em; line-height: 2; width:900px; background-color: #e6dfdf; } 
 ■HTML＜p class="sample" style="text-align:start;">文章のタグ・＜b>段落・改行・仕切り線・
          ＜/b><p>タグと　<div>タグ余白の違い＜/p>

文章のタグ・段落・改行・仕切り線・<p>タグと　<div>タグ余白の違い。
ここから文章を書いていくと、どのよ うな形になるか、今日の新聞記事を買いいてみる。
菅首相初の所信表明、
 第２０３回臨時国会が召集されました、就任初めての所信表明演説を行い、温室効果ガスの排出量を2050年までに実質0にする目標を新たに打ち出した。 「行政の縦割り打破」等改革姿勢を強調し、9月の自民党総裁選で公約シタデジタル庁の創設や不妊治療支援、携帯電話料金引き下げの実現に意欲を示した。

ここに文の段落を<p>タグで書きました、回りに余白があります。

同様に文の段落を<p>タグで書きました、回りに余白があります。

こちらに<div>タグで書きました、下にある別のdiv 間隔なく見えます。text-align:start;
こちらにも同じに新聞の記事を書いてみます。
「新型コロナウイルス対策と経済に両立 」にもこだわる姿勢を見せた検査能力や「来年前半までにすべての国民に提供できる数量」のワクチンの確保を表明した。一方アベノミクスの承継を明言し、持続化給付金や消費喚起策[Go To キャンペーン]などを挙げ「躊躇なく、必要な対策を講じていく」方針を示した。         　
同様に別の<div>タグで書きました、行がくっついて余白がなく見えます。style = "text-align:center;"
　　　

こちらtext-alignの行での使い方 上の文章、最初行は値：start　、他はセンタリングしてあります

<hr>タグで仕切り線ができます--

<p>タグ内で<br>タグで改行してみました、
回りの余白はどうですか。

こちらに<div>タグ内に<br>タグで改行で書きました、
  余白が少なく見えます。あまり違いはないようです

こちら、text-alignの行での使い方 上の文章、行はセンタリングしてあります

CSSで行間

CSSソース 
p.sample1 {line-height: normal;}
p.sample2 {line-height: 15px;}
p.sample3 {line-height: 1.5;}
p.sample4 {line-height: 2

  1. 春はあけぼの。やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。

  2. 夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなどほのかにう ち光かりて行くもをかし。雨など降るもをかし。

  3. 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねてたるが、いと小さく見ゆるはいとをかし。日いりはてて、風の音、虫の音などいとあわれなり。

  4. 冬はつとめて。雪の降りたるはいふべきにあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭もてわたるもいとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし。