HTML・CSS

フォースと共にあらんことを

今回はcssの書き方について

CSSってなに?と思ってる人は前回の記事を読んでくれるとわかりやすいかも

簡単におさらいをしておくと

ホームページ = HTML(構造) + CSS(見た目)

ということ。

ホームページの基本はすべてHTMLとCSSで出来ている。

他にもスライドなんかの動きを付けるためのjavascriptやPHPっていうプログラムもあるけど、これらはあくまでおまけでサイトはHTMLとCSSがないと成り立たない。

それでは本題

CSSの書き方について

css

上の書き方だと、h1というタグの文字の大きさを20ピクセルにするというもの

セレクタはHTMLのどのタグに適用するか、

プロパティはどんなスタイルを適用するか

値は実際にどんなスタイルにしたいかを指定する

cssを書くときに一番ミスりやすいポイントとして『プロパティと値の間に「:(コロン)」を忘れる』『値の後ろに「;(セミコロン)」を忘れる』

この2つはまじでよく忘れるので、自分でCSSを編集しても見た目が変わらない場合はまず見てほしい。

複数のスタイルを適用する

スタイルは複数適用することもできる。

例えば、pタグで囲われている文字を大きくして色を赤くしたいときは以下のように書けば

p {
font-size: 20px;
color: #f00;
}

こんな風に文字を大きくすることが出来る

頑張ればこんな風にフォースを感じそうな演出もできる…使いどころないと思うけど 笑

Episode IV
A NEW HOPE

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the Battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire’s sinister agents, Princess Leia races home abord her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy. . . .

  

すごいぞ!ぼくらのしーえすえす

みんなはCSSをご存知だろうか?

しーえすえすってなに?

正式名称はカスケーディングスタイルシート(Cascarding Style Sheets)の頭文字をとってCSSと言います。

???私は生クリームよりカスタードクリームが好きです(錯乱)

…気を取り直して、軽く説明すると

HTMLとは

ホームページやブログを構成している言語で、コンピューターが中身を読んで理解し見やすいように表示してくれています。

CSSとは

文字の大きさや色を変えたり、枠を付けたりデザインに関することを変えられます。

めっちゃざっくりいうとこんな感じなんだけど・・・なんのこっちゃ???

・・・ま、みんなwordpress使ってるから、その辺はまた後日詳しく記事にする予定

じゃあ具体的にどんなことが出来るの?

上にも書いたけど、文字の色や大きさを変えたりできる。

CSSを使ってない
「I’m a PERFECT HUMAN」

太文字
「I’m a PERFECT HUMAN」

なんかちょっと野太い声が聞こえてきそうですね。

斜体
「I’m a PERFECT HUMAN」

こっちはスタイリッシュなイケボ

文字の色を変更
「I’m a PERFECT HUMAN」

これはなんだろう…なんか切羽詰まった感じかな

大きさ変更(16px→12px)
「I’m a PERFECT HUMAN」

これはささやいてますね。完全に(笑)

ほかにも文字の背景色を変えたりすることもできる
「I’m a PERFECT HUMAN」

結構色んなことが出来るので、少し覚えておくといいかもしれないね。

次はもっと詳しく書き方なんかを書くつもりですよ。

明朝体は美しい

gmailのアカウントは無事取得できたことと思う

私のようにgoogleの目をかいくぐって色々と悪さをしなければ、確実に味方になってくれるという

これは強い(確信)強い(2回目)

じゃあ、キーワードの選び方

といっても、「誰かの問い」だよって話で大体終わっていて、詳しいことは直接聞いてください(笑)

そういえば、ちょっと気になったのでブログで使ってるフォントを変えてみた

やっぱり明朝はいい…美しい…高級感がある

高級志向!!(笑)

てことで今回の本題はフォントの変え方

『Xeory Base』というテーマを例に使っているけど、cssさえわかってしまえばだれでも簡単に出来るのでぜひ試してみて欲しい。

フォントやデザインなど目に入るものが自分の好きなものだと、はかどるからね!

じゃあ実際にフォントを変えてみましょう

外観→テーマ編集
font

テーマ編集をクリックした後、スタイルシートが表示されているかと思うけど、いじるのは右下にある『base.css』
base

『base.css』をクリックしたら実際に編集していこう。

スクロールしていくと、以下のような記述があるかと思う。
わからない人はCtrl+F(macはCommand+F)で「font-family」と検索してもらうと一発でその記述に飛べるので楽。

を、以下のように書き換えると明朝体に変わります。

具体的にはfont-familyの部分を書き換えてるよ!