【Blog】最短でブログの見た目が変更できる程度にCSSを勉強する方法

blog-css-study

実はWEB関係のことはとんと縁がなく、CSSの知識はほとんどありません。

ただネットにあるCSSをコピペして、値を変えてブログのデザインを変更していましたが、

これでは見た目に調整できない!という気持ちが起こり、本を買って勉強してみました。

CSSの参考書

書店でいろいろ見た結果、下記の本が一番わかりやすかったです。

1時間ほど、冒頭部を読めば、

  • DIVとは?
  • クラス?ID?
  • Span?
  • セレクタ・プロパティ・バリュー?

などなど、今までよくわかってなかった記述がなんとなく理解できます。

これで概要はつかめました。

中盤移行は練習パートがあるのですが、すっとばして自作して試してみます。

最短でCSSを試してみる

.htmlの作成

メモ帳を起動

下記のコードをコピペして保存

index.htmlとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
CGメソッド
<div class="test">CGメソッド</div>
</body>
</html>
</pre>

### .cssの作成

#### もうひとつメモ帳を作成し、下記のコードをコピペして保存

**style.css**とします。

<pre class="code" data-lang="" data-unlink="">
.test{
color:red;  /*カラー*/
}

HTMLをブラウザーで開く

クラスに入れた文字が赤色になります。

f:id:min0124:20171007114342p:plain

プロパティをもっと記入してみる

変えたい要素を調べて、記入してみます。

body{
font-size: 64px;  /*サイズ*/
font-family: serif;  /*フォント*/
line-height: 2;  /*行間*/
letter-spacing: -2px;  /*字間*/
text-align: center;/*水平方向の位置*/
}
.test{
color:red;  /*カラー*/
font-family: "メイリオ";  /*フォント*/
font-weight: bold;  /*太さ*/
text-decoration: underline;  /*下線*/
}

f:id:min0124:20171007114511p:plain

実践編

要領がつかめてきたので、実際に見た目を変えたい所をいじってみます。

ヨメレバの見た目の変更

ヨメレバにアクセスして、ブログパーツを作成します。

f:id:min0124:20171007115242p:plain

DirtyMarkupにアクセスして、生成したコードをわかりやすいように整理にします。

f:id:min0124:20171007115823p:plain

div classを抽出

クラスを確認します。

html+cssの作成

メモ帳にhtmlを作成ついでにbodyの中にCSSも入れちゃいます。

  <style type="text/css">
<!--
CSSの内容
-->
</style>

CSSをカスタマイズして、ヨメレバの見た目を改造

.booklink-box{
text-align: left;
padding-bottom: 20px;
font-size: small;
/zoom: 1;
overflow: hidden;
}
.booklink-image{
float: left;
margin: 0 15px 0px 0;
}
.booklink-info{
line-height: 120%;
/zoom: 1;
overflow: hidden;
}
.booklink-name{
margin-bottom: 10px;
line-height: 120%;
}
.booklink-powered-date{
font-size: 8pt;
margin-top: 5px;
font-family: verdana;
line-height: 120%;
}
.booklink-link2{
margin-top: 10px;
}
.shoplinkkindle{
display: inline;
margin-right: 5px;
background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/m/min0124/20160510/20160510112221.gif') 0 0 no-repeat;
padding: 2px 0 2px 18px;
white-space: nowrap;
}
.shoplinkamazon{
display: inline;
 margin-right: 5px;
background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/m/min0124/20160510/20160510112221.gif') 0 0 no-repeat;
padding: 2px 0 2px 18px;
white-space: nowrap;
}

結果

上記のCSSでこの冒頭にあるヨメレバの表示のようになります

まとめ

CSSの書き方とタグ(クラスやID)がわかれば、あとは調べてセレクタを記入するだけです!

ということで、ブログの見た目が変更できる程度にはCSSが記述できるようになりました。