ハイパー初心者のHTMLのお勉強 ～分かりやすい辞書づくり～
こんにちは。乳くさいぱんだです🐼
図書館でHTMLの本を漁って、何とか1日でHTMLの基本を覚えてこの記事を書きました( ﾉД`)
最初って、四角い枠で囲むとか、ページ内のどっかにジャンプするとかできないですよね( ﾉД`)ｼｸｼｸ…
しかも、覚えられない！！！
いつでもコピペできるように、自分が分かりやすい形でシンプルにHTMLをまとめました(* ´艸｀)今後もHTML情報を仕入れたら更新して使いやすくしていきます。
はてなブログだとこんなの覚えなくてもある程度のブログできちゃうんですけどね。。。
でもでも、今日覚えて実際活用できてめちゃくちゃ楽しかった✌('ω'✌ )三
皆さんのお役にも立てば幸いです！
ー目次ー
斜字
太字
字を赤にする
字を四角で囲む
字を中央にする
字を右寄せする
divで挟むとその挟まれた部分が１かたまりに
divで挟んだかたまりに名前をつける
細かい点線の枠で囲む
実線の枠で囲む
二重線の枠で囲む
角が丸い実線の枠で囲む
背景色付きの枠で囲む（黄色の四角）
枠の中に２行以上文字を入れる
枠内の文字を中央にする
行間を変える
フォントを変える(メイリオ)
簡単に字を枠で囲めるようにする
字に蛍光ペンを引く(黄色)
１．HTMLとは
head（そのHTMLファイル自身に関する情報）
＋ body（読者に読んでもらう本文）
＝ html（HTMLの本体）
☆普段みてるWebページのほとんどがHTMLで作られている。
２．HTMLの骨格
<html ...>
<head>
〇〇〇header部分〇〇〇
</head>
<body>
〇〇〇body部分〇〇〇
</body>
</html>
☆最初の<html>でHTMLの文書であることを示す。
そして最後の</html>でHTML文書を閉じる。
☆その中にheaderとbodyが必ず1つずつ入る。
header：その文書がHTMLの文書であること、何の言語を使用するかなど、コンピュータに知らせるための情報。タイトル、キーワード、文字エンコードなど。
body：本文
☆Header部分とbody部分は順序を替えることは不可。
５．箇条書き
<ul>
<li>〇〇〇〇〇</li>
<li>〇〇〇〇〇</li>
</ul>
６．１２３と順序をつけた箇条書き
<ol>
<li>〇〇〇〇〇</li>
<li>〇〇〇〇〇</li>
</ol>
７．空白を入れる（スペース）
「 」通常の半角スペースの空白
「 」通常より少し広めの空白
「 」広めの空白
「 」通常の半角よりも狭い空白
８．字関連
ー斜字ー
<em>〇〇〇〇〇</em>
ー太字ー
<strong>〇〇〇〇〇</strong>
ー字を赤くするー
<span style="color:#ff0000;">〇〇〇〇〇</span>
自分がよく使う色のコード
blue：#0000ff
navy：#000080
orange：#ffa500
yellow：#ffff00
薄いyellow：#fffacd
green：#008000
red：#ff0000
brown：#a52a2a
ー字を四角で囲むー
<span style="border: 1px solid;">〇〇〇〇〇</span>
ー字を中央にするー
<div align="center">〇〇〇〇〇</div>
ー字を右寄せにするー
<div align="right">〇〇〇〇〇</div>
９．枠で囲む
ーdivで挟むとその挟まれた部分が１つのかたまりになるー
<div>
〇〇〇〇〇
</div>
ーdivで挟んだかたまりに名前をつけるー
<div class=”musuko1”>
〇〇〇〇〇 ←musuko1というかたまりになる
</div>
ー細かい点線の枠で囲むー
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
〇〇〇〇〇
</div>
ー実線の枠で囲むー
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
〇〇〇〇〇
</div>
ー二重線の枠で囲むー
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
〇〇〇〇〇
</div>
ー角が丸い実線の枠で囲むー
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
〇〇〇〇〇
</div>
ー背景色付きの枠で囲む（レモン色）で囲むー
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">
〇〇〇〇〇
</div>
ー枠の中に２行以上文字を入れるー
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
〇〇〇〇〇<br />〇〇〇〇〇<br />〇〇〇〇〇
</div>
ー枠内の文字を中央にするー
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; text-align:center;">
〇〇〇〇〇
</div>
１０．囲まれた範囲のスペースや改行がそのまま反映
<pre>〇〇〇〇〇</pre>
１１．画像の表示
<img src="画像が入ってるフォルダの所在" ... />
１２．リンクを貼る
⇩〇〇〇〇〇をクリックするとリンク先アドレスに飛ぶ
<a href="リンク先アドレス">〇〇〇〇〇</a>
１３．自ページ内の指定箇所に飛ぶ
⇩ここをクリックすると飛び先に飛ぶ
<a href="#link〇〇">ここ</a>
⇩飛び先
<a name="link〇〇"></a>
１４．読者になるボタン（はてなブログのみ）
読者になるボタンを入れたい箇所に、
<iframesrc="https://blog.hatena.ne.jp/chichikusaipanda/chichikusaipanda.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
をコピペ
１５．CSSの変更
※ただ、CSSを変更しても、記事の編集の時には反映されてない
ー行間を変えるー
CSSに.entry-content p { margin:0}と入力
⇩
デフォルトだと<p>の上下には0.8行の隙間が空いているのが、隙間が0になって改行しても行間が狭くなる
ーフォントを変えるー
CSSに .entry-content {font-family:"Meiryo","游ゴシック","arial unicode ms",sans-serif; }と入力する
⇩
記事内のフォントが読みやすいメイリオになる
ー簡単に字を枠で囲めるようにするー
CSSに.waku {padding: 10px; margin-bottom: 10px; border: 1px solid #333333;}と入力
⇩
<div class="waku">
〇〇〇〇〇
</div>
とHTMLに入力すると〇〇〇〇〇が枠で囲める
同様にCSSに.wakuki{padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;}と入力
⇩
<div class="wakuki">
〇〇〇〇〇
</div>
とHTMLに入力すると〇〇〇〇〇をレモン色の枠で囲める
ー字に蛍光ペンを引く(黄色)ー
CSSに.keikoupen{background: linear-gradient(transparent 60%, #ffff00 40%);}と入力
⇩
<div class="keikoupen">
〇〇〇〇〇
</div>
とHTMLに入力すると〇〇〇〇〇に黄色の蛍光ペンが引ける
