Sublime text布教

この記事は1日目から頓挫しかけて慌てて書いたWanoグループ Advent Calendar 2016の1日目です。

Wanoは少々珍しく、デザイナー兼コーダーの皆さんはWindowsが多いです。
エディタは各々好みのものを利用していますが、参考までに私の使っているエディタを紹介していこうと思います。

エディタ

Sublime text 3

使用パッケージ

  • IMESupport…日本語をインラインで入力できるように
  • Japanize…メニューの日本語化
  • SimpleClone…タブの複製
  • SublimeServer…ローカルサーバー
  • SFTP
  • COMPASS…SASSのコンパイル
  • SCSS…scssファイルを扱えるように

と、最小限の構成です。COMPASSを使うにはRubyが必要等もうひと手間かかります。
特に便利だと思っているものは太字にしてあるので、今後詳しく紹介します。

Sublime textのいい所は拡張性が高い等が言われていますが、何よりも環境の引っ越しが楽というのが使っている理由です。
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\
内のファイルと
Preferences.sublime-settings
の内容を丸ごとコピペするという2ステップで環境の引っ越しが完了します

次回からは各パッケージのインストール方法や、細かい設定、ショートカット等を紹介できればと思います。
エディタで迷っている方がいれば参考になれば幸いです。

Read More

IE11のuserAgent対応javascriptによるIE判定式(全バージョン対応)

IE11は従来のIEと違い、userAgentの中にMSIEがありません。
よって良くある、userAgent内のMSIEindexOf等で探す方法ではIE11がうまく取れません。
jsでIE判定をかます際に色々調べたので情報共有。

javascriptによるIE判定式

var userAgent = window.navigator.userAgent.toLowerCase();
if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) {
    var isIE = true;
    var ieVersion = userAgent.match(/((msie|MSIE)\s|rv:)([\d\.]+)/)[3];
    ieVersion = parseInt(ieVersion);
} else {
    var isIE = false;
}

上記コードで
isIEにIEかどうかの判定(boolean型)
ieVersionにバージョン数(int型)
parseIntを挟むかどうかはケースバイケースで。

今後のIEはどうなるか分かりませんがとりあえず現在はこれでいけると思います。

Read More

htmlソースの並びを変更せずに左右固定3カラムリキッドレイアウトを行う

ソースの並び順はSEO上重要だと言われています。
並びは基本的に

  1. 見出し
  2. 内容

上記の順になるのが好ましいとされています。

良く見る下記の画像のようなレイアウトを実装する際の例だと
boxline

この場合、見出しは画像タイトル、内容は画像及び「詳細」リンクとなります。
floatとmarginを利用した一般的なリキッドレイアウトでは、htmlソースの順を下記のように変更しなければ厳しいものがあります。

  1. 【内容】画像(width:80px;float:left;を指定)
  2. 【内容】詳細リンク(width:100px;float:right;を指定)
  3. 【見出し】画像タイトル(margin:0 100px 0 80px;を指定)

これだと内容と見出しが逆転してしまっていますので、あまり好ましい状態とは言えません。

そこでpositionを使い多少強引ですが下記のようにする事で、並びを変えずに左右固定の3カラムリキッドレイアウトが可能になります。
html

<div id="floatBox">
	<div class="floatBoxLine">

		<div class="boxTitle">
			<h2>画像のタイトル</h2>
		</div>

		<div class="boxImg">
			<img src="hoge.jpg" alt="画像" width="80" height="80" />
		</div>

		<div class="boxLink">
			<a href="">詳細</a>
		</div>

	</div>
</div>

css

#floatBox {
	width:100%;
}

h2 {
	margin:0;
}

.floatBoxLine {
	width:100%;
	position:relative;
}

	.boxTitle {
		margin:0 50px 0 80px;
		height:80px;
		background-color:#ffcccc;
	}

	.boxImg {
		top:0;
		position:absolute;
		width:80px;
		height:80px;
		background-color:#ccffcc;
	}

	.boxLink {
		position:absolute;
		top:0;
		right:0;
		width:100px;
		height:80px;
		background-color:#ccccff;
	}

Read More