cocomaru-coco’s blog

インプットしたことをアウトプット

初心者がブログを装飾しながら書いてみたら日が暮れた【HTMLとCSS】

ブログ初心者ここまるです。

 

初心者がブログ運営について初心者視点で書いてます。よろしくお願いします。

※この記事は目次を設置していないため、目次へボタンで上に戻ります。

 

前回初めて記事の装飾というものをしてみました。

(色付きのアンダーラインだけはすでに試してみてましたけどね)

 

⇩こちらの記事です。

cocomaru-coco.hatenablog.com

 

知識もなければ慣れてもいないせいか、朝から始めて夜までかかりました

(疲れて途中で休んだりもしましたけど😂)

 

内容はまだまだ稚拙ですけれど、装飾ありの方が読みやすいと言われているのがなんとなく分かりました。

実際に自分でやってみると理解が深まりますね。

避けて通れないHTMLとCSS

 

私ははてなブログで書いていますが、用意されている機能を使って書けばある程度のことは知識がなくてもできてしまいます。

ですが、それ以外のことをしたくなるとどうしても必要になってくるのがHTMLとCSS

 

そしてこのHTMLとCSS

私のような初心者には初めて向き合う相手ということもあって、何をするにも正解不正解が分からないので毎回ドキドキものなのです笑

 

ちょっとでも違うことをすると崩れてしまったり、どこを直せばいいのか検討もつかず悪戦苦闘。

これもやり続ければ慣れるんだと思いますが、怖いし正直疲れます笑

 

CSSが私にはさらに怖くて、間違って消してしまったらあっちもこっちも総崩れすると思うと、できればあまりいじりたくない笑 

コードが増えてくるとよけいに触りたくないです笑

HTMLとCSSがなんなのかを知る

そこで自分が向き合っている相手がなんなのか知るべきだと思い、さらっとですが調べてみました。

冷静に考えたら、相手が何者か分からないのに向き合うも何もないですよね笑

 

確かにWordPressの時も実際に触ると触らないでは、どんなもんなんだろう?感や恐怖心の度合いが違いましたね。

 

HTML
  • HTMLタグというものを使って文章の構造をコンピューターに指示
  • 見出しや段落、画像の挿入やリンクの挿入などを指定する言語

 

✏HTMLタグ→ <h1></h1>や<p></p> など100種類以上もあるそうです。

 

少し勉強したのでこれの意味が分かるようになりましたが、以前は可愛い顔文字にしか見えてませんでした笑



CSS
  • 文字の色や大きさ、背景や配置などの見た目を設定する言語

 

コードを入れると見た目が変わるので初心者の私には魔法のように見えます笑

 

私は超のつく初心者なので詳しい説明はここではしません(できません)笑

必要な方は詳しい方のところできちんとした内容を学んでください😊

 

向き合う相手がなんなのか、とりあえずなんとなくでも知っておく、程度です今の私は。


⇧この吹き出しもHTMLとCSSを使っています。

 

こちらのブログを参考にさせていただきました。

poyaran.com

 

吹き出しやアイコンに使っている絵は自分で描きました笑

透過と文字入れはCanvaを使いましたよ。

有名なので使っている方も多いのではないでしょうか。

 

背景の透過があっという間にできて感動しました。

以前スマホアプリで画像をほぼ手動で切り抜いたことあるのですが、えらい違いですね😂


PCでもスマホでも使えるので、スキマ時間にスマホで作業してPCで集中して仕上げたり、スマホ片手に寝っ転がって作業したりできますね。

 

背景の透過は有料プランになるのですが、無料でお試しできるのでぜひ試してみてください。

 

その他にもできることがたくさんあるので、見ているだけでも楽しいです。

アイキャッチを作ったりと私ももっと活用したいのですが、限られた時間でたくさんのことを学ばなければいけないのでなかなか手が回らないのが現状です😂

 

それでは、読んでくださりありがとうございました!