Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
tableソート・スクリプト - Archiva
恒例のライブラリを使わないシリーズ。今回は、テーブル行を並べ替えるスクリプトを書いてみました。実は前にも作ったことはあるんだけど、当時はてきとーにその辺から拾ったものを継ぎ合わせただけで理解してたわけではなく... まあ気にはなってたので、いま作ってみたらどうなるだろう、と。 結果的に、JavaScriptの連想配列をソートする方法を学びました。これがあるから自作はやめられない。車輪の再発明は勉強にはは必要よ。性能面でも、とりあえず400行くらいのデータテーブルなら（画像入ってても）特に遅くはないようです。仕事で使ったから大丈夫。 以下、解説です。 HTML <table border="1" cellspacing="0" cellpadding="0" id="device"> <thead> <tr> <th><a href="" onclick="table_sort.exec('
続・テーブル行を手動でソートするスクリプト - Archiva
さすがに手を抜きすぎたと反省し、とりあえずツールチップ付けてみた。これでだいぶマシかと思う。 ソースは以下にて。 JavaScript var rowSelect = { init: function(table){ var tarTable = $(table); var rowList = tarTable.getElementsByTagName('tr'); for(i=1; i<rowList.length; i++){ //addEvent(rowList[i],'mouseover',rowSelect.msOver,false); //addEvent(rowList[i],'mouseout',rowSelect.msOut,false); //addEvent(rowList[i],'click',rowSelect.selected,false); rowList[i
テーブル行を選択するスクリプト - Archiva
ライブラリを使わないtable要素の行選択。とゆーか<tr>要素のclassを動的に変更するスクリプト。YUIでいうこの辺。 今回のサンプルはより複雑な動作を実現する踏み台という位置づけであります。選択した行の<tr>要素を取得するという動作が必要。オマケでclassの変更。見た目だけならCSSのhoverでも使えば良いし、ライブラリもいっぱいある。Ext.jsとか。自分で組んだほうがカスタム楽そうだ、ということ。 classの取得/設定、Eventオブジェクトとthisの扱いには苦労した。IE逝ってよし。今日ほどサイ本をありがたく思った日はありません。みんなサイ本買おう。 以下、細かい解説。(デモは「続き」で動きます) 行選択: rowSelect() var rowSelect = { init: function(table){ this.rowList = $(table).get
コードは<pre>でマークアップするべき ...か？ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 技術系のネタを出すときに避けて通れないのが、ソースコードの出し方。通常は<pre>要素でマークアップするのが一般的。だけど<pre>要素でマークアップすると、基本的にはどれだけ横長になろうがソース中の改行でしか改行されないため、表示領域内に収めることが難しい。 だが待ってほしい。 そもそも<pre>でマークアップしなければいけないのか？ そんな事はない。<pre>（整形済みテキスト）はソース中のスペースや改行をそのまま表示するために作られたタグで、改行や空白に大きな意味をもつ詩や俳句なんかのために用意されている。それがソースコードのマークアップに使われるのは、単にイン
CSS Nite in Ginza, Vol.21 - Archiva
Make a note of it: Web tech, montaineering, and so on. CSS Nite行ってきました。今回は携帯サイトについて。バックエンドの話もちょろっと出てきて、CSS Niteにしては濃い内容でした。あともう一歩踏み込んでくれれば新鮮な驚きもあったかもですが、やっぱその辺は社外秘っぽいですね。セッションの運用とか。 以下、まとめです。途中で面倒くさくなったので、preタグ貼り付け。 携帯サイトのコーディング事情～基本編 ＠宮永邦彦（アイデアマンズ株式会社） 実例紹介 → 東京モード学園 ・3G携帯のみ対応の先進的なケース 携帯インターネット人口は、パソコンに迫る勢い → パソコン 8,055万人 → 携帯電話・モバイル 7,086万人 （平成18年「通信利用動向調査」/総務省 ） 主な利用者は若年層。学生、女性。 どんなコンテンツが携帯向き？
hover時の背景画像ちらつきに対処する - Archiva
Make a note of it: Web tech, montaineering, and so on. ナビゲーション等で画像を切り替えたい場合、CSSを用いて a:hover の背景画像をずらしたり消したりして実現する方法が良く取られます。この時、Internet Exploler 6 において背景画像のちらつき（砂時計のアイコン表示）や動作の遅延が発生する（ローカルでは確認しにくいので、注意）。サンプルは以下。 »IE6 background flickr この問題はIE6固有の問題であり、他のモダンブラウザやIE5等では発現しない。背景画像のキャッシュに関わる問題。hover時のbackgroundに変更を加えると再読込が起こるようです。したがって転送速度やファイルサイズによって程度が変わる。ブラウザの設定によっても回避できるみたいですが、Web屋としてそこはスルーしたい。解決
JavaScriptの変数とスコープ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 一度しっかり試しておきたかった変数とその有効範囲について。 JavaScriptには変数の型という考え方がない（任意のデータ型の値を代入できる） JavaScriptでサポートされるデータ型には、基本型と参照型がある 参照型の変数には、参照が格納される（実際のデータ値ではない） 関数、配列、オブジェクトなどが参照型 変数の有効範囲を、その変数のスコープという 暗黙的に宣言された変数は、必ずグローバル変数になる 関数の内部で暗黙的に宣言された場合でも、グローバル変数になる var文で宣言した変数は、ローカル変数になる ローカル変数のスコープは、その変数が宣言された関数の
タブ切替をサクッと実装 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。 HTML <ul id="tab"> <li class="present"><a href="#page1">Page_1</a></li> <li><a href="#page2">Page_2</a></li> <li><a href="#page3">Page_3</a></li> <li><a href="#page4">Page_4</a></li> <li><a href="#page5">Page_5</a></li
JavaScriptの巧い書き方 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vim 基本操作まとめ - Archiva