HTMLを少し学ぶだけで収益化に近づけるかも！？
こんにちは！！
takuchanです。
今回のテーマは「HTMLを少し学ぶだけで収益化に近づけるかも！？」です。
はてなブログを運営していると必ず行き着くところが、
・何かもの足りない
・ちょっとだけデザインしたいな
だと思うんです。
他のはてなブログを見ても、自分と同じデザインのブログがありますよね？
しかし、個性がない。
そこで個性を出すためにHTMLという言語を少しだけ学ぶことで、ブログを少し装飾してみましょう！！
初心者向けに話を進めていきますので、是非とも最後までついてきてみてください！！
HTMLを少し学ぶだけで収益化に近づけるかも！？
HTMLについて
まずは、HTMLっていきなり言われてもわからないと思うので、そこから説明していきます。
HTMLとは・・・
はてなブログでは、HTML編集なるものがあります。
この中の、HTML編集をクリックすると・・・
こんな感じで初心者にとっては目眩のするような、変な画面に行き着きます。
ここを少しだけいじることで枠で囲みを付けたりできるようになります。
タグについて
基本的には、タグというもので囲むという認識でOKです。
この、<p></p>の部分がタグです。
開始タグと終了タグとは・・・
<p>⇦これを開始タグ
</p>⇦これを終了タグ
と呼び下記のように開始タグと終了タグで囲むことで、Webページに表示される。
例）
<p>ここに文字を入力することで画面に文字が表示されます。</p>
見たまま編集で編集されている方がほとんどだと思いますが、それは見たまま編集で書いたことを、Webページに表示されるようにはてなブログがHTMLに書き直してくれているためです。
お試しで今回は線で囲むための方法をご紹介いたします。
カスタマイズ方法
意味まではわからないけど、とりあえずやってみよう！！
HTML編集の中で、試したいものをそのままコピーして貼り付けてみてください！！
※「この中に文字を入力。」を消して、好きな文字を入れてみてください。
豆知識！！簡単コピペ術
コピー・・・コピーしたい部分を選択した後、Ctrl＋Cの同時押し
貼り付け・・・Ctrl＋Vの同時押し
Mac：
コピー・・・コピーしたい部分を選択した後、Command＋Cの同時押し
貼り付け・・・Command＋Vの同時押し
※上記のショートカットキーを知らない人は癖つけるだけで作業スピードも少しだけ違ってきます。
線で囲みたい場合
サンプルコード
実線：
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
この中に文字を入力。
</div>
点線：
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
この中に文字を入力。
</div>
二重線：
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
この中に文字を入力。
</div>
上記三つからどれかを試してみてください！！
もしくは、記事にそのまま使いたい場合はそのまま使っていただいて結構です。
HTML学習本
今回HTMLの仕組みを少しだけ知って、
「はてなブログに囚われず自分でWebページを作れるようになりたいんだ！！」
と志を持った方に必見の学習本があります。
それがこちら！！
HTML演習 HTML5版
HTMLと他の言語との関わり合いや基礎から学びたい方はお勧めです。
Web系のエンジニアを目指す方は、最初にこの本で学習し始めると良いでしょう。
私は実際に学生時代この本を使って勉強し始めました。
 |
価格:2,200円 |
まとめ
初心者の方向けに一から書いていきました。
今回の学習は、
・HTML編集
・タグ
・コピペ豆知識
・サンプルコードでお試し
次回にはHTMLのサンプルコード集みたいなものを作って、紹介できたらと思います！！
ご精読ありがとうございました！！
他の記事の購読、読者登録よろしくお願いします！！
