Web制作の現場で「ユーザビリティ」という言葉が注目され始めたのは2000年ごろからでしょうか。それ以来、Webデザインの専門誌では頻繁に取り上げられ、今ではWebサイトを評価する際の大きな指標の1つとなった感があります。しかし、その一方で、システム開発の現場では、ユーザビリティの概念はあまり浸透していない印象があります。 もちろん、多くのエンジニアが自...
新人研修コーディングについての資料作らねばーーー… HTMLコーダーとは何をする人なの？ (X)HTML, CSS, Javascriptを中心とした、 Webサイトの表側の技術を担う人です。 サイト設計 → デザイン → コーディング → システム開発 具体的には… コードを書いて、ページを作っていったり…((X)HTML+CSS) 仕掛けをのっけて、分かりやすいインターフェイスを作ります。(Javascript) (X)HTM...
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでア [...]
最近は立て続けに WEB サイトの CSS の設計をやっていまして、毎回最初に悩むのが採用する HTML のバージョンです。 弊社では XHTML1.0 Transitional か XHTML 1.0 Strict のどちらかを要件によって使い分けることが多いですが、実際のところ世の中の大手といわれているサイトではどのバージョンが採用されているのか。 調べてみました。 全て日本国内サイトのトップ
目的・経緯 embed 要素は XHTML 1.0/1.1 では定義されておらず、画像以外のオブジェクト埋め込みには object 要素だけで行います。しかし object 要素は以前からブラウザごとの実装に差異が多く、使いどころが難しくて結局 DTD を HTML 4.01 にして embed タグを書かざるを得ないということがままありました。 ここでは、それを解決するために色々書き方を変えては異なる環境でテストし、...
Fireworksなんて持ってないけど、会社で使う人が約1名いるのでご紹介を。 Fireworks8とAdobeFireworksに対応しているみたいですね。 ダウンロードは以下ページから。
IT系の出版社の編集者があつまる飲み会というものがあり、ネット系のメディアが中心になってからもたまに参加している。だいぶ前になるが、その集まりで、こんな発言があった。 ネットユーザーは馬鹿ばっかりだから、 ちょっと刺激的なタイトルをつけたら すぐ騙されてクリックしちゃうんだよね。 大手ニュースサイトであっても、記事タイトルの付け方1つでアクセス数は...
オープンソースCMSを代表する12製品の紹介 この記事は、Product ShowcaseとしてオープンソースCMSを解説する記事の後半だ。前半の記事では、オープンソースCMSとはどういうものかについてや、導入にあたっての注意点、商用CMSと比べた場合の費用の違いなどについて解説しているので、まだ読んでいない人はぜひ参考にしてほしい。→前編の記事「オープンソースCMSを賢く使う勘所と...
Universal Edit Button(略称 UEB)は、Wikiなどの「ユーザが編集に参加できるウェブサイト/ページ」を普及させようという新しい活動だ。 フィードのアイコン が「ウェブサイトの新着通知を受け取れるマーク」として普及し、FirefoxやInternet Explorerでも採用されて広まったのと同様に、「編集できるページを示すマーク」を作り、個々のユーザがもっとウェブを編集する世界を実現しようと...
13日の金曜日に行われたCSS Nite Shuffleは、強烈な印象の残ったイベントでした。特に住さんと高木さんのトークセッションは、いろいろな思いを持って聞きました。どれだけ整理して書けるか分かりませんが、がんばって [...]
『 HTML5ではmenu要素やheader要素/footer要素、nav要素などコンテンツをより明確に構造化するための専用の要素が設けられていますが、これを利用して利用者がどのサイトも同じデザインで閲覧できるようにもできるでしょう 』 by denken
垂直スクロールバーは一般的にユーザの右側にあります。でも、左側にあったほうがアクセシブルなときもあると思います。 肢体不自由者の操作の困難さ 一般的にページを縦にスクロールしたいときは垂直スクロールバーを使うことと思います。そして、そのページから1つ前のページに戻るときはブラウザやソフトウェアのツールバーにある「戻る」などをクリックすることと...
こんな話題はいまさらかもしれない！ それはわかってます！ だけど書きたい！ なにって、[OK]ボタンの位置のことです！ これって右に置くのが自然だよ絶対！！ 理由は単純で、 [OK][キャンセル] は、画面によっては [保存] [取り消し] だとかに名前を変えるし、 さらに、入力が3ページあるようなウィザード形式の画面なんかだと、 [ここまでOKそして次の画面へ]、[間違ったかも...
このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自分のサイズや位置に責任を持つ要素である。 layout を持つ要素は、四角形の領域を作る。 layout を持たない要素は、 layout を持たない要...
自分用のメモです。font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で...
『 文字が長くなっても大丈夫なように背景を伸張させるCSS/<aclass=buttonhref=#><span>Submit</span></a>型 』 by llcheesell
なぜみんなlightboxを使うのだろうか。あれ、迷惑なだけだと思うのだ。文章と比較しながら画像を見ることが出来ないし、視覚的には別ページっぽく見えるのに、ブラウザの戻るボタンを押すと前のページに移動してしまう。Flashが叩かれていたときによく言われていたことをそのまま繰り返しているじゃないか。lightboxって、何がいいの？ 何も便利になっていない。 google_ad_channe...
『 2.0あっちゅうま!フォトショップでレイアウトしたことないからすごいなーっておもうなあ 』 by aeka
Twitterでちょっと盛り上がったのではてなにもメモ。あまり見かけない意見なので書いておく。 マウスオーバーすると、リンク先のサムネイルを表示するJavascriptがあるんだけど、あれが役立ったことないんだよなー。その割には鬱陶しいので、だから、自分で導入する気はないし、できたら導入して欲しくない。 サムネイル画像を表示すれば、閲覧者が興味を持ちやすくなるだろ...
今や全く静的なWebページの方が少ないと言えるほど、Webサイトとスクリプト技術は切っても切れない関係にある。PHPなどとは無縁なはずのWebデザイナやマークアップエンジニア（HTMLコーダ）であっても、こうした技術に接しなければならないことも多々あるだろう。 しかし、全く理解できないままでは、プログラマとのコミュニケーションも円滑にいかず、またちょっとした...
