ブログ作成メモ ぱおちゃん

ワードプレス（WordPress） 初心者必見。HTMLとCSSの基礎講座。

SPONSORED LINK

はじめてだから、
HTMLとCSS教えて！

ひねくれ美容ライターのぱおちゃんです（・ω・）

ひねくれ美容を立ち上げてもうすぐ3ヵ月。
ちょっとずつ、ブログ運営にも慣れてきました。

ワードプレス（WordPress）を使用していると、避けて通れないのが、htmlやCSS。

友達SEいわく、これをしっかり理解して覚えると、ブログやサイトのデザインを変えることができるみたいで、様々なカスタマイズをおこない、かわいくしたり、オリジナリティを出せたりすることができます。

ぱおちゃんも、ひねくれ美容をもっと、かわいくしたい♡

そこで今回は、超超初心者のためのプログラミングの基礎をご紹介していきます。
ぱおちゃんでも、なんとかギリギリできたから必見だよ。

 


HTMLと、CSSを教えて

＜＜以下、友達SE＞＞
ぱおちゃん
もう無理だ･･･
今回こそ、だめだー
友達SE
どうしたんだい。
ぱおちゃん
ぱおちゃん
HTMLとCSSが全く分からない

HTMLとは、簡単にいうと画面を作る上での骨組み。
そして、CSSは、骨組みをキレイにしたり、デザイン性をだしていくものです。

ひねくれ美容_ぱおちゃん HTMLとは？

パソコンで操作されている方は、キーボードの「F12」をレッツ、プッシュ！
インターネットエクスプローラー（IE）だとデォルトで下の方に、クローム（Chrome）だと右の方に何かかでるはずです。
これが、HTMLのコードなんだよ。

PCは、このコードを読み込み、そして変換し、サイトに情報やデザインを表示しています。
そのため、文字や画像の配置場所や見出し、段落などサイトを書く上で、基本的な骨組みをHTMLで作っていきます。

ひねくれ美容_ぱおちゃん CSS(スタイルシート)とは？

CSSは、別名スタイルシートとも言います。
HTMLで記載した、骨組みのデザインを決めていきます。
文字の大きさ、背景の色、レイアウトの位置と形、ブログを見やすくするために、様々なことができます。

友達SE
ここで、javascriptとphpというものを覚えると、カスタマイズの幅も広がるよ
ぱおちゃん
ここでこんなに多くのプログラミング言語を一度に覚えることなんて（涙）
友達SE
だけどwordpressを使えばHTMLとCSSだけでも十分なんだよ。
ぱおちゃんのような、ブログ初心者は記述ルールを覚えるくらいの理解で大丈夫だよ

HTMLとCSSだけでもきれいで見やすいサイトを作ることが出来ますが、javascript、phpを利用することにより、もっと動きのあるサイトを作ることが出来ます。

例えば、ブログのページのクリック数を集計して、ランキングページを作ることが出来ます。
また、データベースを操作することが出来るため、大量のデータ（記事）を作ることも可能になってきます。

 

CSSの記述方法

以下のように、CSSは記述致します。 
セレクタ{
プロパティ1（属性）: 値1;←セミコロン（；）ですよ。
プロパティ2（属性）: 値2;
プロパティ3（属性）: 値3;
}
例えば、見出しで使うｈ1タグのデザインを制御する場合、以下のようになります。 
h1{
color: #000000;
font-size: 24px;
background: #343232;
top : 15px;
}
という風に記載していきます。
プロパティは、何個も書くことが可能です。

 

実際に書いてみよう！！！

CSSの書き方は大きく分けて2パターンあります。

ひねくれ美容_ぱおちゃん HTMLファイル内に記載する
ひねくれ美容_ぱおちゃん CSSファイルを、別に作成して記載する

の2通りです
CSSは、HTMLと一緒に記述することも出来ますが、HTMLと一緒に書いてしまうと後で読みにくく、変更するのが大変なため、基本的には、別のファイルで作成します。

ひねくれ美容_ぱおちゃん （１）HTMLファイル内に記載する。

HTMLファイル内に書くにはタグに書く方法と、該当のタグに直接記述する方法があります。

ひねくれ美容_ぱおちゃん headタグに書く方法
ワードプレス（WordPress）ではheader.phpのタグの中に、styleタグを使って書くことが出来ます。 
<style type="text/css">
 h1{
 color: #000000;
 font-size: 24px;
 background: #343232;
 top : 15px;
 }
 </style>
ひねくれ美容_ぱおちゃん 該当のタグに直接記述する方法
ピンポイントで文字の色や、大きさを変えたい場合使います。 
<h1 style="color:red">h1の見出し</h1></pre>

ひねくれ美容_ぱおちゃん （２）別にCSSファイルを作成し記載する。

これが、一般的な書き方となっています。
ワードプレス（WordPress）では、style.phpというファイルがあるため、
それを書き換えるだけで制御することが出来ます。

ワードプレス（WordPress）を使っていない場合は、
HTMLファイルに該当のCSSを呼び出す記述をしなくてはなりませんが、
ワードプレス（WordPress）ならばその必要もなく
style.phpを編集するだけで大丈夫です。

 

セレスタの種類

セレスタには、h1やliなどのタグ以外にもid、classというものを指定することが出来ます。

ひねくれ美容_ぱおちゃん id、class

セレスタにはタグのセレクタ以外にもid、classを指定することが出来ます。
id、classを使ってCSSを制御することにより、

同じh1タグでもスタイルを適応したりしなかったり、させることが出来ます。

ひねくれ美容_ぱおちゃん 基本のセレスタ

h1やli、imgといったタグをCSSで制御していきます。 
HTML
<h1>ひねくれ美容<h1>


CSS
h1{
font-size:24px;
}

ひねくれ美容_ぱおちゃん idによるセレスタ指定

idにより指定する場合セレスタの前に「＃」を付けてください。 
HTML
<h1 id="test">ひねくれ美容</h1>


CSS
#test{
font-size:24px;
}

ひねくれ美容_ぱおちゃん classによるセレスタ指定

classにより指定する場合セレスタの前に「.」（ドット）を付けてください。 
HTML
<h1 class="test">ひねくれ美容</h1>


CSS
.test{
font-size:24px;
}

友達SE
idとclassにはとても重要な違いがあるんだよ！
“id”はhtmlの中に1回しか使うことが出来ませんが
“class”は何回でも使うことが出来るんだよ
これについては今度説明するね。

 



ぱおちゃんのまとめ

これも、難易度が高いのではないか。
話を聞きながら、涙が出そうになりましが、なんとか克服しましたよ（涙）

デザインをかわいくするには、HTMLとCSSの勉強が不可欠ですね…。
ブログのユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）の改善に努めていきたいと思います♡

 

SNSで話題の関連記事

コメントを残す

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

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

28歳アラサー美容ライターです。美容とダイエットが好きで、元エステティシャン、姿勢・ウォーキングアドバイザー、化粧品検定を取得。 2019年にモルディブハネムーンにくので、絶賛ダイエット中。東京都内で旦那さんとふたり暮らししています。

NEW POSTこのライターの最新記事