そろそろwebライターとしての自覚を持とうと思います HTMLの『基本の“き”』

何年もブログを続けていて今更？…多分皆んな、そう思ってることだと思いますが、、、しっかり締め切り日を決めて、もっとちゃんとしていこう！と思っています…(><)｛頑張るゾー(ちょっと小声笑)

ブログを書いていると、CSSやHTMLをちょこちょこ使うのですが、なかなか思い通りにいかないのが現実。。。です。
別にレポートだけで良いからいらないのに... (--)ね ‼

気になって、ついつい色々と調べてしまい、お外は真っ暗になってしまっていたり…、休日の過ごし方はちょっと気になっているところなのです(>～<)

…調べてもすぐ忘れてしまったり、どこにあるか行方不明になったりしてそろそろ限界！！！

ブログ書いてると、よくリアルの知り合いに聞かれるのが、

「やり方教えて！」
「ブログってまず何すれば良いの！」

やってみたいけど、調べるの面倒だし、やってる人から近道教えてもらぉかな～、、、

うん、私も一番最初はそれでした。

LINEやかけ放題なんかない、通話料の高かったあの頃、遠距離のリアル友と、

『どうやったら、お金がかからずに連絡取れるかねぇ』と

試行錯誤して、たどり着いたのがブログでした。

旅行好きな友達が、前からブログをしててきれいな景色のフォトをアップし、私は見よう見まねで育児ブログを始めました。

その育児ブログは、ヤフーブログの終了と共にもう決して見ることはできないけれど、、、

漢方の話とか、少しこのブログにも引き継いでいます！

もし、ヤフーブログやってたよー！漢方薬のエピソード盛り込んでた4人姉弟の育児ブログ見たことあるょ☆っていう方がいたら声かけてくれると嬉しいです(^^)

また脱線してしまいましたが話を戻します。
今までに色々とカスタマイズしてきたものを、備忘録としてまとめておこうと思います。

CSSやHTMLの他にも、あると便利・作業効率がUPする、たくさんあるGoogleアプリのこと、
…開業でつまづいた色々な事などなど…

CSSやHTMLなどプログラミングが何にも分からない私でも、これだけ出来たら
大丈夫的なものをどんどん追加していくのでブックマークの仲間に入れてくれたら嬉しいです(^^)

ちなみに、HTMLは【HyperText Markup Language】の略で、タグ・要素・属性の3つで構成されるマークアップ言語になります。
構成指示を出し、表示したい文章や画像などの情報をWebサイトに表現するために用いられます。

タグは、意味ごとに＜＞で括ります。＜br＞＜hr＞＞のように＜/～＞終了タグ無しで表示できるタグもあります。

要素は、マークアップしたい＜～＞開始タグと＜/～＞終了タグで囲んだ一括りの情報単位です。

属性は、要素の性質を設定するものです。(リンク先の指定など)

~~HTMLとCSSの違い~~
CSSは、【Cascading Style Sheets】の略で、HTMLが文章の構成を、CSSはサイズや装飾を構成します。

HTML基本のき

日記や記事を書くなら知っておいた方が便利と思うHTML。
ユーザー辞書に登録しておくと一発変換で便利です。

<a> タグ　→　リンクを張り付けるときに用います。

<a href=”URL”>リンク先タイトル</a>


<br> タグ　→　改行するとき用います。

<div> タグ　→　グループ化するとき用います。まとまりごとに指示が出せます。

<h> タグ　→　見出し表示のタグでｈ１からｈ６までの見出しができます。

<img> タグ　→画像を表示するタグです。JPG・PNG・GIF・SVGなどの画像形式を張れます。　


<table> タグ　→テーブルを表示するタグ
<table>
<tr style="border-bottom:solid 2px;">
<th style="background-color:#cfab6d;">
<th style="background-color:#cfab6d;">項目
<th style="background-color:#cfab6d;">項目
<tr><th>項目</th><td>1</td><td>2</td>
<tr><th>項目</th><td>3</td><td>4</td>
</table>



項目
項目
項目 1 2
項目 3 4

1行目　項目下のボーダーライン
2～4行目　項目の背景色
5行目～　<tr>から横並びで<th>項目</th><td>1</td><td>2</td>
スタイルを変えたいときには、<th>や<td>のところを
<th style="background-color:#カラーコード;">などに変更すると表示されるようになります。


<p> タグ　→　段落を指定するタグ

<span> タグ　→部分的に指示を出すタグです。文字の大きさを変えたり色を付けたりします。

<strong> タグ　→　太文字

<u> タグ　→　アンダーライン

<hr> タグ　→　横罫線

<center> タグ　→　センタリング

<pre> タグ　→　改行やタグをそのまま表示する



リストタグ

　箇条書き　【・】
　<ul>
　<li>住所<li>
　<li>氏名<li>
　<li>電話番号<li>
　</ul>

数字表示　【 ① 】
<ol>
<li>住所<li>
<li>氏名<li>
<li>電話番号<li>
</ol>

囲み枠
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;">書きたいテキスト</div>


吹出し
<div style="border-radius:10px; background: #ffebf1;margin-bottom:-15px; font-size: 100%; padding: 20px;">書きたいテキスト</div>
<div style="width: 0px; height: 0px; border-style: solid; border-width: 15px 15px 0 15px; border-color: #ffebf1 transparent transparent transparent; margin-left: 30px; margin-bottom: 20px;"></div>
 ↓ が実際の表示です。

	項目	項目
項目	1	2
項目	3	4

囲み枠

ちなみに、CSSになくてもHTMLだけで囲み枠ができました。今まではCSSに色々とパターン登録していたので、CSSの断捨離ができそうです(^^♪

吹き出し

HTMLだけで吹き出しが簡単に！今までの苦労は…(>_<)

吹き出しの三角部分がずれるときは一番目の~~margin-bottom:-15px;~~の部分を調節してみてください。私の場合は最初0だったのを-15でいい感じになりました。サイトによって変わるのかも？
＃から始まる6桁がカラー指示です。色々と自分好みにしてみてくださいね(^^)
カラーの名前を見るのも面白ぃと思いません？…私だけ？ www.colordic.org

はてなブログに登録すると「読者登録」や「ブックマーク」なんかのコミュニティが使えるようになり便利です。
proでなくても無料会員でも全然ブログ書けます(^^)お散歩の日記とか、映画の感想ブログとか、好きなことはみんなに勧めたいものですよね！
楽しく日記を続けられるきっかけにもなると思います。
はてなブログなら簡単に始められるのでお勧めです！