Narvikログ

不眠症患者が調べた事などを茶番するブログ

CSSをちょっと勉強しました。

 おはようございます。
 最近はちょっとブログの改造をしてました。
 それにともない、CSSの勉強もしてます。

 今回は自分が勉強したCSSのちょっとしたまとめです。
 少しだけ分かった事があるのでそれのまとめになります。

 どっちかというと備忘録に近いです。

 

 

CSSをHTMLに組み込む方法は三つ。

 

  1.  直接、style属性で装飾する方法。
  2.  内部参照。
  3.  外部参照。

 この三つで、はてなブログだと
 外部参照が良く使われる。
 というよりも、外部参照が基本のようですね。

 

CSSの基本ルール

 

 セレクタ{プロパティ:値;}

 これが基本的な書式で、h1を装飾する場合は

 

 セレクタ=h1。
 プロパティ=色などのコード。
 値=プロパティのをどうするか。

 

 こうなってる。
 なので実際にh1を装飾しようとしたら

 

 h1{color:#008080;}

 

 で、これだとh1で囲まれた見出しを#008080の色で装飾してくださいとなると。
 実際にはこれだと色々物足りないので、これに色々と付け加えて形を作り上げる。

 

個人的に必要そうなコード

border

 これは境界線をつくるもの。

 

 border: #000000 1px solid;

 

 こんな感じで使うようですね。
 borderの後に出てくるのが値だけど、これはそれぞれ境界線の色、太さ、線の種類。
 なので

 

 #000000=これが色の指定。
 1px=線の太さ。
 solid=線の種類。

 

 このようになってるようです。
 実際にこれを行うとこのようになる。

 

これはテストです

 

 線を上下左右に個別に付けたい場合。

 

 border-top: #000000 1px solid;

 border-bottom: #000000 1px solid;

 border-left: #000000 1px solid;

 border-righe: #000000 1px solid;

 

 この四つ。
 実際にやってみる。

 

これはテストです

これはテストです

これはテストです

これはテストです

 

 こんな感じになる。
 また単位はpx他にも

  • %
  • em
  • ex
  • rem
  • pt

 などがあるみたいですね。
 線も種類があって、none、solid、dotted、dashed、double、の五種類。

  •  none=線が無し。
  •  solid=実線。
  •  dotted=点線。
  •  dashed=破線。
  •  double=二重線。

 なのでこれを実際にやると

 

これはテストです

これはテストです

これはテストです

これはテストです

これはテストです

 

 こうなる。

 

 黒だから味気ないわねこれ……。

 まぁテ、テストだから。


padding

 

 これはborderの内側の余白を指定する。
 ちょっとやってみる。

 

これはテストです

これはテストです

これはテストです

これはテストです

 

 こうなる。

 上から順に


border: black 5px solid;
padding: 5px

border: black 5px solid;
padding: 5px 20px


border: black 5px solid;
padding: 5px 10px 20px


border: black 5px solid;
padding: 0px 5px 10px 20px

ってなっているけど、余白は全部の余白、上下左右、上と左右と下、上と右と左と下、って指定をするのが分けられている。

なんで実際にやってみてちょっとこれ弄りたいってなったら数値がなんなのか、どの位置の事なのかそれを知っていた方が良さそう。

 

margin

 

 これは境界線の外の余白の指定を行う。

 

これはテストです

これはテストです

これはテストです

これはテストです


 こうなる。

 それぞれ外の境界線なんだけど


border: black 5px solid;
margin: 5px

border: black 5px solid;
margin: 5px 10px

 

border: black 5px solid;
margin: 5px 10px 20px

 

border: black 5px solid;
margin: 5px 10px 20px 30px

 

 となってます。

 なんかこの辺の調整が難しい。

 これ、正解ってあるんだろうか……。

 

 デザイン系の勉強をする必要がありそう

 

class

 

 これはCSSを複数箇所で使う場合に行うようです。

 

 p.クラス名{}
 .クラス名{}

 

 このどちらか。
 pは省略ができる。
 これを知って、なるほどなって思った。
 CSSの改造で行っているのはこれか……。
 これを使えば、クラス名を色々使って、マーカーみたいな事もできるし、境界線で一部の文字を囲う事もできる。
 CSSの書き込み部分に入れなくても、<style></style>を使えばHTML画面で個別にページを装飾もできる。
 ただ正直個別やる意味って特にないというか、それほど需要がないというか……正直めんどくさ(ry
 素直にデザインCSS部分にコードを書いた方が良いですね。
 よほど一部だけ使いたいっていう時以外はそれほど個別に使う必要性がない。

 だってめん(ry(二回目)

 

color

 

 カラーを指定する。
 これは色々あるみたい。
 正直色に関しては全部覚えられないというか、無理なんで色々とサイトを使わせてもらったほうが良さそうです。
 色に関してはグラデーションも調べたんですが、グラデーションはちょっとめんどくさい。
 backgroundで出来るみたいなんだけど、これはまだ色々良く分からん。
 一応、上下、左右、角度、それらを指定して行う事は分かったけどこれすごいめんどくさい。
 カラーストップの指定とかその辺がうごごごご。

 ええ……グラデーションめんどくさ。

 これも色指定から考えると色々サイト見ながらやった方がよさげ。
 でもこれを使えばボタンの色指定を出来たりするし、色々と幅は広がりそう。
 はてなブログだとプロフィールとか、色々弄れそう。
 h2、h3、h4などの見出しタグもやる事は同じなのでデザインCSSにh2{}と専用に作ればきれいなグラデーションの見出しとかも作れる筈。

 

組合わせてみる

これはテストです

これはテストです

これはテストです

これはテストです

 

 色々出来そう。

 

まとめ

 

 個人的に調べたCSSのコードでした。
 外にもシャドウとか袋文字とかネオンとかグローとかあったんですけど、正直全部はまだ調べられてない。
 ただコードの種類が分かれば色々ブログの改造は捗りそうですね。少なくとも何故そうなるのかが理解はできるので、自分で色々できそうです。
 もう少し勉強します。
 というか吹き出しのCSSってすげーめんどくさいんだなって思いました。
 本当にありがとうございます…。
 もっと勉強してみます。

 ではではー。見てくれてありがとうございました!