矢印付きボタンを作成するCSSジェネレーター「Button with Arrow.css」を公開しました。

Button with Arrow.css公開させて頂きました。
矢印付きのボタンのCSSを生成するジェネレーターです。

矢印付きのボタンをコーディングするのが面倒だったのでsassでmixinを作ったものの、それを使うことすら面倒だった(笑)のと、Vue.jsの勉強がしたかったのがこのツールを作ったきっかけです。

※現状、スマートフォンでの閲覧に対応しておりません。PCのブラウザでご利用ください。

使い方

EDITボタンをクリックするとスクリーンが編集モードに変形します。

編集エリアのフォームに任意の値を入力すると、画面右側のcodeエリアのCSSコードに動的に反映されます。

※codeエリアが閉じている場合は「get code」ボタンをクリックしてください。

入力が終わったら、codeエリアのcopyボタンをクリックしてコードをコピーし利用してください。

htmlとcssそれぞれ別になっています。

Vue.jsで作りました。

ここはアピールしておきたいところ(笑)。フレームワークとしてVue.jsを利用しています。

フォームに値を入力すると、codeエリアとボタンのプレビューに同期するようバインディングするコードを書いています。

cssで擬似要素を使っているので、これをVue.jsで扱うのに苦労しました。DOMではないので通常のバインディングができず、テキストノードとしてstyleタグを生成するなどしています。(何か他にいいやり方があるのかもしれませんね。)

ご質問やご意見はこの投稿にコメントいただくか、@stella_d_tweetにメンションなどお願いいたします。

最後に

非常に限られた需要しか無いと思われますが(汗)、よかったらお試しいただけると幸いです。

このツールを作るのに、@hrz31さんの以下の記事とサービスから非常に刺激を受けました。

自分のサービスを作ってみたいエンジニアな人は参考になると思います。おすすめです。

他にもtwitterでフォローしているフォロワーの方が続々とwebサービスをリリースをしており、こちらも大変気になっております。

話題のねこ本ももちろん買って読みました。ある程度JavaScriptの知識があることが前提ではありますが、Vue.jsの使い方のツボがいいかんじにまとめられていて、こういうときはどうすればいい?の答えにたどり着くスピードが格段に上がりました。みんな、読むといいよ!

さてこれから

次に作ってみたいwebサービスの構想がうすボンヤリ浮かんでいます。今度はより本格的なwebアプリを作ってみたいです。

オープンデータも活用したいし、firebaseを使えばよりスケールアップしたアプリが作れそう。micro:bitもまだ手付かずだし、blenderもやってみたい。(あぁ、もう全部やるのは無理だw)

時間の割り振りがなかなか難しいですがほそぼそやっていこうと思っています。

[Sass]for文とif文を使って見出し要素のCSSを一括で設定する。

見出し要素は出現頻度が高く、無計画にcssを記述していると乱雑になりやすいのでひとまとめに管理する記述する方法を考えてみました。タイトル通りSassのfor文とif文を使います。

Sass


body{

	$reduce : 0.2; //フォントサイズを0.2ずつ源算するための値
	$fontSize : 3 + $reduce; //フォントサイズの初期値

	//$valueに1ずつ加算して代入し、6になるまで繰り返す  
	@for $value from 1 through 6 {

		h#{$value}{ //#{}を使用して見出しセレクタを作成

			//フォントサイズを再設定
			$fontSize: $fontSize - $reduce; //0.2ずつ源算
			font-size: $fontSize + rem;

			//h2要素のcssを設定
			@if $value == 2 {
				color: red;
			}

			//h3要素のcssを設定
			@if $value == 3 {
				color: blue;
			}

			//class付きh4要素にcssを設定
			@if $value == 4 {
				&.h4-custom {
					border-bottom: 1px solid #CCCCCC;
				}
			}

		}

	}

}

@forでh1からh6までのフォントサイズを調整し、@ifで条件分岐して見出しごとのスタイルを設定しています。より複雑なスタイルを施したい場合は別途@mixinを作って@includeすればさらに管理しやすくなりますね。

[gulp]パッケージをアップデートし、gulpfile.jsをgulp-ruby-sass1.0以降に対応させました。

しばらく放置していたgulpのパッケージをアップデートしました。最新版になって気持ちが良いです!

「gulp-ruby-sass」を使っているのですが、アップデート後、バージョンが1.0.5となりました。1.0以降はタスクの書式が変わるらしく、gulpfile.jsの記述変更も実施。

元から抱えていたソースマップとベンダープレフィックスの不具合も修正し、(自分の環境で)うまく動作するようになりました。

以下、実際のコードになります。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var plumber = require("gulp-plumber");
var autoprefixer = require("gulp-autoprefixer");
var sourcemaps = require('gulp-sourcemaps');

gulp.task("sass", function() {
return sass('sass/', { //コンパイルしたいscssファイルを、「sass」ディリクトリに全て配置する
sourcemap: true ,
style: 'expanded'
})
.pipe(plumber())
.pipe(autoprefixer("last 3 version"))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./'));
});

gulp.task('watch', function () {
gulp.watch('sass/**/*.scss', ['sass']);
});

scssファイルのコンパイル(出力スタイルはexpanded)、ソースマップの出力、ベンダープレフィックスの付与ができます。ライブリロードとか使ってみたいパッケージが他にもありますが、それはおいおいで。

今までソースマップは独立したファイルとして出力されていましたが、今回の修正でdestされたcssの中に記述される方式になったようです。

参考サイト

パッケージのアップデートは以下のサイトを参考にさせて頂きました。

Node.jsアプリでのパッケージ更新確認

gulpfile.jsの新しい書式は以下から。
gulp-sass から gulp-ruby-sass へ
gulp-ruby-sass – npm

Sassがきっかけで変化したCSSコーディング。BEMを取り入れてみました。

Sassの力をフルに引き出すには、もっと根っこからCSSのコーディング方法を変える必要がある!と思い、BEMを取り入れたコーディングを始めました。

Sassだけに頼っても、生産性は上がらない!

Sassを使い始めたものの、思ったほど効率が上がらない。なにか引っかかっておりました。いろいろ考えた結果、Sassがどうとかじゃなくて、自分のコーディングスタイルをもっと見なおした方がいいという結論に。

「CSS設計の教科書」を読む

そんな折、「Web制作者のためのCSS設計の教科書」という書籍が発売されていたので購入。今の自分にぴったり。早速読んでみました。

冒頭で、破綻しやすいコーディング例の紹介がありました。その中の一つに、IDセレクタを起点にして、その子要素のhtmlにスタイルを当てるやり方が解説されていて、まさに自分が当てはまっていました。

この記法はhtmlは汚れずらいけど、htmlが変わるとスタイルの修正がかなり大変。また、使い回したいと思っても、IDセレクタ起点なので、他の箇所で使えなかったり。

うーむ、確かにその通り。

で、どうしたらいいかというと「classを活用」したり、「OOCSS(オブジェクト指向CSS)」を取り入れる、という解決方法が「CSS設計の教科書」で解説されていました。

OOCSSは知ってはいたものの、htmlにclassセレクタを記述するのが冗長に思えて避けていました。htmlが汚くなることに抵抗がありました。

でも、そのかわり今のままだとCSSが汚い!生産性低い!このままだと何も変わらない!ってことで、恐る恐るOOCSSに取り組むことに。

OOCSSにもいろいろ種類があるようで、「SMACSS」、「BEM」、「MCSS」、「FLOCSS」など命名規則や記法、構造にそれぞれ特性があります。

自分はとりあえず「BEM」のルールでやってみることにしました。

BEMに取り組む

BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。

BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号

とあります。Blockという要素の起点となるclassがあり、それに対してElementというclass、Elementのバリエーションとしてmodifierと呼ばれるclassが存在します。(詳しくは「CSS設計の教科書」をぜひ。)

このBEMの命名規則にのっとってclassを作り、html要素に付与していくわけです。

htmlに依存しないCSS

classの数がとても増えるので、IDセレクタを起点にスタイリングするより手間がかかります。でも、やってみてわかりました。この方法は、とても良かったです。

html要素を変更しても、cssを修正しなくてよいのはすごく楽でした。最初のclass付けに手間がかかったとしても、修正の労力がぐっと減ることの方がメリットがはるかに大きい。class名に意味を持たせて付けてやれば、思ったより煩雑にならない。

また、IDセレクタをやめてclassでスタイルを作るので、当然使いまわししやすくなりました。IDセレクタ直下のhtml要素にスタイルを当てる今までのやり方とは感覚が全く違います。

そしてこれこそSassの出番。@mixinや@extendが力を発揮します。むしろこれでSassを使う本当の意味が出てきたと感じました。(これも、もっと早くやればよかった!)

最後に

いろいろ書いてきましたが、まだまだBEMの記法を有効活用できていません。つい「IDセレクタ起点」風の記述をしてしまうことも多いです。

もっとスマートにCSSを記述できるよう、BEM修行はまだまだ続きます。

Sassを使い始めてしばらく経っての雑感。

Sassを使い始めてしばらく経ちました。とは言ってもCompassはまだ使っておらず、ごくごく基本的な範囲でSassを使っていて思ったことを書いてみます。

セレクタのネストし過ぎは禁物

便利だな~と思ってネストしまくると、うん、とても見づらいです(苦笑)。例えば#mainなどIDセレクタを使ってスタイルを区切っていくと、そのID内のスタイルを書くときはずっとインデントしているわけで、それはちょっとう~んな感じ。
Media Queriesを使うとさらにネストが深くなりますし。

ただ、それはIDセレクタに依存しているコーディングルールの方に問題があるのかも。最初から階層があまり深くないようにhtmlの構造を設計し、OOCSSなどをうまく取り入れてバランスを取るのが良いのかもしれません。

ただ、ある程度慣れてルールが決まってくると、きれいなコードが書けるようになるのは間違いないと思います。これからもガシガシ使っていこうと思います。

Media Queriesと@mixin

Sassでショックだったのが、Media Queriesを使うと@extendが使えないということ。セレクタをグループ化する機能なのでそれもしかたないのですが、けっこうがっかり。@mixinで対応するしかありません。

しかし、@mixinを使う場面とそうでない場面を考え直す必要もあるとひらめきました。それらの機能を使いすぎるとcssが荒れます。それよりも、明示的にclassをhtmlに与える方がきれいなコードになる場合も多いというのが実感です。

変数と@inmport

Sassの醍醐味はコードの「再利用」だと思うのですが、再利用するということはスタイルをコンポーネント化する、ということに繋がると思います。

サイト全体のレイアウトや、リンクカラー、フォントファミリなどの基本的なスタイルに対応する値を変数として入力するSassファイルと、その受け手となるコンポーネントSassファイルを用意し、組み合せて使っています。

この2つを@inmportとすると、コンパイル後のCSSとしてひとつに合体できるので、Sassファイルを汚染すること無く使いまわせるようになり、とっても楽になりました。

これが極まった先に見えるのはCSSフレームワーク。Sass版のTwitterBootstrapなんかもあるようですし、あぁ、Compassもフレームワークですね。使ってみたいです。

制御構造は案件とスキル次第で可能性を感じる。が…

ループ処理などプログラミング言語っぽい機能も提供しているSassですが、このあたりはまだスキルが追いついていません。もう少し勉強が必要そうです(^^;)

もうSassなしでコーディイングはしたくない。しかし、真の力を引き出すにはまだまだ勉強が必要

見出しが全てを述べている感じですが、まだまだ使いこなせている感じはしないです。根本的なCSS、その他コーディング全般の底上げをして、はじめてSassの力を引き出せそう。精進あるのみです!

[Sass]@mixinで作る横並びの定義リスト

受注案件等で会社概要や役員名簿などをWEBサイトに掲載するときに、定義リストを横並びにして使うことがけっこうあるのですが、引数付きのmixinを利用するとスタイルの使い回しが楽なのでサンプルコードを掲載してみます。

Sass mixin

引数の意図は、
$dt_w → dtの幅。中に入れたい文字数やデザインにあわせて調整する。
$dd_pl → ddの左側のパディング。dtの幅+アルファ分余白を取る。
という感じです。

@mixin parallel_dt_dd($dt_w,$dd_pl) {
	dt{
		float:left;
		width: $dt_w;
	}
	dd{
		margin-left: 0;
		padding-left: $dd_pl;
	}
}

//必要な箇所で必要な引数を入れて使います。
dl {
	@include parallel_dt_dd(11em,12em);
}

コンパイル後

dl dt {
	float: left;
	width: 11em;
}

dl dd {
	margin-left: 0;
	padding-left: 12em;
}

ddにborder-bottomを設定すると、dtとddをまたいだ下線を入れることができるので、けっこう気に入ってます。