Comic Sans Project
Thanks to Robert Urquhart, Clif Dickens, Nico Hähnlein, Siim Teller, Camille Greatorex, Chris Weachock, Jonty Levine, Shayna Daitch, Douglas Montgomery, Lira Kim, Josef van der Faust, Ed Benson, Christine Self, François Bertrand, Timothé Buguet, Psy Oc, Samuel Blum, Romain Stievenard, Florent Molinier, Felipe Esteves, Alexandar Mechev, Colin Smith, Felipe Francisco, Merlin Mason, Saul Costa, Jan
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
My sweet ウマドンナ
控除率が抜群のブックメーカーで競馬に賭ける 日本の公営ギャンブルの代表格といえばJRAの競馬でしょう。長い間、多くのファンに親しまれています。ところで、ブックメーカーでは、海外の競馬にも賭けられるというのをご存知でしょうか！？ 日本の中央競馬などとはまた違った面白さがあり、競馬ファンであれば夢中になること間違いなしでしょう。そこで今回は、ブックメーカーで賭けられる海外競馬の魅力ついて紹介します。 ブックメーカーで賭けられる海外競馬 競馬はブックメーカーの中でも、人気の高いスポーツの1つです。そのため、海外競馬のさまざまなレースだけではなく、日本の競馬にもベットすることができます。 例えば、フランス凱旋門賞やドバイマスタークラシック、ドバイデューティーフリー、香港の国際レースやアメリアのビックレースなど多くのオッズが存在します。もちろん、こうしたビックレースだけでなく、各国のローカルなレース
「Webデザイナーのための jQuery入門」という本を書きました
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 2011年12月7日発売です。もう本屋に並び始めたみたい。 Webデザイナーのための jQuery入門これは、Webデザイナーとか、HTML+CSSを普段書いてるような人でJavaScriptをほとんど知らないという人がターゲットで、そういった人らがjQuery使ってちょっとしたものを自分で作れるようになれるようになったらええんじゃないかという感じで書かれた本です。ちょっとしたモノっていうのは、この本で解説している、以下のような機能です。 画像のロールオーバー入力フォームのガイドテキスト（「検索ワードを入力してください」みたいやつ）アコーディオン外部ファイルを読み込んで表作成スライドショータブ
Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design
Compassを使ってSassのCSS出力を手軽にしよう Posted by Hideki at 2011年12月 8日 21:36 タグ： CSS効率化 Sassを使っていて1つ面倒なことと言えば、CSSを生成するのに必要なコマンドではないでしょうか。 sass -t expanded _scss:shared/css --watch 長い...。プロジェクトでCSSの設計を始めるたびにこれだけ入力するのは大変です。 そこで登場するのが「Compass」です。CSS3のmixinなどが含まれた強力なフレームワークなのですが、次のコマンドを打つだけでCSSの出力ができる機能も持っています。 compass watch 簡単ですよね。いつでもどのプロジェクトでも「compass watch」ですから。 ※1度だけCSSを出力する「compass compile」もあります。 インストール方法
jQueryでJSONデータを表示したい。 « wondering-mug
29 5月 2011 - by cat_anywhere JSONデータとは JSONとは、「javaScript Object Notation」の略で、javaScriptで利用されるデータフォーマットの１つです。 JSONは、JavaScriptのリテラル形式で記述されたデータで、JavaScriptと親和性が高く、XML等のデータフォーマットより、よく利用される。 JSONでは、データをオブジェクトとして取り扱います。 以下では、実際にスクリプトを例に説明します。 スクリプトの例 その１ { "name" : "Taro Tanaka" , "age" : 31 } nameとageという、２つの「プロパティ」を持つ「オブジェクト」をJSONデータとしている。 スクリプトの例 その２ [ { "name" : "Taro Tanaka" , "age" : 31 } , { "
第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
複数のブロック要素の高さを揃えてくれる「fixHeight.js」をアップデートしました | BLOG | STARRYWORKS inc.
以前作ったブロック要素の高さを揃えるのに便利な「fixHeight.js」というJavaScriptを大幅に改良して、アップデートしました。 以前の細かいオプションを廃止し、高さを揃えたい要素たちの親要素に「fixHeight」というクラスを付与すれば、行ごとのグループを自動で判断して高さを揃えてくれます。 jQueryプラグインの形にしたので、$("selector").fixHeight();として呼び出すこともできます。 なお、以前のバージョンと互換性はありませんのでお気をつけください。 fixHeight.jsはSimpleLibのプラグインとしても提供しています。SimpleLibの他のエフェクトやプラグインなどと併用する場合は、SimpleLibに同梱されているものをご利用ください。 http://lab.starryworks.jp/js/simplelib/ ダウンロード
jQueryでjsonデータを扱ってみる【入門編】
Posted: 2010.07.25 / Category: javascript / Tag: jQuery, json javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェク
jQuery.getJSON()で、JSON形式のデータを読み込みパースし表示
jQuery の jQuery . getJSON( url [, data] [, success( data, textStatus, jqXHR )] ) メソッドを使った Ajax リクエストで、JSON形式のデータを読み込み、パースし、表示する方法。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-getJSON-json.js」ファイルを読み込み、パースし、黄色のボックス要素内に表示する。 読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。 「toggle」ボタンを、再度クリックすると、元に戻す。 実装例（サンプル）のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-sample-bu
Crowy - Social Communication Dashboard
ソーシャルメディアダッシュボード「Crowy」は2021年5月31日をもちましてサービスを終了しました。長い間ご利用いただきありがとうございました。
jQuery UI/Tabs - tech.ludicmind.net
概要 タブは通常アコーディオンのように、コンテンツを、スペースを節約できる切り換え型のセクションに入れるのに使用される。 デフォルトではタブのクリックでセクションを切り替えるが、オプションでhoverにもできる。タブのコンテンツはタブにhrefを設定する事でAjaxを通して読み込む事もできる。 イベント 一連のイベントがタブの操作で実行される。 tabsselect, tabsload, tabsshow（この順番で） tabsadd, tabsremove tabsenable, tabsdisable イベントバインドの例： $('#example').bind('tabsselect', function(event, ui) { // 関数内で有効なオブジェクト: ui.tab // 選択された（クリックされた）タブのアンカー要素 ui.panel // 選択/クリックされたタブ
jQueryで作るタブのメニュー画面がリンクから飛んできた時も選択した状態にしたい
今開発してるシステムでちょっとおもしろそうな題材があったので紹介しておきます。 ソース全部載せると分かりづらいので一部だけで概念的に説明しますが、これはまあ、普通にレフトメニューがあって、そしてメインの部分にはタブでメニューを選択できるようなレイアウトの画面だと思って下さい。 レフトメニューはこんな感じ <div class="left"> <p>メニュー</p> <ul> <li><a href="sample.html#menu1">menu1</a></li> <li><a href="sample.html#menu2">menu2</a></li> <li><a href="sample.html#menu3">menu3</a></li> <li><a href="sample.html#menu4">menu4</a></li> <li><a href="sample.htm
グローバルナビゲーションのカテゴリを自動でアクティブにする
グローバルナビゲーションのカテゴリを自動でアクティブにする jQuery2010年8月3日 グローバルナビゲーションのカテゴリを自動でハイライトするスクリプトをご紹介します。jQueryで容易に実装することが可能です。 下記、実装サンプルのスクリプトになります。 HTML <ul id="nav"> <li class="about"><a href="/about/"><img src="nav-01.gif" alt="" /></a></li> <li class="company"><a href="/company/"><img src="nav-02.gif" alt="" /></a></li> <li class="product"><a href="/product/"><img src="nav-03.gif" alt="" /></a></li> <li class=
『ロールオーバー今昔物語』サポートページ
鷹野雅弘（スイッチ） 2009年7月17日に開催したCSS Nite in OSAKA, Vol.17のフォローです。 Webは「クリックされてナンボ」。そこがクリッカブルであることが伝わらなければ、意味がありません。 クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出すJavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。 これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。 ロールオーバーの意味と意義 ロールオーバー（マウスオーバー）とは？ マウスポインタが重なったときに、次のいずれかのような変化を起こすこと 文字
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
tableの膨張を防ぐ【css tips】
tableの膨張を防ぐ【css tips】 table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。 サンプル 特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。 サンプル これについていくつか解決方法があります。 table要素ではなく、div要素で書く まず、最初にためすべき方法です。 table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。 改行したい所にbr要素やスペース 抜本的な解決方法になります。 しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。 word-break:break-all; IEの場合はword-break:break
Best jQuery Plugins of 2011 - Web Design Ledger
jQuery was first released in 2006. Nearly 5 years later, it’s still going strong – due largely in part to the community that’s been built up around it. This community of developers constantly releases plugins that allow web developers to easily add amazing functionality to their projects. Continuing our “Best of 2011” series, the focus this week is on jQuery plugins. Over the past eleven months we
jQueryでテーブルをラジオボタンでソート（プラグインなし）
jQueryでテーブルをラジオボタンでソート（プラグインなし） jQuery2010年12月25日 よくプラグインでテーブルをソートする機能が紹介されていますが、自分はあんまプラグインを追加するのが好きじゃないというのもあり、自作してみました。 ついでに自動でストライプ模様になるよう実装しています。 jQueryはこちらからダウンロード 実際のサンプル HTML <ul class="list-sort"> <li><label for="line-all"><input type="radio" id="line-all" class="item" value="あ行" name="select" />すべて</label></li> <li><label for="line-01"><input type="radio" id="line-01" class="item" value=
Webページの画像をまとめて保存する方法
Make Tech Easier - Uncomplicating the complicated, making life easier 閲覧しているWebページに掲載されている画像をダウンロードするもっとも代表的な方法は、画像の上で右クリックして、ポップアップしてくるメニューから「名前を付けて画像を保存」の項目を選択することだ。簡単に操作できる。しかし、保存したい画像が増えてくると、この方法は面倒になる。一括してダウンロードできれば便利な話だ。 How to Save Multiple Images In Firefox (No Addons Required) - Make Tech Easierにそうした場合に利用できるテクニックが紹介されている。Firefoxを使った場合の方法で、アドオンやエクステンションをインストールすることなく、デフォルトで提供されている機能のみで実現してい
コンテンツをアクセシブルにするのか、アクセシブルなコンテンツを作るのか | 水無月ばけらのえび日記
公開: 2011年11月19日22時30分頃 アクセシビリティ系の飲み会で、JIS X 8341-3:2010の7.2.4.10「セクション見出しに関する達成基準」の話で盛り上がったり。 達成基準の内容はこんな感じです (規格票から引用)。 セクションの見出しを用いてコンテンツを体系化していなければならない。 注記1 ここでいうセクションとは，ユーザインタフェースコンポーネントのまとまりではなく，一つ以上の関連するトピック又は考えを扱う自己完結的なコンテンツの一部であり，文書におけるセクションを意味している。なお，セクションは一つ以上の段落からなり，グラフィック，表，リスト及びサブセクションを含む。 注記2 ここでいう見出しは一般的な意味で用いられており，タイトル及び様々なタイプのコンテンツに見出しを付加するその他の手段を含む。 注記3 この達成基準は，ユーザインタフェースコンポーネントに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
adakoda.com
ブログ