CodeKitの新機能「Kit Language」
CodeKitの新機能「Kit Language」 Macの神アプリ「CodeKit」がバージョンアップして「Kit Language」という新しい機能が追加されました。 これはHTMLにライブラリ機能を提供する機能です。Dremweaverのライブラリ機能や、CMSの共通パーツを外部ファイルにしたりするやつのイメージです。 たとえば次のように色々なHTMLで使い回す共通パーツがあったとします。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CodeKit</title> </head> <body> (中略) <!--共通ナビ--> <ul> <li><a href="foo.html">list1</a></li> <li><a href="foo.html">list2</a></li> <
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
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
iPhoneでlabel要素を動作させる方法
iPhoneでlabel要素を動作させる方法 iPhoneではlabl要素を設定しても、labelがクリックされた際に対応するチェックボックやラジオボタンが選択状態になりません。 <input type="radio" name="radio" id="radio1"><label for="radio1">ラジオ1</lable> <input type="radio" name="radio" id="radio2"><label for="radio2">ラジオ2</lable> <input type="radio" name="radio" id="radio3"><label for="radio3">ラジオ3</lable> <input type="radio" name="radio" id="radio4"><label for="radio4">ラジオ4</lable
MacのCodeKitでCompassを使う
MacのCodeKitでCompassを使う Compassに関するエントリーを書いていたら、「scoutとcodekitでそのうちできるようにならんかな」というツイートをいただきまました。 CodeKitにはCompassが含まれてますのでCodeKitでは可能です。(CodeKitに関してはフロントエンドの開発を加速するCodeKit :: 5509を参照してください) CodeKitのサイドにあるプロジェクトの一覧から、Compassを利用したいプロジェクトを右クリックして、「Compass」→「Use Compass on this project」を選択。 初回は確認画面が表示されますので「New Config File」を選択。 Compassの設定画面が表示されるので画象フォルダやCSSフォルダなどの設定をし「Create Config File」を選択するとCompassが
CodeKitで簡単にCSS Preprocessorを利用する！
CodeKitで簡単にCSS Preprocessorを利用する！ 本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。 CSS Preprocessor Advent Calendar 2012とは年末の12/1〜12/25まで、みんながブログなどでCSS Preprocessorについて熱く語るというイベント、僕は2012年一番重宝したMacアプリ「CodeKit」について解説します。 そもそもCSS Preprocessorってなに? CSS PreprocessorはSassやLess、StylusといったいわゆるCSSメタ言語のこと。CSSメタ言語とはCSSと異なる文法でCSSを記述できる言語です。 たとえば、通常のCSSでは #bar{ width:100%; } #bar .foo{ color:red; } #
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
vertical-alignの使い方【css tips】[to-R]
vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; v
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
