Monthly Archives: 4月 2016

聞いたことあるけど、Sassってなに?

HTML,CSSが書けるようになってくると、コーディングの短縮方法とか調べる方は少なくは無いと思います。その時によく「Sass」って、キーワードにたどり付きませんでしたか?

「Sassって、CSSをより簡単に書けるようにしてくれるツールなのかな?」と、自分も初めはこれぐらいの認識でした。自分のように気になるけど、苦労してまで新しく学び直すのはちょっと嫌だなーと感じている方はこの記事からSassについて少しづつ学んでいただければと思います。

そもそもSassって何?

Sass(サースと呼ばれている)は、「Syntactically Awesome StyleSheet」の略。直訳すると「構文的にすげえスタイルシート」という感じですね。

もうすこし説明するとプログラミング言語の仕様を取り入れて効率的にCSSを定義できるようにした言語で、変数や算術演算、セレクタ指定の入れ子(ネスト)、外部ファイルの読み込み、複数のCSS定義の結合(ミックスイン)など、CSSにはない機能を利用することができます。

Sassを使うと何が便利なの?

SassはプログラムのようにCSSを書くことができるので、普段CSSで面倒だと感じている以下の課題を解決してくれます。

1,同じ値を何度も書き足さないといけない。

2,classが多くてコードのまとまりが分かりにくい。

最初はこの2点が解決されるという認識で大丈夫です。それでは、具体的にどのように解決してくれるのか見て行きましょう!

1,同じ値をまとめて管理できる!

よくページ内で同じ色を活用する時がありますよね。例えば、下記のような状況です。

a {
   color:#2980b9;
}
.btn{
  background-color:#2980b9;
}
.title{
  color:#2980b9;
}

各サイトにはトンマナとかの都合があるので、同じような色を何回も利用することがありますよね。
このような状況でSassを活用すると、下記のようにスッキリします。

$color=#2980b9;
a {
  color:$color;
}
.btn{
  background-color:$color;
}
.title{
  color:$color;
}

ここでは変数というプログラムではよく見かける概念ですが、Sassはこの変数を利用して、コードを書く手間を柔軟に対応してくれます

2,一つのclass名を何度も書かなくても大丈夫!

CSSを書いていると下記のようなコードに出くわしませんか?

a{
color:#2980b9;
}
.box{
  width: 900px;
  margin: 0 auto;
}
.box .title{
  font-size: 26px;
  padding: 5px;
}
.box .text_area{
  width: 400px;
  padding-left: 10px;
}
.top_text{
  font-size: 26px;
}

一つのclassを何度も書いてcssをかけないといけない時ってありますよね。管理するページが増えれば増えるほどcssが被らないようにclassが複雑になっていきますよね(笑)
Sassを利用することで下記のように解決されます。

a{
  color:#2980b9;
}
.box{
width: 900px;
margin: 0 auto;
//
.title{
  font-size: 26px;
  padding: 5px;
  }
  .text_area{
    width: 400px;
    padding-left: 10px;
  }
}
.top_text{
  font-size: 26px;
}

.box{ }の中に他のソースコードを入れてしまうことで、.box を省略すると共に、見た目でも「このソースコードは .box の中にあるんだ」と分かりやすくなっています。
かなりおおまかにSassについて説明させていただきましたが、何となく便利そうなんだな~というのが伝われば何よりです。
また、このような便利なツールを抵抗なく、取り入れえいけるようになる練習だと思って始めるきっかけには丁度いいかもしれませんね。

エクセルからHTMLに変換してくれるツール「TABLEIZER!」

皆さんは「TABLEIZER!」というツールを利用されたことはありますか?このツールはエクセルで作成した表をHTMLに変換してくれるツールです。難しい作りやデザインの凝った表を作る時には不向きかもしれませんが、シンプルで長い名簿を作成する時にはとても重宝すると思いますので紹介されていただきます。

利用方法

手順1.表を作成したエクセルから表をコピーする

エクセル
エクセルで作成した表をそのままコピー(Ctrl+C)してきます。

手順2.「TABLEIZER!」でコピーした表を貼り付る

TABLEIZER!
1と囲まれている部分にコピーしたものを貼り付けます。
次に2で文字の大きさ、3でth部分の色を設定し、4では必要ならばフォントを設定していきます。
最後に5の「TABLEIZER It!」というボタンを押せば、下記の様にコードが生成されます。

手順3.あっという間に完成!
TABLEIZER!
この様にあっという間にエクセルからHTMLに変換することができます。
少し補足をすると、
・元のエクセルに色が付けられていても反映はされません。
・セルの幅、高さは文字の長さに依存するので、セルの大きさを調整したい時は後からHTMLを書き足す必要が出てきます。
等など。。

いくつか制限はあるにしても、膨大な表を作成する時にはとっても役に立つと思います。
エクセルからHTMLに変換してくれるツール「TABLEIZER!