CSS おれおれ Advent Calendar 2012 – 16日目 そういえば割と知らないなーと思いまして。だいたいばらばらに設定しちゃうので。 文法 仕様によると、以下のように設定できます。 [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar 長いのでまとめると、こんな感じ。 値（順序一定） スタイル系（順序不定、任意のものを利用可能） font-style … スタイル font-variant … 変形（CSS 2.1のも

CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="fruit" value="apple" checked><span class="label">Apple</span></label> <label><input type="radio" name="fruit" value="grape"><span class="label">Grape</span></label> <label><input type="radio" name="fruit"

CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。

CSS おれおれ Advent Calendar 2012 – 04日目 iOSでよくみるあのメニューっぽいのをCSSで組んでみたいと思います。 必要になる知識はこんな感じ: border-radius :first-child, :last-child box-shadow デモ 先に完成品です。 作り方 HTML グループを括る要素と各項目の要素が必要です。 何でも良いですが、今回は愚直にul>liにして、ulの方にクラス名を与えました。 最初のCSS まずは枠を用意します。 全体を括る枠があるのですが、ulではなくliの方に付けます。そして項目の境界部分が太くならないよう、下側を空けます。 ここで:last-childというのが出てきました。疑似クラスというやつで、:hoverの仲間です。この場合は「兄弟の中で最後のもの」を指します。 兄弟？ あ、「兄弟」とかわかりますかね？　HTM

また影をカンマ,で区切って複数指定する事ができるので、ぼかしなしの影で囲ってやると、白抜きにしたり縁取りしたり出来ます。 割とよく使えるんじゃないかなーって思います。 実例 手前味噌ではありますが、過去に作ったサービスのロゴのところ、この方法でスタイルしてます。 外面さん 注意点 複数指定できるんですが、継承は全体でひとつです。 つまり白抜き文字でスタイルされている要素にクラスを追加して影付きにした場合、白抜きで使用していた元の影は消えてしまいます。 当たり前といえば当たり前なのですが、ついついやってしまいがちなので、気を付けましょう。 下が切れる問題 ちなみにGoogle Chromeで”g”などの下の部分がうまく影が付かないようです。 真下（x 0px, y 1px）の指定を先頭に付けると、うまく行く場合があるみたい。うーん、なんだろう。他にも影の指定数があまり多いと駄目だったりします

CSS おれおれ Advent Calendar 2012 – 02日目 円を描く前に、角丸の話をしましょう。というか、角丸の丸をめっちゃ丸くしたのが円です。（ネタバレ） 角丸 border-radius

軽めのjQuery Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(html, [ownerDocument]) – jQuery 日本語リファレンス jQuery(callback) – jQuery 日本語リファレンス jQuery(elements) – jQuery 日本語リファレンス jQueryと$は同じものなので、jQuery()と$()は同じです。これ、実は関数なんですよ。 というわけで、以下使い方。 5種類の使い方 セレクター : $('#tar

CSS おれおれ Advent Calendar 2012 – 01日目 文字の色やら背景色やらでよく使っていると思うのですが、まとめてみました。 アルファ系なんか便利かなーって思います。box-shadowの色が濃いときにrgba(0,0,0,0.5)とかやったりします。 さてさて。 RGBで指定 光の三原色（赤緑青）で指定します。 #rrggbb これが一番一般的。16進数で各2桁、合わせて6桁で指定します。 16進数はわかりますか？　普通の10進数で0が16進数の0、9が9、10がA、11がB、15がF、16が10になります。2桁なので0からFF、つまり0から255までの数値を指定できます。 アルファベットは大文字ABCDEFでも小文字abcdefでも構いませんが、CSSの仕様書では小文字で例が記述されているので、そちらが標準みたいです。 #rgb 16進数各1桁で指定します。

一口にJSerといっても、色々な分野の人がいます。あなたはどんなJSerになりたいですか？　方向性により学ぶべき事も変わってきます。目標を明確にしましょう。 というわけで、独断と偏見……というか主に偏見で三種類にまとめてみました。 追記: 「勉強法」とかタイトルに付けておきながら勉強法に触れてませんでしたので「勉強範囲」に修正しました。ひー。 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flasherさんがシフトしてくる位置。 発注側が想定するJavaScripter。最近の携帯ゲームで需要がある。 お仕事 JSだけでなくCSSや画像を駆使して画面を描く。 UIだけならいなくても困る事はないけれど、UXま

Backbone使ってみるメモ。まだあんまりよくわかってないんだなー。 よくわからないならコードを読めばいいじゃない、という事で、公式で提供されているTodoアプリのコードを読んでみました。 ソース 公式のサンプル。 Backbone.js Todos todos.js いわゆるTodo管理ツールなんだけど、情報をHTML5のLocalStorageに持つようになっている。つまりブラウザを閉じても内容を記憶している。 JSファイル HTMLから読み込んでいるのは以下。 json2.js jquery-1.7.1.js underscore-1.3.1.js backbone.js backbone-localstorage.js todos.js Backbone.jsはUnderscore.jsとjQueryないしZepto.jsが必須。またLocalStorageを使うためのBackb

jQueryの強力な機能のひとつに、 $('#the-target') のようにCSSのセレクターを用いて要素検索できるというものがあります。この要素検索を行うモジュールにはSizzleという名前が付けられています。 一方、近代的なブラウザーには .querySelectorAll() がネイティブで実装されています。こちらもCSSのセレクターで要素検索できるメソッドです。 セレクタを使用した DOM 要素の指定 | Mozilla Developer Network var $elems = $('elem#id.class, .and.more.selectors'); var elems = document.querySelectorAll('elem#id.class, .and.more.selectors'); JavaScriptで何かするよりも、ネイティブでやった方が高速

個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。）　えらい！ jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;

がーっと作っちゃった後にIEで「識別子、文字列または数がありません」ってエラーになっちゃったときにご活用ください。 ちょんにょろチェッカー

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。）　画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない

ぽわーんって感じです。デモ見て！ jQuery.gpPowanは「ぽわーん」とさせるプラグインです。 「ぽわーん」のところは応用が利きそうなので、「ひょいっ」ってさせるやつも作れそう。

こんにちはこんにちは！　実は<!--more-->はもう上↑に書いてるんですが、ここの文章が最初に表示されていますね？ 一方フロントページや検索等では、以下のような文章が表示されるはずです。 先日のNextPage記法に引き続き、また知らないのがあったので。 「続きを読む」より前の部分を消し去り、一覧画面と個別画面で全く別の文章を表示させる事ができます。 続きを読む →

コメントフォームのところ、こんなの表示されてますよね。 次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> これ以外のタグはすっぱり削除されてしまうんですが、例えばコメント欄でHTMLのコードについて議論した事もあるだろうし、削除じゃなくてエスケープして出力するようにしたいですね。（というか勝手に削るなよ、と言いたい。） あと空行を見つけるとそこで区切って<p>〜</p>にされるけど、これも改行は全部改行のまま出力したい。 要は概ね書いたまま表示するようにしたい、と。まあ空白くらいは詰めてもいいけど、普通

知ってる人には当たり前なんだろうけれど、僕は知らなかったのでメモついでに皆様にも。FYIってやつですね。 特に設定とかはいらないみたいで、改ページしたい箇所にこう書くだけ。

JavaScript おれおれ Advent Calendar 2011 – 19日目 Twitterってちょくちょく見た事無いような文字、記号が流れてきますよね！　なにそれ気になる！てな時にささっと覚えておくと幸せの予感がするのが、 .charCodeAt()と String.fromCharCode()です。 こんなつぶやきがあったとします。 ☺ — 高梨ギンペイ / Ginpeiさん (@ginpei_jp) 12月 19, 2011 あれ、なんか絵文字みたいなの☺がありますね。なにこれ気になる！ そんな時は文字コードを調べてみましょう。文字のコードはだいたい連続しているので、付近にも同じような感じの、面白い文字が隠れているに違いありません。 var code = "☺".charCodeAt(0); // コード取得 var c = String.fromCharCode(code