こんにちは！
参謀ママ “みー” です。
webデザイン初心者の私がブログを始めて一番最初につまづいたのが
- HTMLって何？
- CSSって何？？
ということでした。
ネットで検索しても、難しくてよく分からなかったんだよね…
何とな〜〜くでもこれが理解出来ていれば
- イメージ通りのブログ
- 読みやすいブログ
- オシャレなブログ
にグンと近付き、何よりブログを書くのが楽しくなります♬︎
今回は、webデザイン【ド素人】ならではの目線で、「HTML」と「CSS」についての個人的解釈を書いていきたいと思います。
あくまで、みーの個人的解釈であることをご了承ください
- １．【超個人的解釈】HTMLとCSSをゲームで例えると分かりやすい
- ２．HTML＝コマンド入力
- ３．CSS＝カスタマイズ設定
- ４．はてなブログにおけるHTMLとCSSは初心者にも優しい
- ５．はてなブログではHTML編集が感覚的に出来る
- ６．少し高度なCSS/HTMLは他のはてなブログユーザーさんに教えてもらおう
- ７．まとめ
１．【超個人的解釈】HTMLとCSSをゲームで例えると分かりやすい
細かい話はさておき！
まずはザッックリとした全体イメージからお伝えしていきたいと思います。
「HTML」と「CSS」ってめっちゃゲームっぽい！
って個人的に思うんです。
あなたは、挌闘ゲームとかFPSゲームとかされた事がありますか？？
私は幼少期には挌ゲー「ストリートファイター」や、最近だとFPSゲームの「PUBG」（荒野行動とかね）などやっていました。
ここでは懐かしの「ストリートファイター」で例えていくよ
実際にゲームをされたことある方だとイメージしやすいと思うんですが、私的にこんなイメージ。
- CSS＝カスタマイズ設定
- HTML＝コマンド入力
・・・は？？
って声が聞こえてきそうなので、説明していきます（笑）
２．HTML＝コマンド入力
たとえば、あの『波動拳』を出したいと思った時、戦闘中に指定された「コマンド」をコントローラーで入力するんですよね。こういうの。
※引用：コマンド | リュウ | キャラクターデータ | CAPCOM：シャドルー格闘家研究所
この「コマンド入力」＝「HTML」ってイメージです、私的に。
ブログ記事の編集画面でコマンド入力したら必殺技が出るっ！！みたいな。
ブログにおける必殺技の例としては例えばこういうの。
- 任意の文字を、好きな大きさ・太さ・色で表示させる
- 任意の文章にカラーマーカーを引く
- 任意の範囲をデザイン枠で囲む
- 会話風の吹き出しを表示させる
この記事にも必殺技（笑）をいくつか使っていますが、メリハリのある画面は文字だらけの単調な画面よりかはいくらか見やすくなりますよね♫
だけど、コマンド入力…苦手だったなぁ…。指ツリそう…ってなりながらやってる技とかあったよ（笑）
あ～めっちゃわかる（笑）俺はやりづらいコマンドは事前にカスタマイズ設定しまくってたけどね。
そう！ブログもそうなんです！
（※注：超個人的解釈です。笑）
３．CSS＝カスタマイズ設定
ストリートファイターでもブログでも、必殺技をいい感じに出す為には事前のカスタマイズ設定が肝…！！
例えばデフォルト設定が「Aボタン＝パンチ」となっていたとしましょう。
でもそれが使いにくいと思ったらカスタマイズ設定で「Bボタン＝パンチ」に変えておけるんですね！ Bﾊﾟﾝﾁ★(っ ˙-˙)つ)oﾟ)∵ｸﾞﾌｧｯ
『戦闘中（執筆中）に○○というコマンド入力をしたら△△の技が出る様に、事前に仕込み（設定）をしておく』
この「カスタマイズ設定」＝「CSS」っていうイメージ。
中には、事前に設定画面で仕込みをしておかないと、執筆中にそもそも出せない技もあったりします。
デザイン性の高いものだと大体そうだね
HTML編集だけで出来るものもあるけど、デザイン性の高いものはCSSで事前仕込みが必要ってことだな
４．はてなブログにおけるHTMLとCSSは初心者にも優しい
HTML（必殺技のコマンド入力）もCSS（コマンドが有効になる為の事前設定）も、どちらもコンピュータ言語。
コンピュータ言語って…あれだよね…？物凄い量のアルファベットと記号が、画面いっぱいにうわあぁぁぁぁっっ！！て表示されてるやつだよね…？
そうそう…。意味わかんなさすぎてゾッとするやつ（笑）
本来であればwebデザイン超素人の私の様な人間が、コンピュータ言語を使いこなすなんてかなりハードルが高いものです…。
だけど、こんな素人でもそれなりにwebデザインを嗜みながらブログをこうして楽しく書けています♫
その秘密はこの２点。
- はてなブログでは、基本的なHTML編集は感覚的に出来るようになっている
- webデザインに詳しいはてなブログユーザーが多数いて、知恵を貸してくれる
私は、はてなブログ無料版とはてなブログpro（有料）どちらも利用しているユーザーですが、これは無料版でも有料版でもどちらにも共通して言えることです。
５．はてなブログではHTML編集が感覚的に出来る
はてなブログの場合、PC版・スマホ版どちらの編集画面でも、簡単なHTML編集であれば感覚的に出来ちゃいます。
例えば、こちらのスマホ版の編集画面をご覧ください。
①見出し（＝ブログ記事中の各章ごとのタイトル）にしたい文章を範囲選択
↓
②「見出し」ボタンをポチッ
↓
③これだけで、選択した文章が「見出し」になります♫
他にも…
- 太字にする
- 文字サイズを変える
- 文字色を変える
などの簡単なHTML編集は、デフォルトで簡単設定出来るようになっています。
こちら、本来であれば以下の様なHTMLコードの入力が必要です。
うわー！出たー！コンピュータ言語！！
厳密には、こういうのはコンピュータ言語で書いた「ソースコード」って言うらしいぞ。
…初心者にはホントにありがたい機能です（涙）
６．少し高度なCSS/HTMLは他のはてなブログユーザーさんに教えてもらおう
慣れてきたらCSSも使ってさらにデザイン性に凝っていくことも出来ます。
…が！！
初心者が自分でコードを書くなんて、かなり気が遠くなる作業ですので、辞めておくことをオススメします！！笑
はてなブログユーザーの中には、webデザインに詳しいユーザーさんがたくさんいらっしゃいます！そして皆さん惜しげもなくCSS/HTMLコードや設定の仕方を公開してくださっており、ググればいっっぱい出てきます！（神〜！(´；ω；｀)
PC版はてなブログの以下ページに「CSSコード」を入力する箇所があります。
私もここに、ブログ全体のデザインを決めるコードや、必殺技を出す為の事前仕込みのコードをたくさん貼り付けてるよ！
もちろん全部他のはてなユーザーさんにネットで教えてもらった情報だけどな
webデザイン初心者が、思い通りのwebデザインをすることは決して不可能ではありません★
個人的に大事だな、と思うのは「検索力」だと思います。
やってみたいwebデザインをきちんと言語化して、ネットで検索して見つけ出すことさえ出来れば大丈夫♬
具体的に、この「参謀ママのヒミツ基地」というブログにどの様なコードを実装しているかは、他の記事も参考にしてみて下さいね。
７．まとめ
改めて今回の記事の要点を整理しておきます。
CSSとHTML。webデザイン初心者には少しハードルが高く感じますが、ゲームに置き換えてわかりやすくイメージを捉えてみましょう♬というお話でした。
- CSS＝カスタマイズ設定
- HTML＝コマンド入力
超初心者の私が、ブログのカスタマイズをやっていて大事だな～と個人的に感じたことがいくつかあります。たとえばこういったこと。
- あまり難しく考えすぎず、とりあえず気になったものは試してみる
- 最初から完璧なデザインを追求しすぎない
- まずは自分が使いやすい必殺技を１つ見つけること
月並みなことしか言ってないけど…こうやって一歩ずつ思い通りのブログに近付けれたらいいかなぁって思います♬
また今後も、「初心者でもこんなカスタマイズが出来たよ！」といったものや「これ出来る様になったら見栄えがよくなったよ！」というものがありましたら、シェアさせて頂きますね！
