アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

SassとLESSの違い ー CSSプリプロセッサ入門 ー

フロントエンド周りのコーディングは日々複雑化しています。CSSプリプロセッサを学ぶことでCSSコーディングを少しでも楽に行いましょう。今回は代表的なSassとLESSについて取り上げてみます。



CSSプリプロセッサに共通する主な機能



CSSプリプロセッサではそれぞれ細かい記述方法の違いはありますが、一般的に次のような機能があります。



  • セレクタ入れ子にできる。
  • 変数を使用できる。
  • Mixinを作ることができる。
    よく使うスタイルを組み合わせて、Mixinを作ることができます。
  • 定義したスタイルを継承できる(extend)
    他のidやclassで定義したスタイルを別のidやclassで継承することができます。
  • コンパイル時に他のファイルをインポートして、一つのCSSファイルにすることができる。
    別々のファイルを一つにすることができるので、記述方法に誤りがあると、コンパイル時にエラーが出ます。


SassとLESSそれぞれの特徴・違い



Sass



Rubyがベース


Rubyをインストールした後、Sassをインストールします。OSがMacであればRubyははじめからあるのでSassのみインストールします。Rubyに慣れている場合、導入しやすいです。



インストール順序

1.Rubyをインストールする。
2.Sassをインストールをする。



ターミナル(コマンドプロンプト)で



gem install sass



を実行する。



SASSとSCSSの2種類の記法で書ける


SASS(拡張子:.sass)とSCSS(拡張子:.scss)の記法を使うことができます。SCSSはCSSに近い記法なので覚えやすいです。反面、SASSはカッコなどを省略できるので、データ量を少なくすることができます。



  • sassでの記述




.test1
    font-weight: bold
    .test2
        margin-top: 10px


  • scssでの記述




.test1{
    font-weight: bold;
    .test2{
        margin-top: 10px;
    }
}


豊富な機能がある


CSSファイルの自動整形機能

コンパイル時にnested、expanded、compact、compressedからインデント形式が選択できます。上のscssをコンパイルした場合でそれぞれどうなるのかを見てみます。



  • nested




.test1 {
  font-weight: bold;
}
.test1 .test2 {
  margin-top: 10px;
}


  • expanded




.test1 {
  font-weight: bold;
}
.test1 .test2 {
  margin-top: 10px;
}


  • compact




.test1 { font-weight: bold; }
.test1 .test2 { margin-top: 10px; }


  • compressed




.test1{font-weight:bold}.test1 .test2{margin-top:10px}


条件分岐や繰り返し処理が可能

if文やfor文を使用して、条件分岐や繰り返し処理が可能です。



フレームワークCompass


Sassを元にしたフレームワークCompassによって、予め設定されたMixinなどを使うことができます。



LESS



JavaScriptがベース


Node.jsを元にしているので、JavaScriptに慣れているフロントエンドエンジニアにとって使いやすい。JavaScriptの関数を使用して文字列を扱うことに長けています。



CSSに近い記述方法


LESSの記述方法はCSSとほとんど違いはなく、近いものといえます。初めてCSSプリプロセッサを使う人にとって、学びやすいです。



インストール方法

1.less.jsをダウンロードする



  • Node.jsのパッケージマネージャシステムnpmを使用
    • npm install -g lessを実行 (Node.jsがインストールされている必要あり)
  • http://less-ja.studiomohawk.com/ よりダウンロード


.lessでhtmlに直接読み込みが可能


less.jsと組み合わせることで可能になります。下記コードを記述する順番を変えずにhtmlのヘッダに入れます。





<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


制作過程で都度コンパイルするのは面倒なときは直接読みこませる機能が役に立ちます。読み込みの際に初回は多少時間がかかります。



コンパイルして、CSSファイルを生成することが可能


less.jsと組み合わせる方法はJavaScriptが使用できない環境では読みこまれないことになるので、本番環境ではコンパイルして生成したCSSファイルを使用することが現実的です。



まとめ:SassとLESSどちらを使えば良いか



SassがRubyベース、LESSがJavaScriptベースなので、好みによって使いやすい方を身に付けるのが良いでしょう。共通する機能も多いので、一つのCSSプリプロセッサを身につけていれば、他のCSSプリプロセッサを身につけるのはそれほど大変ではありません。



機能はSassの方が多く、SassとLESSの書籍の数を比較した際にSassの書籍の方が多く見られます。しかし、CSSプリプロセッサに初めて触れるときにLESSは機能が限定されているので、導入しやすいとも考えられます。



Monacaアプリ上で使う際にはMonaca IDEではなく、Monaca Localkitと組み合わせて使うのがお勧めです。ぜひお試しください!

CSSで印刷レイアウトをコントロール

Webサイトを制作する上で印刷された時の見栄えを考慮しなければならないことがたまにあります。
考慮しないでコーディングをしてしまうと印刷時にコンテンツが複数ページにわたってしまい変なところで別ページに分割されることがあります。

それをこんな感じに綺麗に改ページを行うためのHTMLの構成とCSSの組み方を考えてみます。


Chromeを使って確認したコードなのでChromeで確認して下さい。

HTML構成


まず、HTMLの構成から考えてみます。

1つのページは<section>タグを使用します。
そして、複数のページを<article>タグでまとめます。

つまりHTMLとしては下記のような構成になります。



<article>
    <section>
         <h1>1ページ目</h1>
    </section>
    <section>
         <h1>2ページ目</h1>
    </section>
    <section>
         <h1>3ページ目</h1>
    </section>
</article>


改ページ


ここにCSSを当てていき印刷すると綺麗にページが分かれるように組んでいきます。

まず、<section>タグに.print_page、<article>タグに.print_pagesというクラスを付けていきます。
ついでにprint.cssというスタイルシートを読み込みます。



<link media="print" rel="stylesheet" href="print.css">
<article>
    <section class="print_page">
        <h1>1ページ目</h1>
    </section>
    <section class="print_page">
        <h1>2ページ目</h1>
    </section>
    <section class="print_page">
        <h1>3ページ目</h1>
    </section>
</article>


print.cssに.print_pageクラスの中身を定義していきます。
今回はA4縦でピッタリ印刷できるよう組んでいきます。



.print_page{
    width: 172mm; /* A4縦の幅 */
    height: 251mm; /* A4縦の高さ */
    page-break-after: always; /* 各ページの終わりに改ページ */
}


この状態で印刷プレビューを行うと<section>内の文字列がページごとに分かれるようになっているはずです。

改ページ修正


このままでは空白の4ページ目ができてしまいますので最後のページは改ページさせないようにします。



.print_page{
    width: 172mm;
    height: 251mm;
    page-break-after: always;
}

.print_page:last-child{
    page-break-after: auto; /* 最後のページの改ページを防ぐ */
}


最後の<section>タグにpage-break-afterをautoにすることで最後のページの改行を防ぐことができます。
逆にpage-break-beforeを使って、最初の<section>タグにpage-break-afterをautoとしても同じことができます。

固定ヘッダー


簡単に出来てしまいましたがこのままではつまらないので固定ヘッダーを入れてみます。



.print_page{
    width: 172mm;
    height: 251mm;
    page-break-after: always;
    position: relative; /* 固定ヘッダーの基準座標を定義 */
}

.print_page:last-child{
    page-break-after: auto;
}
 
.print_page:before{
    position: absolute; /* 位置の相対指定 */
    right: 0; /* 右から0ピクセルの位置指定 */
    top: 0; /* 上から0ピクセルの位置指定 */
    content: "Asial CSS Print Demo"; /* ヘッダーのテキスト */
}


.print_pageのスタイルにposition: relative;を入れた後にbefore擬似要素でヘッダーを入れます。
position: relative;を入れないと1ページ目の右上にヘッダーが集まってしまうので気をつけてください。

これで各ページの右上にAsial CSS Print Demoという文字が表示されます。

固定フッターとCSSによる自動付番


最後に各ページのフッターにCSSだけを使ってページ番号を入れてみたいと思います。



.print_page{
    width: 172mm;
    height: 251mm;
    page-break-after: always;
    position: relative;
    counter-increment: print_page_count; /* ページ番号のインクリメント */
}

.print_page:last-child{
    page-break-after: auto;
}

.print_page:before{
    position: absolute;
    right: 0;
    top: 0;
    content: "Asial CSS Print Demo";
}

.print_page:after{
    position: absolute; /* 位置の相対指定 */
    right: 0; /* 右から0ピクセルの位置指定 */
    bottom: 0; /* 下から0ピクセルの位置指定 */
    content: counter(print_page_count) "ページ"; /* ページ番号を擬似要素に表示 */
}


使用するCSSプロパティはcounter-incrementとcounterです。
このプロパティを使用するとCSS内でカウント用の変数を扱うことができ擬似要素内で表示させることができます。

変数名は何でもいいのですが分かりやすい名前としてprint_page_countという変数名にしました。

この状態で印刷プレビューをすると3ページに分かれ、なおかつ固定のヘッダーとフッターが各ページに表示されるはずです。

あまり用途がないノウハウではありますがいざとなった時のために覚えておいて損は無いと思います。

CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう

皆様、ご無沙汰しております。笹亀です。
ブログを公開させていただくペースが遅くなってしまいました・・申し訳ございません。そのことが災いしたのか、先日、自分のスマートフォンを落としてしまい、液晶が派手に割れてしまいました。

さて最近、仕事をしている中でPC系だけではなく、スマートフォン系のサイトを作成をすることはもはや当たり前になってきました。そんなスマートフォンサイトでもさらにタブレットにも対応をさせたWebサイトの構築を求められることが多くなってきています。タブレットに対応させるサイトの構築方法ですが、様々なものが考えられます。
例えば動的にタブレットスマートフォンを判定して、テンプレートを出し分けするといった対応する方法やViewPortを固定値にして作成する方法などがございます。
今回はViewPortは下記のようにデバイスのサイズにした状態でCSS3のメディアクエリというものを利用した方法をご紹介したいと思います。


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


メディアクエリとはメディアタイプとメディア特性を必要とする一つ以上の条件式からなりたちます。メディアタイプには様々なものがあり、それぞれの条件にあったときに特定のスタイルを適応することができます。
参考:メディアクエリ

今回はスマートフォンタブレットなどを想定した画面サイズの違いによって、適応するスタイルを変更するといったことをおこないます。簡単なサンプル用のHTMLとメディアクエリを記載したCSSを用意して説明致します。

sample.html




<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no" />

	<link rel="stylesheet" href="./css/sample.css" />
	<title>メディアクエリのサンプル</title>
</head>
<body id="top">
<div id="page">
<header class="global">
	<div id="header_inner">
		<p class="headerlogo"><a href="https://www.asial.co.jpimg/logo.png &mode=1" class="popupimg"><img src="https://www.asial.co.jpimg/logo.png"></a></p>
	</div>
</header>

<section class="main">
	<div class="test_1">
		<h3><a href="https://www.asial.co.jpimg/sample.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimg/sample.jpg"></a></h3>
		<div class="test_1_inner">
			<ul class="list">
			<li><a><p class="head">ブログAほげほげほげほげほげほげほげほげほげほげほげほげほげ</p><p class="time">2013年5月21日</p></a></li>
			<li><a><p class="head">ブログB</p><p class="time">2013年5月20日</p></a></li>
			<li><a><p class="head">ブログC</p><p class="time">2013年5月19日</p></a></li>
			</ul>
		</div>
	</div><!-- //.test_1 -->
	
	<div class="test_2">
		<div class="text_big">文字サイズ大</div>
		<div class="text_middle">文字サイズ中</div>
		<div class="text_small">文字サイズ小</div>
		<div class="copy">Copyright &copy; Asial Corporation All rights Reserved.</div>
	</div>
</section>
</div>
</body>
</html>


sample.css




/** header-start **/
header.global {
background: #fe9700; /* Old browsers */
background: -moz-linear-gradient(top, #fe9700 0%, #fed919 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe9700), color-stop(100%,#fed919)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fe9700 0%,#fed919 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fe9700 0%,#fed919 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fe9700 0%,#fed919 100%); /* IE10+ */
background: linear-gradient(to bottom, #fe9700 0%,#fed919 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9700', endColorstr='#fed919',GradientType=0 ); /* IE6-8 */
position: relative;
height: 190px;
}

header.global .headerlogo {
	float: left;
	width: 460px;
}

header.global .headerlogo #header_rogo{
	width: 460px;
	height: 50px;
}
/** header-end **/




/* test_1-start */
section.main .test_1 h3{
	text-align: center;
}

section.main .test_1 ul.list{
	overflow: hidden;
	border:solid 1px #ddd;
	width: 620px;
	margin: 0 auto 17px;
	background-color: #fff;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	list-style-type: none;
	padding-right: 40px;	
}

section.main .test_1 ul.list li{
	background-image:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%); 
	background-image:-webkit-gradient(linear,left top, left bottom,,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(229,229,229)));
	background-image:-webkit-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
	background-image:-o-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
	background-image:linear-gradient(to bottom,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
	border-top:solid 1px #ddd;
	margin-top: -1px;
}

section.main .test_1 ul.list li a{
	height: 100%;
	color: #000;
	text-decoration: none;
	font-size: 27px;
	display: block;
	padding: 10px 15px;
}

section.main .test_1 ul li a p.head{
	margin-bottom:0;
	width: 100%;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

/* test_1-end */

/* test_1-start */
section.main .test_2{
	width: 100%;
	text-align: center;
	background-color: #7FFFD4;
}

section.main .test_2 .text_big{
	font-size: 48px;
}

section.main .test_2 .text_middle{
	font-size: 32px;
}

section.main .test_2 .text_small{
	font-size: 18px;
}

section.main .test_2 .copy{
	font-size: 20px;
	padding-top: 50px;
	text-align: center;
	color: #333;
	font-weight: normal;
}

/* test_2-end */

/* メディアクエリー部分 */
@media screen and (max-width: 720px) {
	/** header-start **/
	header.global{
		height: 95px;
	}
	header.global .headerlogo {
		width:230px;
	}
	header.global .headerlogo #header_rogo{
		width: 230px;
		height: 25px;
	}
	/** header-end **/
	
	/* test_1-start */
	section.main .test_1{
		padding-top:43px;
		background-size: 112px 36px, auto auto;
		background-position: right 10px, 0 0;
	}
	section.main .test_1 h3{
		width: 360px;
		text-align: center;
	}
	section.main .test_1 h3 img{
		width: 210px;
		height: 140px;
	}
	
	section.main .test_1 ul.list{
		overflow: hidden;
		border:solid 1px #ddd;
		width: 320px;
		margin: 0 auto 8px;
		background-color: #fff;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	section.main .test_1 ul.list li{	

		border-top:solid 1px #ddd;
		margin-top: -1px;
		/* height: 43px; */
	}
	section.main .test_1 ul.list li a{
		font-size: 13px;
		padding: 4px 7px;
	}
	section.main .test_1 ul.list li a .time{
		font-size: 6px;
	}
	/* test_1-end */
	
	/* test_2-start */
	section.main .test_2 .text_big{
		font-size: 24px;
	}

	section.main .test_2 .text_middle{
		font-size: 16px;
	}

	section.main .test_2 .text_small{
		font-size: 9px;
	}

	section.main .test_2 .copy{
		font-size: 10px;
		padding-top: 25px;
		text-align: center;
		color: #333;
		font-weight: normal;
	}
	/* test_2-end */

}


少しサンプルHTMLとCSSが長くなりましたが、こちらをベースにして説明をさせていただきます。メディアクエリにてスタイルを変更する際の注意点ですが、素材などのコンテンツについてスタイルを分ける中で一番解像度が大きいもの、今回の場合ですとタブレットの素材で作成するようにします。例えばタブレット用に用意した画像素材は、スマートフォンなどで表示する際にはタブレットより小さい解像度のときは比率を合わせて縮小して利用します。


例)タブレット用に準備した画像のサイズ:720x400 → スマートフォンで表示するサイズ:300x166


それではメディアクエリの説明をさせていただきます。メディアクエリはメディアタイプのその条件を指定し、条件内に記載されているスタイルが記載した条件にマッチするときにスタイルとして適応されます。下記の条件は、出力デバイスの描画域の横サイズが720ピクセル以下の場合にスタイルが適応されます。


@media screen and (max-width: 720px) {
 ・・・・
}


複数の条件を設定することも可能で、下記のようにすると出力デバイスの描画域の横サイズが500ピクセルから800ピクセルの場合にスタイルが適応されます。


@media screen and (min-width: 500px) and (max-width: 800px) {
 ・・・・
}


sample.cssに記載されたメディアクエリは、720ピクセル以下の場合に通常で読み込んでいるスタイルを上書きして、条件内に記載しているスタイルが適応されることになります。

横サイズ:1024px



※ロゴの画像のスタイルは条件にマッチしないため、下記のスタイルが適応されている。


header.global .headerlogo #header_rogo{
  width: 460px;
  height: 50px;
}

富士山の画像についても同様に下記のスタイルが適応されている。


section.main .test_1 h3{
  text-align: center;
}

文字サイズを横サイズによって大きさを分けて表示する。



section.main .test_1 ul.list li a{
  height: 100%;
  color: #000;
  text-decoration: none;
  font-size: 27px;
  display: block;
  padding: 10px 15px;
}

section.main .test_1 ul li a p.head{
  margin-bottom:0;
  width: 100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
section.main .test_2 .text_big{
  font-size: 48px;
}
section.main .test_2 .text_middle{
  font-size: 32px;
}
section.main .test_2 .text_small{
  font-size: 18px;
}
section.main .test_2 .copy{
  font-size: 20px;
  padding-top: 50px;
  text-align: center;
  color: #333;
  font-weight: normal;
}


横サイズ:360px



※ロゴの画像のスタイルは条件にマッチするため条件内の下記のスタイルが適応されている。


header.global .headerlogo #header_rogo{
  width: 230px;
  height: 25px;
}

富士山の画像についても同様に下記のスタイルが適応されている。


section.main .test_1 h3{
  width: 360px;
  text-align: center;
}
section.main .test_1 h3 img{
  width: 210px;
  height: 140px;
}

文字サイズを横サイズによって大きさを分けて表示する。



section.main .test_1 ul.list{
  overflow: hidden;
  border:solid 1px #ddd;
  width: 320px;
  margin: 0 auto 8px;
  background-color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
section.main .test_1 ul.list li{	
  border-top:solid 1px #ddd;
  margin-top: -1px;
}
section.main .test_1 ul.list li a{
  font-size: 13px;
  padding: 4px 7px;
}
section.main .test_1 ul.list li a .time{
  font-size: 6px;
}
section.main .test_2 .text_big{
  font-size: 24px;
}
section.main .test_2 .text_middle{
  font-size: 16px;
}
section.main .test_2 .text_small{
  font-size: 9px;
}
section.main .test_2 .copy{
  font-size: 10px;
  padding-top: 25px;
  text-align: center;
  color: #333;
  font-weight: normal;
}


このようにメディアクエリを使用するとスマートフォンタブレットのように解像度が異なる端末でも、動的にテンプレートを切り替えることなくスタイルのみを切り分けるだけで対応することができます。
今回の例では2種類の切り分けのみでしたが、スマホタブレット特有の画面の縦表示・横表示の切り替えに対応するために数種類のサイズを用意することも可能です。


@media screen and (max-width: 360px) {
 ・・・・
}
@media screen and (min-width: 361px) and (max-width: 600px) {
 ・・・・
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
 ・・・・
}


おまけ


1行以上の文字列を折り返して表示をしたくなくて、文字数をカウントして◯◯以上の文字の場合は「...」にするということをよくおこないます。
文字数をカウントしてJSで切ったり、VIEW側でVIEWのヘルパーを使ったりといった対応をする方もいらっしゃると思います。
CSSでも対応できます。



<div class="test_1_inner">
  <ul class="list">
  <li><a><p class="head">Web標準のHTML5,JavaScript, CSSでスマフォアプリ未経験者でも簡単にアプリ開発ができます。</p><p class="time">2013年5月21日</p></a></li>
  <li><a><p class="head">ブログB</p><p class="time">2013年5月20日</p></a></li>
  <li><a><p class="head">ブログC</p><p class="time">2013年5月19日</p></a></li>
  </ul>
</div>



section.main .test_1 ul li a p.head{
  margin-bottom:0;
  width: 100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}


画像ではうまく伝わらないかと思いますので、そんな方はサンプルをブラウザで開き、ブラウザの横サイズを小さくしたり、大きくしたりしてみてください。スタイルがきりかわっているのがわかると思います。

次回は内容がガラッと変わりますが、postgresのレプリケーションについて興味があるので試しながらブログにしたいと思います。
それでは、皆様、良い、プログラミングライフを〜

CSSだけで簡単に吹き出しを作成する方法4つ!

こんにちは、橋本です。

今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。

今回ご紹介するサンプルは4つ


  1. 一般的な三角の吹き出し

  2. 一般的な三角の吹き出し(ボーダー付き)

  3. ぽわわーんとした吹き出し

  4. 丸い(曲線の)吹き出し



4つのサンプルの実行結果は、ここで確認できます。
IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。
IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。


それでは1つ1つ見て行きましょう。

1.一般的な三角の吹き出し



まずはソースから。



<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            * {
                box-sizing: border-box;
            }

            .wrapper {
                padding: 30px;
                position: relative;
            } 

            .box {
                position: relative;
                background: #ccc;
                height: 50px;
                width: 100px;
                margin-bottom: 20px;
            }

            .box:after {
                content: '';
                position: absolute;
                border-top: 10px solid #ccc;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                bottom: -9px;
                left: 5px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
            </div>
        </div>
    </body>
</html>


ベースのHTMLはいたってシンプルです。
boxというクラスがついているdivに対して吹き出しをつけていきます。

吹き出しは、after疑似要素を使って絶対配置で付けます。
そのため、wrapperクラスに対してposition:relativeを指定し、boxクラスのafter擬似要素にposition:absoluteを指定しています。
吹き出しは、borderを使って表示します。
高さと幅が0の要素に対してborderを指定すると、各位置のボーダーが三角形で表示されます。
これを利用して三角形の吹き出しを作成します。

今回のサンプルでは、boxクラスの下に下向きの三角形の吹き出しを作成するため、border-topに下向きの三角形の部分となる指定をいれます。
border-topを指定するだけだと三角にならないので、border-leftとborder-rightを指定して、border-topが三角になるようにします。
colorにtransparent(透過色)を指定することで、border-leftとborder-rightを見えなくし、見事に下向きの三角形が完成します。
あとは、top(bottom)とleft(right)で吹き出しの表示位置を調整してあげれば完成です。

簡単ですね!

上付きの吹き出しや、左右付きの吹き出しを作成したい場合は、表示するborderとtransparentのborderの組み合わせを変えることで簡単に実現することができます。
上付きと左右付きの吹き出しのサンプルは、ここのソースを参照してください。

2.一般的な三角の吹き出し(ボーダー付き)



1で紹介したサンプルにちょっと手を加えることで、ボーダー付きの吹き出しを作ることができます。
ソースはこんな感じです。



<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            * {
                box-sizing: border-box;
            }

            .wrapper {
                padding: 30px;
                position: relative;
            } 

            .box {
                position: relative;
                background: #ccc;
                height: 50px;
                width: 100px;
                margin-bottom: 20px;
                border: 1px solid #999;
            }

            .box:after {
                content: '';
                position: absolute;
                border-top: 10px solid #ccc;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                bottom: -9px;
                left: 5px;
            }

            .box:before {
                content: '';
                position: absolute;
                border-top: 10px solid #999;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                bottom: -11px;
                left: 5px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
            </div>
        </div>
    </body>
</html>


1のソースと違うところは、boxクラスにborderを追加したことと、boxクラスのbefore要素を追加したことです。
before要素の指定内容はafter要素の指定内容とほぼ同じです。
違いは、border-topの色をboxクラスのborderの色と合わせたことと、bottomの位置をafter擬似要素よりも下に表示されるようにbottomの値を変更したところです。
仕組みは簡単で、before要素がafter要素からはみ出すように表示することで、あたかもborderが表示されるようにしている。ただ、それだけです。

簡単ですね!

1と同様に、上付きの吹き出しや、左右付きの吹き出しを作成したい場合は、表示するborderとtransparentのborderの組み合わせを変えることで簡単に実現することができます。
上付きと左右付きの吹き出しのサンプルは、ここのソースを参照してください。

3.ぽわわーんとした吹き出し



頭の中で考えていることなどを表示するときによく使われる、「ぽわわーん」とした吹き出しの作成方法です。

まずはソースです。


<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link media="all" rel="stylesheet" href="css/reset.css" type="text/css" />
        <style type="text/css">
            * {
                box-sizing: border-box;
            }

            .wrapper {
                padding: 30px;
                position: relative;
            } 

            .box {
                position: relative;
                background: #ccc;
                height: 70px;
                width: 100px;
                margin-bottom: 20px;
                border-radius: 50px;
            }

            .box:before {
                content: '';
                position: absolute;
                background: #ccc;
                height: 20px;
                width: 20px;
                border-radius: 10px;
                bottom: -20px;
                left: 70px;
            }

            .box:after {
                content: '';
                position: absolute;
                background: #ccc;
                height: 10px;
                width: 10px;
                border-radius: 5px;
                bottom: -30px;
                left: 90px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
            </div>
        </div>
    </body>
</html>


1、2のサンプルと同様に、before擬似要素とafter擬似要素を使って吹き出し部分を作っていきます。
今回のサンプルでは、before要素で大きめの丸を、after要素で小さめの丸を作成しています。
擬似要素で丸を作るのは簡単で、高さと幅を同じ大きさに合わせて、border-radiusに高さ(幅)の半分の大きさを指定してやると丸を作成することができます。
あとは、top(bottom)とleft(right)で丸の表示位置を調整してあげれば完成です。

簡単ですね!

丸の表示位置を変更することで、上付き、左右付きも簡単に作成することができます。

4.丸い(曲線の)吹き出し



最後に丸い(曲線の)吹き出しです。

まずはソース



<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link media="all" rel="stylesheet" href="css/reset.css" type="text/css" />
        <style type="text/css">
            * {
                box-sizing: border-box;
            }

            .wrapper {
                padding: 30px;
                position: relative;
            } 

            .box {
                position: relative;
                background: #ccc;
                height: 70px;
                width: 100px;
                margin-bottom: 20px;
                border-radius: 50px;
            }

            .box:after {
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                border-radius: 25px;
                z-index: -1;
                background: #fff;
                bottom: -20px;
                left: 50px;
            }

            .box:before {
                content: '';
                position: absolute;
                height: 50px;
                width: 50px;
                border-radius: 25px;
                z-index: -1;
                background: #ccc;
                bottom: -15px;
                left: 35px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
            </div>
        </div>
    </body>
</html>


曲線の吹き出しもafter擬似要素、before擬似要素で作成します。
まずは3のサンプルと同様に、after要素とbefore要素に高さ、幅、border-radiusを指定して、丸を作成します。

次に、after要素とbefore要素の両方にz-index:-1を指定して、boxクラスの要素の後ろに隠れるようにします。

いよいよ曲線の作り方なのですが、after要素には背景色と同じ色(今回のサンプルでは#fff)を指定し、before要素には吹き出しの色を指定します。
そして、before要素とafter要素のtop(bottom)、left(right)の位置を調整して、吹き出し色の丸の上に背景色の丸がずれて重なるようにします。
吹き出し色の丸に背景色の丸を重ねてやることで、あたかも曲線の吹き出しが表示されているように見せるというわけです。

簡単ですね!

背景色の丸の位置を調整することで、吹き出しの太さを変更する事も簡単にできます。


今回紹介した方法は、アシアルブログやアシアルHPの中でも実際に使用しています。
非常に簡単に実装できるのでみなさんもぜひ試してみてください!

WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass

こんにちは、鴨田です。

最近、チラホラとSCSSの記事を見かけるようになり、
どう考えても導入しない理由がないので、始めてみました。
もろもろのインストールから、コーディング開始まで15分もあれば十分ですので、
是非、みなさまも導入してみてください。

筆者、Windows環境なので、Windowsでの導入手順になります。



Rubyのインストール


SCSS+Compassの動作(コンパイル)環境はRubyなので、
まずはRubyをインストールします。

RubyInstaller for Windows

2013年2月26日現在、最新版は2.0.0なので、こちらをインストールします。
2.0系列ですが、安定版なので、特に問題ありません。



ダウンロード後、インストーラーを起動して、そのまま進めていってください。

途中で一つだけ注意点があります。
保存先とPATHの設定という画面まで来たら、
Rubyの保存先の確認(Cドライブ直下に置くのが嫌な場合は変更してください)と
選択項目中段の「Rubyの実行ファイルへ環境変数PATHを設定する」だけは
チェックするのを忘れないでください。



作業を続けていくと、あっという間にRubyのインストールは完了します。
では、ちゃんとインストールできたかどうかの確認を行います。

Windowsボタン+R」もしくは「スタート→プログラムとファイルの検索」で、
"cmd"と打ち込んで、Enterしてください。



コマンドプロンプトが起動したら、下記コマンドを打ち込んで、Enterキーを押します。



ruby -v

下記、画面のように表示されれば、Rubyがインストールされています。



続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。



gem update --system

最新の状態であれば、下記のように表示されます。



最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。
SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、
ウィンドウは閉じずにいてください。



● SassとCompassインストール



そういえば、ここまで何の説明もなく来てしまいましたが、
SassとかSCSSとかComapssって何?という方もいるかと思いますので、
ちょっとだけ説明をします。

Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、
ミックスイン(機能テンプレートのようなもの?)や変数を扱えたりしますが、
CSSとは似て非なるものなので、少し扱いづらい言語です。

そこでSassの新しい形として誕生したのがSCSSです。
SCSSは、CSSを拡張した文法なので、
(実際のところ、CSSをそのまま書いても問題ない)
学習コストがほぼ必要ない上に、Sassの機能をそのまま使えます。

では、Compassは何なのかというと、
ミックスインのライブラリのようなものでしょうか。

おそらく使っている内に分かってくるのではないかと思いますので、
先に進みましょう。

Sassをインストールします。



gem install sass



Compassをインストールします。



gem install compass



これでSassとCompassのインストールが完了しました。



Dreamweaverの設定



Dreamweaverを使用していない人は無視して、次の章飛んでください。

Dreamweaverのデフォルト設定では、.scssファイルを正常に認識しないため、
いくつか設定変更を行う必要があります。

■scssファイルをコードビューで開く

ファイル→環境設定→ファイルタイプ/エディタ
「コードビューで開く」に、半角スペース区切りで、".scss"を追加してください。



■scssファイルにコードヒントを適用

Windows7系であれば、下記ファイルをバックアップした上で、編集してください。

C:\Program Files (x86)\Adobe\Adobe Dreamweaver (CS4)\configuration\DocumentTypes
MMDocumentTypes.xml

見つからなければ、Cドライブごと「MMDocumentTypes.xml」で検索してください。

変更前


<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false">


変更後


<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false">

Dreamweaverの設定は以上です。



● プロジェクトの設定



プロジェクトフォルダをどこか好きなところに作成してください。
例えば、構成を下記のようにします。

Project/
css/
├_scss/
├js/
├images/
├config.rb
├compile.bat
└index.html

そして、そのフォルダ直下に"config.rb"というテキストファイルを作成します。
中身は、プロジェクト構成に沿って、下記のようにします。



http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

続いて、フォルダ直下に"compile.bat"というテキストファイルを作成します。
内容は、下記一行です。



compass watch

SCSSファイルは、修正する度にコンパイルする必要があるので、
バッチ処理化することで、保存される度にコンパイルし直すと便利です。
そのためのファイルになります。

作成し終えたら、"compile.bat"ファイルを起動します。
作業開始前に、必ず起動するようにしましょう。





● SCSSファイルの作成



"_scss"フォルダの中に、test.scssファイルを作成してください。
SCSSでどんなことが出来るのか、試してみましょう。

test.scss


@import "compass";

/* reset */
@import "compass/reset";

/* variable */
$h1_color: #123456;

h1 {
  color: $h1_color;
}

/* mixin */

p {
  @include box-shadow(1px 1px 0 #ccc);
}

/* nest */

section {
  background: #000;
  nav {
    background: #333;
  }
}

/* extend */

h2 {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
}

h3 {
  @extend h2;
  font-size: 14px;
  text-align: center;
}


出力されるtest.css


/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* variable */
h1 {
  color: #123456;
}

/* mixin */
p {
  -webkit-box-shadow: 1px 1px 0 #cccccc;
  -moz-box-shadow: 1px 1px 0 #cccccc;
  box-shadow: 1px 1px 0 #cccccc;
}

/* nest */
section {
  background: #000;
}
section nav {
  background: #333;
}

/* extend */
h2, h3 {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
}

h3 {
  font-size: 14px;
  text-align: center;
}




● SCSSファイルの説明



Compassのインポート



@import "compass";

Compassの機能を使う場合、必ず付けておいてください。

■reset.cssのインポート



/* reset */
@import "compass/reset";

コンパスの機能の一つになりますが、
これだけでreset.cssのインポートをすることが出来ます。

■変数

scss


/* variable */
$h1_color: #123456;

h1 {
  color: $h1_color;
}


css


/* variable */
h1 {
  color: #123456;
}

変数機能です。
変数名には$を付けて、:以降が変数になります。
CSSライクな書き方ですね。

■ミックスイン



/* mixin */
p {
  @include box-shadow(1px 1px 0 #ccc);
}




/* mixin */
p {
  -webkit-box-shadow: 1px 1px 0 #cccccc;
  -moz-box-shadow: 1px 1px 0 #cccccc;
  box-shadow: 1px 1px 0 #cccccc;
}

Compassで用意されているミックスインの一つで、
box-shadowの各ベンダープリフィックスが一行で書けます。

■ネスト



/* nest */
section {
  background: #000;
  nav {
    background: #333;
  }
}




/* nest */
section {
  background: #000;
}
section nav {
  background: #333;
}

SCSSのネスト表現です。
入れ子に出来るため、コード量が減ります。

■継承



/* extend */
h2 {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
}

h3 {
  @extend h2;
  font-size: 14px;
  text-align: center;
}




/* extend */
h2, h3 {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
}

h3 {
  font-size: 14px;
  text-align: center;
}

タグ名やクラス名で、要素の継承をすることが出来ます。
冗長になりがちなコードの整理が可能です。



以上、駆け足での説明となってしまいましたが、
SCSS+Compassの導入から使い方の概要になります。

今回のブログ作成にあたり、下記参照させていただきました。

コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

Sass を使うなら、Compass も使うと便利

SassとDreamweaverのコードヒントでCSSをさらに効率的に

SCSSとCompassの使い方に関しては、下記記事に詳しいです。

CSSの常識が変わる!「Compass」、基礎から応用まで!

これを機会に、是非導入をオススメします。

PhoneGap-UserGroup 第1回 勉強会@東京レポート

こんにちは、塚田です。

昨日、PhoneGap-UserGroup 第1回 勉強会@東京に参加してきましたので、その様子をレポートしたいと思います。

Adobe社があるゲートシティ大崎の大ホールに集まったのは約200名のエンジニアの方々。
定員オーバーで参加できなかった人も多数いたとか。

第1回の勉強会からこれだけの人が集まるというのはPhoneGapの注目度が高まっているということですね。

弊社でもこれまで『PhoneGap 入門ガイド』の出版や、公式ドキュメントの邦訳など微力ながらPhoneGapの普及に努めてきましたので、非常にうれしいことです。

まず、主催者である有川さんからPhoneGapの始め方と題して、iOSAndroid向けのPhoneGapの環境構築の説明が有りました。


続いてAdobeエバンジェリストのPlotrさんがPhoneGapの現状と今後の展開について発表。
Parse.comとjQuery Mobileを使ってのライブコーディングで、簡単なロケーションベースのソーシャルネットワークアプリを作る過程を説明してくれました。



その後、PhoneGapの事例発表が続きます。
1番手は株式会社ニーロクの新井さん。ニーロク社はおそらく日本で唯一のHTML5に特化したアプリ開発会社
自社で作られた潮位情報を提供するアプリをPhoneGapの事例として紹介してくれました。



2番手は弊社の田中が務めさせていただきました。
田中からは、Monacaの紹介と弊社で開発している三三株式会社の名刺管理アプリEightの紹介をさせていただきました。
特にアプリの高速化の観点での課題とその解決方法について解説をさせていただきました。



トリを務めたのは、株式会社ICSの池田さん。池田さんはTool Kit for Create JSとPhoneGapを使ってFlashアプリをiOSアプリに変換するデモンストレーションを実施。Flashエンジニアの方も多く参加していたようで、注目度も高かったようです。



内容も盛りだくさんで非常に盛況な勉強会でした。

すでに、9月に第2回の大阪、第3回の東京の開催も決まっているとのことです。
ご興味のある方はPhoneGap-UserGroupのFacebookページで告知がされるとのことなので、そちらをご注目ください。

発表者の皆さん共通に日本語の情報の不足やノウハウの流通不足をPhoneGap普及の課題だと指摘されてましたので、我々も今まで以上にPhoneGap関連情報やHTML5関連のノウハウを積極的に公開したいと思いますのでご期待ください。

超便利!Twitter BootstrapでさくさくWeb開発

新年度です!
新入学、新入社を迎えるみなさん、おめでとうございます。

エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか?
カッコよくって統一的なデザインがほしい!でもデザインセンスないし…実は私もそうでした。
ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます!

Twitter Bootstrapとはなにか



Twitter Bootstrap
CSSフレームワークです。
Web上に使ってみた!スゲー!等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい(クラス名など結構ガラっと変わっています)。
今回ご説明しているのは、Twitter Bootstrap 2についてです。


サイトにTwitter Bootstrapを導入しよう!



一番簡単な導入方法は、CSSをダウンロードして設置するだけです!
公式サイトのデカ白ボタン「Download Bootstrap」をクリックし、zipファイルをダウンロードしましょう。
解凍してできたcss、img、jsのディレクトリごと設置します。



<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>


bootstrap.jsは、BootstrapのJavascriptプラグインを含んでいるjsファイルです。
プラグインを読み込むと、モーダルウィンドウやドロップダウン、タブといった動きのあるコンポーネントを簡単に表現することができます。
jqueryに依存しているので、jquery→bootstrap.jsの順で読み込みましょう。
bootstrap.jsのように、すべてのコンポーネントをまとめたものではなく、個別のコンポーネントで良い!という場合は、
一覧ページ(http://twitter.github.com/bootstrap/javascript.html)から好きなコンポーネントのjsファイルをダウンロードしてください。


レイアウト



Twitter Bootstrapが提供しているレイアウトは、大きくわけて二つです。
固定幅レイアウト:940pxからなる固定幅レイアウトです。
流動幅レイアウト:画面のサイズに併せて流動的なサイズになるレイアウトです。

これらをコンテナと呼びましょう。
コンテナの中に、ボックスを置くようにコンテンツを置きたい場合があります。そこで使うのがgridです。
グリッドは横幅を12個に分割しており、span1〜span12で表します。



上記の例だと、span4とspan8、4:8のグリッド領域がわかると思います。
Hello, world!のグリッド領域がspan12なので、どのように分かれているかわかりやすいですね。

それぞれのレイアウトでグリッドを使うと、下記のようになります。
・固定幅レイアウト


<div class="container">
  <div class="row">
    <div class="span4">
      Span4の中身
    </div>
    <div class="span8">
      Span8の中身
    </div>
  </div>
</div>


・流動幅レイアウト


<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      Span4の中身
    </div>
    <div class="span8">
      Span8の中身
    </div>
  </div>
</div>



Preタグで囲むコード



エンジニアの皆さんなら、ブログにコードを書きたいですよね。
Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。

codeタグで囲む
赤くなります。
preタグで囲む
囲み枠がつき、灰色になります。
Preタグ+Google Prettifyを使う
preタグのclassに、prettyprint linenums を入れましょう。
これが超かっこいい!!コードを見せるならこれがよさそうですね!



さて、かっこいいGoogle Prettifyですが、こちら、ちょっと頑張らないとかっこ良くならないようです。
ここからGoogle Code Prettifyのjsファイルをダウンロードします。
http://code.google.com/p/google-code-prettify/
そして、このCSSを保存し、JSと共に読み込んで下さい。



.com {
      color: #93A1A1;
}
.lit {
      color: #195F91;
}
.pun, .opn, .clo {
      color: #93A1A1;
}
.fun {
      color: #DC322F;
}
.str, .atv {
      color: #DD1144;
}
.kwd, .linenums .tag {
      color: #1E347B;
}
.typ, .atn, .dec, .var {
      color: teal;
}
.pln {
      color: #48484C;
}
.prettyprint {
      background-color: #F7F7F9;
      border: 1px solid #E1E1E8;
      padding: 8px;
}
.prettyprint.linenums {
      box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
}
ol.linenums {
      margin: 0 0 0 33px;
}
ol.linenums li {
  color: #BEBEC5;
  line-height: 18px;
  padding-left: 12px;
  text-shadow: 0 1px 0 #FFFFFF;
}


どうやら、Google Codeのバージョンが上がったか何かで、Twitter Bootstrapの思う通りに表示されないようです。
(上記のCSSは、Twitter Bootstrapの公式サイトがローカルから読み込んでいるものと同じ内容です。)



テーブル



クラスを付けない状態だと罫線が表示されませんが、クラスをつけることによって、5種類のスタイルを利用できます。
1: table
行ごとに下線が引かれます。
2: table table-striped
行ごとに下線が引かれたうえに、偶数行に背景色がつきます。
3: table table-bordered
テーブルのセルに全て線が入ります。テーブル自体は角丸になります。
4: table table-condensed
tableよりも、無駄な余白が少なくなります。
5: table table-striped table-bordered table-condensed
上記の全部入り!




フォーム



フォームはさまざまなプロパティがあるので、ここで説明するよりも公式サイトを見たほうが早いかと思います。
spanでinputタグの幅を指定できたり、フォーカスが当たると青い影がついたり、とても便利です。




ボタン、ラベル



inputタグとaタグは、btnというクラスを付加するだけで簡単にきれいなボタンになります。
画像を使わずにこのボタンが表現できるのは嬉しいですね!
大きさも3種類、色も場面によって使い分けられます。
ラベルはボタンクラスの「btn」を「label」と読み替えるだけで作成できます。親戚のようなかんじです。




アイコン



iタグにアイコン名を指定するだけで、かわいいアイコンを全部使うことができます!
解答したbootstrapの画像ディレクトリに、2つの画像が入っていたと思います。これは、黒いアイコンの画像集と白抜きアイコンの画像集です。
これらのアイコンは、ボタンなどと組み合わせて使うことができます。
背景が暗めのボタンでは白抜きのアイコンを使うよう、CSSで指定できます。



<a class="btn"><i class="icon-pencil"></i> 黒いアイコンを使うとき</a>
<a class="btn btn-primary"><i class="icon-pencil icon-white"></a> 白抜きアイコンを使うとき</a>





アラートボックス



divタグにクラスalertをつけると、アラートメッセージが出せるようになります。
色は4種類あり、黄色以外のボックスにするには、alertとalert-successなど、色に対応したクラスを一緒に付与します。




ひな形がほしい!



公式サイトに、ベーシックな3種類の型が置いてあります。
http://twitter.github.com/bootstrap/examples.html


色を変えたい!



このサイトから、好きな色を探してみては?
http://bootswatch.com/

Twitter BootstrapではLESSを採用しており、自分で好きな色を決めてコンパイルすることも可能ですが、ちょっと面倒ですよね。
このサイトで、細かく色を決めるのはどうでしょうか?
http://stylebootstrap.info/
公式でも、カスタマイズしたcssをダウンロードすることができます。
http://twitter.github.com/bootstrap/download.html


はじめは少々戸惑うかもしれませんが、慣れれば心強いCSSフレームワーク
Twitter bootstrapを使ってどんどんWebアプリケーションを作って下さい!

【css】とっても簡単に画像を縦横中央寄せする方法

こんにちは。松田です。
最近はスマフォの案件を担当しておりhtmlとjavascriptばっかりいじっています。
先日、開発中のスマフォアプリで異常にメモリが消費される現象が起こり、これがタグの構造が深すぎると起きるのでは無いかという検証を行うために、出来るだけ少ないタグで画像を中央寄せさせたい場面がありました。
そこで弊社デザイナーのkamoさんに頼んだところ、なかなかカッコいい回答が返ってきたのでここに載せてしまいます。


まず画像をdivで囲みます。


<div id="wrapper">
  <a href="https://www.asial.co.jp画像のパス &mode=1" class="popupimg"><img src="https://www.asial.co.jp画像のパス"></a>
</div>



次に以下の様にstyleを設定します。


<style>

#wrapper {
  width:500px;
  height:500px;
  line-height:500px; /* heightと同じ値 */
  text-align:center;
  vertical-align:middle;
}

#center-image {
  vertical-align:middle;
}

</style>



ここまでの状態で表示すると下のようになります。




まだこの段階では縦の中央寄せができていませんね。
ここで、画像の両端に&nbsp;を入れます。


<div id="wrapper">
   &nbsp;<a href="https://www.asial.co.jp画像のパス &mode=1" class="popupimg"><img src="https://www.asial.co.jp画像のパス"></a> &nbsp;
</div>



これで表示すると、





見事に縦横共にセンタリングされました!
ささっと表示を整えたい時に使えるので試してみてはいかがでしょうか。

safari4 betaで実装されたCSS Animationを使ってみました。

こんにちは。橋本です。

さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。(今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください)

CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。
まずこちらをご覧ください。

Falling Leaves 'Using CSS Animations and Transforms

これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。
では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。

まず、以下のように、キーフレームを定義します。
キーフレームの定義は、「@-webkit-keyframes」+「アニメーション名」で行います。



@-webkit-keyframes sample1 {
  from {
    top: 0px;
    left: 0px;
    animation-timing-function: ease-out;
    -webkit-transform:rotate(-50deg);
    background-color: #ffffff;
  }

  to {
    top: 480px;
    left: 320px;
    animation-timing-function: ease-out;
    -webkit-transform:rotate(50deg);
    background-color: #000000;
  }
}


キーフレームの中では、fromとtoという要素を用いて、アニメーションの始まりの状態と終わりの状態を定義します。
また、fromとtoの代わりに、「%」指定を用いて、経過時間毎の細かい変化を指定することもできます。



@-webkit-keyframes sample2 {
  0% {
    top: 0px;
    left: 0px;
  }

  50% {
    top: 100px;
    left: 100px;
  }
  
  100% {
    top: 200px;
    left: 200px;
  }
}


キーフレームで定義したアニメーションの状態については、一般的なcssのプロパティや「-webkit-transform」を用いた変化を指定出来る他、「animation-timing-function」という指定で、アニメーションの動きの速さの変化を定義することも出来ます。

これについては、ease、linear、ease-in、ease-out、ease-in-out、の四種類を既定値として指定出来る他、cubic-bezierという指定を用いて、独自の動きを定義することも出来ます。
animation-timing-functionについては、こちらのページが参考になります。

Cubic Bezier timing function

次に、定義したアニメーションを実際に使用する方法ですが、アニメーションを適用したい要素に対して、適用するアニメーション名や、オプションを指定していきます。



div {
  -webkit-animation-name: sample; //アニメーション名
  -webkit-animation-duration: 10s; //実行時間
  -webkit-animation-iteration-count: 5; //実行回数
  -webkit-animation-direction: alternate; //反復の有無
  -webkit-animation-play-state: running; //実行状態
  -webkit-animation-delay: 3s; //実行までの待ち時間

  width: 100px;
  height: 100px;
  position: absolute;
}


「-webkit-animation-name」は適用するアニメーションの名前です。
「-webkit-animation-name: sample1, sample2, sample3;」といった形で複数指定することも可能です。

「-webkit-animation-duration」はアニメーションを実行する時間です。
キーフレームで指定した「%」指定はは、ここで定義する時間に対する割合になります。
デフォルト値は「0」となっており、「0」の場合にはアニメーションはは実行されません。

「-webkit-animation-iteration-count」はアニメーションの実行回数です。「infinite」と指定すると、回数無制限に実行します。

「-webkit-animation-direction」は反復の有無です。
デフォルト値は「normal」です。「alternate」と指定することによって、fromからto(0%から100%)までアニメーションを実行した後、toからfromに対して、再度アニメーションを行うように出来ます。

「-webkit-animation-play-state」は実行状態です。「running」と指定することで、アニメーションを実行状態にし、「paused」と指定することで停止状態にすることができます。
javascriptを使ってアニメーションを制御するときに使用するのかもしれませんが、正直使い勝手がいまいち分かっていません(すみません)。

「-webkit-animation-delay」は実行までの待ち時間です。ここで指定した時間の経過後、アニメーションが実行されます。


以上をふまえて簡単にサンプルを作ってみました。
safari4 betaをお持ちの方は是非実行してみてください。
(一応iPhoneでもアニメーションを表示することは出来るのですが、少し挙動不信です。出来ればsafari4 betaを使って見ていただけたらと思います。)

サンプル

コードはこちらです。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
    <title>shootingStar</title>
    <style type="text/css" media="screen">
	    @-webkit-keyframes fall{
	      from {
	        top: -10px;
	      }
	      to {
	        top: 400px;
	        left: 300px;
	      }
	    }
    
	    @-webkit-keyframes fadeout{
	      0% { opacity: 0;}
	      25% { opacity: 1;}
	      70% { opacity: 0.1;}
	      100% { opacity: 0;}
	    }
    
	    @-webkit-keyframes rotate{
	      0% { -webkit-transform: rotate(-180deg);}
	      100% { -webkit-transform: rotate(180deg);}
	    }
    
	    #main {
	      background: #ffffff url(images/bg_machi.jpg);
	      width: 320px;
	      height: 480px;
	    }

	    #star > div {
	      position: absolute;
	      top: -50px;
	      -webkit-animation-name: fall, fadeout, rotate;
	      -webkit-animation-iteration-count: infinite;
	      -webkit-animation-direction: normal;
	      -webkit-animation-timing-function: ease-in;
	    }
    
	    .shooting-star {
	      color: #ffff55;
	      font-size: 0.5em;
	      position: absolute;	
	    }
    
	    #star1 {
	      left: -10px;
	      -webkit-animation-duration: 1.5s;
	      -webkit-animation-delay: 5s;
	    }

	    #star2 {
	      left: 30px;
	    -webkit-animation-duration: 2s;
	    -webkit-animation-delay: 2s;	
	    }
    
	    #star3 {
	      left: 80px;
	      -webkit-animation-duration: 1s;
	      -webkit-animation-delay: 4s;
	    }
    
	    #star4 {
	      left: 150px;
	      -webkit-animation-duration: 1.5s;	
	    }
    
	    #star5 {
	      left: 200px;
	      -webkit-animation-duration: 2s;
	      -webkit-animation-delay: 5s;
	    }
    </style>
  </head>
  <body>
    <div id="main">
      <div id='star'>
        <?php for ($i = 1; $i < 5; $i++): ?> 
            <div id="star<?php echo $i ?>" class="shooting-star">★</div>
        <?php endfor; ?>
      </div>
    </div>
  </body>
</html>


javascriptと上手く組み合わせれば、さらに複雑で面白いアニメーション効果を作ることも出来ると思います。
皆さんも是非試してみてください。

prettyFormsで、フォーム画面をちょっとおしゃれに。

こんにちは。
新型MacBookのデザインの可愛さに惹かれつつも、いまいち購入に踏み切れないないでいる橋本です。
あと500グラム軽ければ、迷うこと無く購入に踏み切るのですが…。

さて、今日は「prettyForms」というツールを紹介します。
このブログを読んでくださっている方の中には、普段業務システムの開発に携わっておられる方もいらっしゃると思います。
業務システムを作成する際には、以下のようなシンプルなフォーム画面を目にすることも多いのではないでしょうか。



ソース


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>入力フォーム</title> 
</head> 
<body>
  <form id="form-sample" name="form-sample" method="post" action="">
  <p>
    <label for="name">お名前</label>
  </p>
  <p>
    <input type="text"name="name" id="name" >
    <br class="clearAll">
  </p>
  <p>
    <label>性別</label>
  </p>
  <p>
    <input type="radio" name="sex" id="man" value="man" checked="checked">
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman" value="woman">
    <label for="woman">女</label>
    <br class="clearAll">
  </p>
  <p>
    <label for="from">出身地</label>
  </p>
  <p>
    <select name="from" id="from">
      <option>----</option>
      <option value="1">東京</option>
      <option value="2">千葉</option>
      <option value="3">埼玉</option>
      <option value="4">沖縄</option>
    </select>
    <br class="clearAll">
  </p>
  <p>
    <label>趣味</label>
  </p>
  <p>
    <input type="checkbox" name="hobby1" id="walking" value="1" />
    <label for="hobby1">ウォーキング</label>
    <input type="checkbox" name="hobby2" id="cooking" value="2" />
    <label for="hobby2">料理</label>
    <input type="checkbox" name="hobby3" id="programming" value="3" />
    <label for="hobby3">プログラミング</label>
    <br class="clearAll">
  </p> 
  <p>
	<label for="message">コメント記入欄</label>
    <textarea name="message" id="message" rows="4" cols="40">一言コメントをどうぞ</textarea>
    <br class="clearAll">
  </p>
  <p>
    <input type="submit" name="submit" value="登録">
  </p>
  </form>
</body>
</html>


このようなシンプルなフォーム画面、
機能的には問題ないのですが、シンプルすぎてなんだか見た目がちょっと寂しいとは思いませんか。
ただ、そう思ったとしても、実際業務を行う中でこのようなシンプルなフォーム画面のデザインに、多くの時間を費やすことは中々難しいのではないかと思います。

今回紹介するツールは、そういったお悩みを解決するツールです。

使い方は非常に簡単。
1.まずは「prettyForms」を以下のサイトからDLし、中身をフォームのhtmlと同じフォルダに展開します。
Agave Group >> Blog Archive >> (Functional) Pretty Forms

2.フォームのhtmlに以下の記述を加えます。

ヘッダ


<head>
 <script type="text/javascript" src="prettyForms.js"></script>
 <link rel="stylesheet" href="prettyForms.css" type="text/css" />
</head>

ボディ


<body onload="prettyForms()">
</body>



3.改めてフォームを表示します。


先ほどのシンプルなフォームがちょっとおしゃれなフォームに変わりましたね。

いやー、すばらしい!!

…と、手放しに喜びたいところなのですが、
このツールを使用するには、いくつか注意点があります。

もう皆さんお気づきかと思いますが、ソースコード中にlabel要素が多用してあります。
実は、このツールはlabel要素を基準としてレイアウトを行います。
そのため、表示する全ての要素に対してlabel要素を追加する必要があります。

また、ソースコード中に<br class="clearAll" />というタグが多数あるのですが、この「clearAll」というクラス名は元々定義されているクラス名で、自動で行われるレイアウト(labelの右側にフォーム部品が回り込むようなレイアウト)を解除するために使用します。
回り込みのレイアウトを解除するためには、いちいちこのタグを挿入する必要があり、この点が少し面倒です。

label要素の記述が必須だったり、clearAllクラスを使って回り込みレイアウトを解除したりしなければいけなかったりと、使用するには不便なことも多いのですが、デザインに時間をかけられない案件などで手軽に見栄えのするフォームを作りたい際には重宝するのではないかと思います。

是非一度使ってみてはいかがでしょうか。