MENU

【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>

.cssの作成

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

style.cssとします。

.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をカスタマイズして、ヨメレバの見た目を改造

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="http://www.amazon.co.jp/exec/obidos/asin/4844365126/min0124-22/" target="_blank" ><img src="https://images-fe.ssl-images-amazon.com/images/I/51YKJDlJKvL._SL160_.jpg" style="border: none;" /></a></div><div class="booklink-info"><div class="booklink-name"><a href="http://www.amazon.co.jp/exec/obidos/asin/4844365126/min0124-22/" target="_blank" >ああしたい、こう変えたいが手にとるようにわかる CSS基礎</a><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">赤間 公太郎,原 一宣。,藤川 麻夕子,山本 和泉 エムディエヌコーポレーション 2015-07-17    </div><div class="booklink-link2"><div class="shoplinkamazon"><a href="http://www.amazon.co.jp/exec/obidos/asin/4844365126/min0124-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B011BDRM7S/min0124-22/" target="_blank" >Kindle</a></div></div></div><div class="booklink-footer"></div></div></div>


  <style type="text/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;
  }

  -->
  </style>
</body>
</html>

結果

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

まとめ

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

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