ブログ運営

ブロガーが覚えておきたいHTMLとCSSの基礎

[temp id=2]

ブロガーのみなさん、HTMLとCSSの勉強ってしてますか?

もちろん中には何それ全く知らねぇよ!という方もいると思います

ですがブログを書くにあたって

「ここちょっと地味だな、、、」

「公式サイトのリンクってどうやって貼るん!?」

など思ったことありませんか?

ググってもよくわからんコードが出てくる事態になってしまいます

それらはHTMLとCSSを少しでも勉強しておけば、理解できる範囲なんです

そんなお困りのブロガーさんのために、テックアカデミーでひたすらコードを勉強したわたしが、丁寧に解説していきます!


HTMLとCSSとは?

HTMLとは、書いた言葉の役割をコンピューターに理解させてあげるための言語です

ちょっとよくわからないですよね

例えば、今わたしが書いているこの文章、”HTMLとは、書いた、、、”からはコンピューター上ではパラグラフ(段落)として認識されているんです

しかし、その上の”HTMLとCSSとは?”と書いてある部分は見出しとして認識されており、わたしがテックアカデミーの体験記事のリンクを書けばこれはリンクとして認識してくれます

このようにコンピューターに認識してもらうらめには、コンピューターがわかるような言葉で教えてあげないといけません

これがHTMLという言語なんです

さっきのパラグラフ(段落)だと、

<p>HTMLとは、書いた言葉の、、、</p>

というように実はなっているんです

自分たちでは見えませんが、コンピューターにとってそれが役割を理解する手段になります

対してCSSとは、書かれた文章を装飾する役割を持つ言語です

例えば、すでにある通り赤いアンダーバーを引いたり背景を黄色にしたり、、、などページの見た目を整えてくれます

文章の見た目に何の変化もないサイトはだんだん読むのが辛く、飽きていってしまいます

せっかくいい文章を書いていてももったいないですよね

このように、HTMLはリンクの作成など機能的な面で、CSSはアンダーバーなど装飾的な面で機能する言語になります

どこに書いていくのか

HTMLとCSSはそれぞれ書く場所が決まっています

HTMLは、記事を編集しているとき、右上にビジュアルとテキストと2つ並んでいるのがわかりますか?

そこのテキストモードになります
テキストモードを押すとこんな画面に

ここに英語でいっぱい書いてありますよね

これがHTMLになります

そしてCSSは、そのまま画面を下にスクロールしていき、SEO設定の下のカスタムCSSと書かれたところです

そこに貼り付けるなり、書くなりしていきます


ブロガーが覚えておきたいHTML

わたし的覚えていた方がいいHTMLは

  • ul(アンオーダーリスト)
  • a(リンク)
  • class(クラス)の書き方

あたりです

順番に見ていきましょう

ul(アンオーダーリスト)

アンオーダーリストではその名の通り、

  • 単語や文章を
  • リストとできます

ちなみにul以外にはol(オーダーリスト)があります

olはリストの左に1、2などの数字がつき、ulでは黒点(・)になります

単語や文章を、、はulで書いたので黒点になっていますよね?

ちなみにulを選んだ理由としては、単純にブロガーさんってよくリストを使うからです

情報をまとめるときに、リストアップされているととても見やすいからです

そのよく使うリストを装飾できるようになると、一気におしゃれなサイト感がでます

実は少し上に書いた青い矢印もulがもとになっています

それを後述するCSSで装飾しただけです

とにかく、ulはリストを作れるんだと理解しておいてください

下記はテキストモード上でどのように表示されているかを書きました

HTML

<ul>

<li>単語や文章を</li>

<li>リストとできます</li>

</ul>

基本的にかっこ<>でしたい要素を囲み、終わりには</>斜め線を1つ増やして終わります

なのでまずは

HTML

<ul>

</ul>

となります

そしてその中に<li>(リスト)をいれ、文章を書きます

こちらも</li>で斜め線で終わることを忘れずに!

HTML

<ul>

<li>単語や文章を</li>

<li>リストとできます</li>

</ul>

これでul(アンオーダーリスト)の出来上がりです

リストはブログを書く上で必ず使用しています

深く考えなくてもこれはリストっていうんだなくらいの理解はしておきましょう!

a(リンク)

aはリンク作成に使います

先に書き方を見せた方が早いので、コードはこんな感じです

HTML

<a href=”https://moriblog.net/techacademy-twomonth”>テックアカデミーの体験記事</a>

という感じでリンクを書いています

そうすると、テックアカデミーの体験記事のリンクというリンクができ、そこのページにとぶことができます

まず、<a href=”○○○○/○○-○○”>と決まった型を書いていきます

“○○”の〇の中には記事やサイトのURLを入れてください

そのあと、</a>でとじる前に画面上で表示させたい文章を入力します

今回なら「テックアカデミーの体験記事」と入力しました

HTML

<a href=”https://moriblog.net/techacademy-twomonth”>テックアカデミーの体験記事</a>

リンクの作成はブロガーには絶対必要なもので、とても簡単ですが、やり方を知らないとん?となりますよね

とりあえず型とかあったなぁとこの記事を思い出してもらえたらうれしいです!

class(クラス)の書き方

CSSで装飾するための準備なのがclass(クラス)であって、今までの2つとは性質が少し異なります

例えばさっきulの話をしたとき、左が黒点だったところとCSSで装飾して青い矢印になったところがありましたよね?

  • ul(アンオーダーリスト)
  • a(リンク)
  • class(クラス)の書き方

これはここだけにCSSを利かせてくださいという指定をしているからなんです

もっと具体的に書くと、この青矢印には

HTML

<ul class=”cp_list”>

<li>ul(アンオーダーリスト)</li>

<li>a(リンク)</li>

<li>class(クラス)の書き方</li>

</ul>

class=”cp_list”という部分が加わっているんです

逆にこれがないとただの黒点に戻ります

cp_listという部分はオリジナルの名前で大丈夫ですが、わかりやすいものにしないと管理が大変になっていきます

このclassのあとのcp_listにCSSを利かせるという指定をCSS側で行うので、HTMLではclassで場所の名前を決めてあげるとだけ理解しておいてください!

ブロガーが覚えておきたいCSS

CSSでは、

  • classで名付けた場所の装飾方法
  • 参考にしたいコピペOKサイト

の2つを紹介していきます

classで名付けた場所の装飾方法

先ほど例にあげた、cp_listの指定を例にしてみましょう

以下はカスタムCSSの方に記述する内容です

CSS

.cp_list{

color:blue;

}

という風にまず、.(コンマ)をつけその次に名前を書きます

そのあと、{(かっこ)ではじめ、したい装飾を書いて、でとじます

ちなみにしたい装飾というのは覚えなくても大丈夫です

なぜなら、あらかじめ書かれているものをネットから探してコピペした方が1から考えるより、よっぽど早いからです

ただ、cp_listという部分がHTMLで書かれた場所の名前だということと、.(コンマ)を忘れると機能しなくなるということは必ずわかっておいてください

これさえわかっていれば、エラーでCSSが利かなくなったとき、対処法を見つけやすくなります

参考にしたいコピペOKサイト

コピペOKサイトのコードをコピーし、カスタムCSSの欄にペーストすれば、装飾が簡単にできます

ただし、各サイトはそれぞれclassの名前が違うので、HTMLでclassを指定してからプレビューを見るのを忘れずに!

https://saruwakakun.com/html-css/reference/ul-ol-li-design

リストデザインの宝庫!

先ほどの青い矢印のもここからのコピペです

https://copypet.jp/397/

リンクのおもしろい装飾です

https://saruwakakun.com/html-css/reference/box

HTMLのコードなどをのせたときの枠組みのCSSになります

https://kodocode.net/design-css-checkbox/

チェックボックスは作るとしたらコピペが断然おすすめです

まとめ

ブロガーが覚えておきたいHTMLは

  • ul(アンオーダーリスト)
  • a(リンク)
  • class(クラス)の書き方

CSSは

  • classで名付けた場所の装飾方法
  • 参考にしたいコピペOKサイト

こちらでした

まだまだ難しそうに見えるかもしれませんが、慣れるととっても簡単なのでまずは好きなところを色々いじってみてください!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です