CSSの基本 初心者は囲い線だけでもやっておこう!


CSSがわからない人は囲い線だけやっておこう!

おはようございます!ねぎまです。

ここ数日でCSSの初歩だと思うんだけど、囲い線だけ」覚えましたw

20代の頃は「プログラマーになる!」とか言ってIT系のベンチャー企業に出向いて求職活動していたこともあるんですが、そもそもプログラムとかちんぷんかんぷんだったのですぐ挫折。

で、ブログ活動をはじめたから今になってまたプログラミング言語と角突き合わせることに・・。

とはいえ、HTMLとCSSは使用する言語が英語になってるからまだわかりやすい!

40代間近のボクでもできたので、今日はこのCSSの囲い線だけ紹介したいと思いますー

css

囲い線の装飾

ボクが今まで使っていたのは引用。

こういうやつです

 

だけど、これってただの囲い線じゃなくて「どっかから持ってきた文章ですよ」って時に使うから、意味合いが違う。

使いたいのは、ただ見栄えをよくするだけの線だから。

使いたいのはこんなの。

 

一度、設定しておくとそれ以降は楽に使えるからかなりオススメです。

ブログ全体もしまって見えますからね。

 

これを自分好みに変更する方法なんですが、大まかにこんな流れで作ります。

 

①CSSでクラスの宣言(呼び出す呪文を決める)

いちいち見出しを装飾するときに、小難しいプログラムを打ち出していたら時間がかかるし面倒ですよね。

だから 「H2を装飾!」って入れたら、即座に装飾できるように呪文を決めておきます。

ドラクエで言うと、「ラリホー!」って唱えたら寝ちゃう。 そんな感じ

ワードプレスのstyle.cssに書き込み
.kakoi 1 (呪文の名前)(このあとに効果を書く)

ブログ記事に書き込み
<div class=”kakoi 1″>囲みたい文章</div>

スタイルcssに呪文の名前と効果を書くんですね。

で、テキスト上で唱えるというわけ。

上の例では、まだ呪文の名前だけで、それを唱えたときの効果がまったく書いていないから、なにも変化しません。

ワードプレスのstyle.cssにさらに書き込み
.kakoi 1 /*呪文の名前*/
border: 4px double #FFA500; /*線の幅を4pxで二重線。色はオレンジ*/
margin: 2em 0; /*テキストと囲い線の余白*/
padding: 2em; /*囲い線の外側の余白*/ボクが実際に使っている囲い線はこんな感じ

あとは、例えば線をもっと太くしたいとか、違う模様の囲い線にしたいとか、お好みによって書き加えていくってことですねー。

style.cssに呪文の名前と効果を書き込んで、テキストで呪文を唱える!

この仕組みがわかったらCSSのハードルが一気に下がりました。

ボクの場合はcssって単語を聞いただけで、苦手意識が芽生えてたんですが、最初の一歩を乗り越えると案外すんなり世界に入れそうですよ。

「cssなにそれ?おいしいの?」的な方は、まず囲い線からはじめてみませんか?