Babelで始めるES6入門
Babelで始めるES6入門 BabelとはJavaScriptの新規格であるES6 ( ECMAScript 6th Edition/ECMAScript 2015 ) で書かれたJavaScriptコードを古いブラウザでも解釈できるようにES5の書式に変換してくれるツール(JavaScriptトランスパイラ)です。 利用方法は様々ありますが今回はgulpでBabelを利用する方法と、ES6の主要な機能をBabelがどのようにES5に変換するかについて解説を行います。 (gulpに関しては、「タスクランナーgulp入門」を参考にしてください) gulp-babelのインストール gulpでBabelを利用するにはgulp-babelをインストールする必要があります。インストールは以下のコマンドで可能です。 sudo npm install gulp-babel --save-dev gu
CSS3で実現するアローアイコン
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
[ASCII.jp] 実例で学ぶjQuery MobileのCSSカスタマイズ
[ASCII.jp] 実例で学ぶjQuery MobileのCSSカスタマイズ jQuery Mobileデザイン入門の第8回「実例で学ぶjQuery MobileのCSSカスタマイズ 」が公開されました。 今回からは実践編ということで、より一般のサイトに近いデザインをjQuery Mobileに適用していっております。 CSS3に関してはかなりテクニカルなTIPSも利用しておりますので、jQuery Mobileに興味がない方もCSS3の箇所ではお楽しみいただけるのではと思っておりますので、興味がある方はぜひご覧になってください。 関連エントリー [ASCII.jp] サンプルで学ぶjQuery Mobileまとめ（後編） [ASCII.jp] サンプルで学ぶjQuery Mobileまとめ（中編） [ASCII.jp] サンプルで学ぶjQuery Mobileまとめ（前編） [ASCI
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
[ASCII.jp]いまから始める、jQuery Mobileの基本
[ASCII.jp]いまから始める、jQuery Mobileの基本 jQuery Mobileデザイン入門の第２回「いまから始める、jQuery Mobileの基本」が公開されました。 簡単なサイトを作成しながらjQuery Mobileの基本的な使い方を解説しています。 興味が有るかはたぜひご覧ください。 関連エントリー 新連載「jQuery Mobileデザイン入門 」が開始しました スポンサードリンク to-Rについて JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。 書いてる人 西畑一馬 (株式会社トゥーアール) 代表取締役/フロントエンドエンジニア 株式会社トゥーアールについて 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。 株式会社トゥーアール
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
オライリーの災害支援キャンペーンで電子書籍をゲット
オライリーの災害支援キャンペーンで電子書籍をゲット オライリー・ジャパンが災害支援キャンペーンとして3月26日の午前0時まで電子書籍の半額販売をおこなっています。 収益は、印税や決済手数料を除き全額が日本赤十字社への義援金として送られるとのこと。購入時は忘れずにプロモーションコード「DDJPN」 を、カートの画面で入力し必ず「再計算」を行なってください。 高価な為なかなか手を出しにくいオライリー本ですが半額ですので、これを機会に寄付と割り切って購入すればよいと思います。 個人的には以下のJavaScript本がお勧め。 jQueryクックブック 参考：[書評]jQueryクックブック JavaScript 第5版 いわずと知れたJavaScriptのバイブル「サイ本」。分厚くて重くて読みにくいんですが電子書籍なら気にせずに持ち運べますね。 JavaScript: The Good Part
JavaScriptコーディング ベストプラクティス 発売
JavaScriptコーディング ベストプラクティス 発売 本日MDNより新著書「JavaScriptコーディング ベストプラクティス」が発売されました。 小松 健作さん、高橋 登史朗さん、古籏 一浩さんといったすごい方々との共著です。 「HTML+CSSコーディング ベストプラクティス」のシリーズ本になり、すでにJavaScriptを書かれている方が次に何を考えればよいかといったことに焦点を合わせて書かれています。 内容は次のとおり。非常にバリエーションに富んでいます。 1［基礎］ 1.1｜JavaScriptの歩み 1.1.1｜Google Mapsの登場によって大きく変わったJavaScriptの存在意義 1.1.2｜JavaScriptの現在 1.2｜開発効率をアップさせるライブラリ／フレームワーク 1.2.1｜さまざまなライブラリの登場「Prototype.js」 1.2.2｜デ
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
CSS Nite LP, Disk 9.2（reprise）フォローアップ
CSS Nite LP, Disk 9.2（reprise）フォローアップ 先日のCSS Nite LP, Disk 9.2（reprise）で「jQueryの基本」というセッションでお話をさせていただきました。 20分という短い時間でjQueryの基本について解説させていただきましたが、アンケートでは多くの方にjQueryに興味をもっていただけたようでよかったです。 私のセッションで「jQueryの手軽さ」、次の徳田さんのセッションでjQueryを駆使することでの「jQueryの表現力の高さ」を実感していただけたと思います。 直前に高津戸さんがCSS3のアニメーションなどについて解説されていたので、「CSS3との使い分け」について質問をいただきましたが、CSSでできることはCSSで、CSSで出来ないことをjQueryやJavaScriptで補うという使い分けが理想です。ただ、IEなどCS
[ASCII.jp]40分で覚える！jQuery速習講座
[ASCII.jp]40分で覚える！jQuery速習講座 ASCII.jpで「40分で覚える！jQuery速習講座」が公開されました。 jQueryってどんな感じ？どんなことが出来るの？というのを短時間で理解できる構成になっております。 jQueryに興味があるけど・・・という方はぜひ一度この講座をごらんになってください。 そして、この講座でjQueryに興味を持って、Web制作の現場で使う jQueryデザイン入門で様々なこと表現できるようになっていただけたらと思います。 スポンサードリンク to-Rについて JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。 書いてる人 西畑一馬 (株式会社トゥーアール) 代表取締役/フロントエンドエンジニア 株式会社トゥーアールについて 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエン
![[ASCII.jp]40分で覚える！jQuery速習講座](https://cdn-ak-scissors.b.st-hatena.com/image/square/c564e5493933f3aaee932ca1e5daf08a2113da62/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F001_590x150.png)
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
CSSで垂直中央を実装する【css tips】
CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。 vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。 2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。 (X)HTMLソース <div> <p>中央に表示<br />したい文字</p> </div> CSSソース div{ width:200px; height:200px; background:#39FF6B; position:relative; } p{ position:absolute; top:50%; left:50%; margin-left:-2.5em; margin-top:-1em; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmar
IE6,7,8の確認ツールの決定版!?Microsoft Expression Web SuperPreview
IE6,7,8の確認ツールの決定版!?Microsoft Expression Web SuperPreview マイクロソフトのWEBオーサリングツール「Microsoft Expression Web 2」の次期バージョンに含まれる新機能Microsoft Expression Web SuperPreviewがベータ版として公開されました。 このSuperPreviewを利用すればIE6,7,8での検証作業が可能です。(製品版にはFirefox、Safariなども搭載予定) 公式ブログよりダウンロード可能で、インストールには.Net 3.5 frameworkが必要なので結構時間がかかります。 (インストーラーを実行すると最初に.Net 3.5 frameworkをインストールし再起動、次にインストーラーを実行するとSuperPreviewがインストールされる) 検証ブラウザの切り替
re:マルチシートアプローチとかクラス名とか
re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。 個人的にはスタイルシートを、分けないほうが効率が良いと思ってます。 Firebugを利用すれば編集したいCSSが、どのスタイルシートの何行目に記述されているかが3秒でわかるので1枚だと非常に楽です。 作業的には ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 で済むのですが複数枚で管理していると ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集するスタイルシートに移動(Ctrｌ+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 という
CSS で簡単にメニューの上下中央揃えを実現する
CSS で簡単にメニューの上下中央揃えを実現する ネタ元：CSS で簡単に上下中央揃えを実現する IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。 haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。 hasLayoutに関してはコリスさんが詳しく説明されています。 参考：IEでのCSSのバグを回避するhasLayout 以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。 × display:inline-block; × height:any valu
Web制作会社における求人
Web制作会社における求人 どうも、はやっているようですのでto-RブログにもJobボードを設置してみました。 サイドバーに設置されているブログパーツです。 Jobボードは何度か設置してみたのですが、あまりの読み込みの遅さにすぐに取り外してしまいました。 最近はJobボードを設置しているブログが増えてきて、見ている限りレスポンスもあまり気にならないようです。 試しに再び設置したところ問題なさそうですので、常用で設置を行います。 さて、私は会社勤めの際に求人担当をしていたこともあり、求人にかかるコストが高いことが中小制作会社が優秀な人材を確保できないひとつの理由だと思っています。 私の会社が利用していた媒体は、Find jobとen japanだったんですけども、Find jobで2週間の掲載で7,3500円、en japanで月30万くらいの費用がかかります。 その価格が安いか高いかは、各
【Adobe Spry TIPS】ＲＳＳを取得して表示する。
【Adobe Spry TIPS】ＲＳＳを取得して表示する。 Spryでもっとも使い勝手がよいと思うのは、RSSを表示する機能です。 正確にはSpry.Data.XMLDataSetを利用してXMLファイルを取得して表示するのですが、もっとも普及しているXMLであるRSSフィードを取得し表示してみます。 ひとまずは、Sparyの簡単さを味わってもらいたいです。 head要素内などで以下の2つのファイルを読み込みます。 ファイルはそれぞれダウンロードしたSpry本体のincludesディレクトリにあります。 <script type="text/javascript" src="./includes/xpath.js"></script> <script type="text/javascript" src="./includes/SpryData.js"></script> xpath.j
DOM 読み込み完了時に関数を実行する domready.js
DOM 読み込み完了時に関数を実行する domready.js 配布元:METAREAL[閉鎖] ライセンス:MIT-style license. domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリになります。 ページの読み込みが終了したイベントを取得するonloadイベントは厳格すぎて少々扱いにくいところがあります。 画像などのすべてのファイルの読み込みを終了してから実行するため、ラグが生じてしまうからである。 この domready.jsを利用すれば、DOM ツリーが構築されたタイミングで、任意の関数を実行できるのでラグが最小限ですむ。 同様の機能をjQueryやmootoolsではサポートしており、Prototyp.jsの最新版も新たにサポートされています。 domready.jsを利用すれば、それらのフレー
CSS Nite in Osaka vol.7終了
CSS Nite in Osaka vol.7終了 CSS Nite in Osaka vol.7が終了しました。 私は『jsライブラリで実装効率的なWeb制作』という内容でお話しました。 Web標準の日々での再演になるのですが、内容に関してはjsライブラリの使用のみにフォーカスして、紹介するライブラリなどを変更してお送りいたしました。 Web制作を効率的に行うためのjsライブラリ 資料は以下を参照ください。 SlideShareを使ってみたかったんですけど微妙ですね。 なにかきれいに生成するコツとかあるんでしょうか？ pdfバージョンでごらんください。 音声に関してはCSS Nite公式サイトより公開されると思いますのでお待ちください。 ライブラリの詳細については以下のエントリーなどでも詳しく説明してます。 ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
