はじめてだから、
HTMLとCSS教えて!
ひねくれ美容ライターのぱおちゃんです(・ω・)
ひねくれ美容を立ち上げてもうすぐ3ヵ月。
ちょっとずつ、ブログ運営にも慣れてきました。
ちょっとずつ、ブログ運営にも慣れてきました。
ワードプレス(WordPress)を使用していると、避けて通れないのが、htmlやCSS。
友達SEいわく、これをしっかり理解して覚えると、ブログやサイトのデザインを変えることができるみたいで、様々なカスタマイズをおこない、かわいくしたり、オリジナリティを出せたりすることができます。
ぱおちゃんも、ひねくれ美容をもっと、かわいくしたい♡
そこで今回は、超超初心者のためのプログラミングの基礎をご紹介していきます。
ぱおちゃんでも、なんとかギリギリできたから必見だよ。
ぱおちゃんでも、なんとかギリギリできたから必見だよ。
◆5秒で読める目次
HTMLと、CSSを教えて
<<以下、友達SE>>
ぱおちゃん
もう無理だ・・・
今回こそ、だめだー
今回こそ、だめだー
友達SE
どうしたんだい。
ぱおちゃん
ぱおちゃん
ぱおちゃん
HTMLとCSSが全く分からない
HTMLとは、簡単にいうと画面を作る上での骨組み。
そして、CSSは、骨組みをキレイにしたり、デザイン性をだしていくものです。
そして、CSSは、骨組みをキレイにしたり、デザイン性をだしていくものです。
HTMLとは?
パソコンで操作されている方は、キーボードの「F12」をレッツ、プッシュ!
インターネットエクスプローラー(IE)だとデォルトで下の方に、クローム(Chrome)だと右の方に何かかでるはずです。
これが、HTMLのコードなんだよ。
インターネットエクスプローラー(IE)だとデォルトで下の方に、クローム(Chrome)だと右の方に何かかでるはずです。
これが、HTMLのコードなんだよ。
PCは、このコードを読み込み、そして変換し、サイトに情報やデザインを表示しています。
そのため、文字や画像の配置場所や見出し、段落などサイトを書く上で、基本的な骨組みをHTMLで作っていきます。
そのため、文字や画像の配置場所や見出し、段落などサイトを書く上で、基本的な骨組みをHTMLで作っていきます。
CSS(スタイルシート)とは?
CSSは、別名スタイルシートとも言います。
HTMLで記載した、骨組みのデザインを決めていきます。
文字の大きさ、背景の色、レイアウトの位置と形、ブログを見やすくするために、様々なことができます。
HTMLで記載した、骨組みのデザインを決めていきます。
文字の大きさ、背景の色、レイアウトの位置と形、ブログを見やすくするために、様々なことができます。
友達SE
ここで、javascriptとphpというものを覚えると、カスタマイズの幅も広がるよ
ぱおちゃん
ここでこんなに多くのプログラミング言語を一度に覚えることなんて(涙)
友達SE
だけどwordpressを使えばHTMLとCSSだけでも十分なんだよ。
ぱおちゃんのような、ブログ初心者は記述ルールを覚えるくらいの理解で大丈夫だよ
ぱおちゃんのような、ブログ初心者は記述ルールを覚えるくらいの理解で大丈夫だよ
HTMLとCSSだけでもきれいで見やすいサイトを作ることが出来ますが、javascript、phpを利用することにより、もっと動きのあるサイトを作ることが出来ます。
例えば、ブログのページのクリック数を集計して、ランキングページを作ることが出来ます。
また、データベースを操作することが出来るため、大量のデータ(記事)を作ることも可能になってきます。
また、データベースを操作することが出来るため、大量のデータ(記事)を作ることも可能になってきます。
CSSの記述方法
以下のように、CSSは記述致します。
セレクタ{ プロパティ1(属性): 値1;←セミコロン(;)ですよ。 プロパティ2(属性): 値2; プロパティ3(属性): 値3; }
例えば、見出しで使うh1タグのデザインを制御する場合、以下のようになります。
h1{ color: #000000; font-size: 24px; background: #343232; top : 15px; }
という風に記載していきます。
プロパティは、何個も書くことが可能です。
プロパティは、何個も書くことが可能です。
実際に書いてみよう!!!
CSSの書き方は大きく分けて2パターンあります。


の2通りです
CSSは、HTMLと一緒に記述することも出来ますが、HTMLと一緒に書いてしまうと後で読みにくく、変更するのが大変なため、基本的には、別のファイルで作成します。
CSSは、HTMLと一緒に記述することも出来ますが、HTMLと一緒に書いてしまうと後で読みにくく、変更するのが大変なため、基本的には、別のファイルで作成します。
(1)HTMLファイル内に記載する。
HTMLファイル内に書くにはタグに書く方法と、該当のタグに直接記述する方法があります。

ワードプレス(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>
(2)別にCSSファイルを作成し記載する。
これが、一般的な書き方となっています。
ワードプレス(WordPress)では、style.phpというファイルがあるため、
それを書き換えるだけで制御することが出来ます。
ワードプレス(WordPress)では、style.phpというファイルがあるため、
それを書き換えるだけで制御することが出来ます。
ワードプレス(WordPress)を使っていない場合は、
HTMLファイルに該当のCSSを呼び出す記述をしなくてはなりませんが、
ワードプレス(WordPress)ならばその必要もなく
style.phpを編集するだけで大丈夫です。
HTMLファイルに該当のCSSを呼び出す記述をしなくてはなりませんが、
ワードプレス(WordPress)ならばその必要もなく
style.phpを編集するだけで大丈夫です。
セレスタの種類
セレスタには、h1やliなどのタグ以外にもid、classというものを指定することが出来ます。
id、class
セレスタにはタグのセレクタ以外にもid、classを指定することが出来ます。
id、classを使ってCSSを制御することにより、
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”は何回でも使うことが出来るんだよ
これについては今度説明するね。
“id”はhtmlの中に1回しか使うことが出来ませんが
“class”は何回でも使うことが出来るんだよ
これについては今度説明するね。
ぱおちゃんのまとめ
これも、難易度が高いのではないか。
話を聞きながら、涙が出そうになりましが、なんとか克服しましたよ(涙)
話を聞きながら、涙が出そうになりましが、なんとか克服しましたよ(涙)
デザインをかわいくするには、HTMLとCSSの勉強が不可欠ですね…。
ブログのユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)の改善に努めていきたいと思います♡
ブログのユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)の改善に努めていきたいと思います♡
コメントを残す