水平スライダー with jQuery | Takazudo Clipping*
こんにちは。 こちらのスライダー、とても役立ちました！ ところで私はｊQuery初心者なのですが、このスライダーを一画像ごとのスライドではなく、１ページのスライドにするにはどうしたらよろしいでしょうか。 また、ページを表示するには（1／5）どうしたらよろしいでしょうか。 お時間がありましたら教えてください。 よろしくお願いいたします。 appleleleさん、はじめまして、Takazudoです。 このスライダーは、完全固定のモノをつらつら動かすだけなので、文書の塊ごとでスライドさせるには、結構いじくらねばならんですね。このJSでやっていることは、 左ボタン：端のハコをanimationでwidth0にちぢめる 右ボタン：端のハコをanimationでwidth150pxにのばす そんで、延々ループするのは、アニメーションがおわったら、消えてるやつを後ろに持って行ったり、前
印刷のことを常に考え、要所要所でボーダーを使うべし | Takazudo Clipping*
印刷って大事なんじゃないですかっていうエントリです。 背景で画像敷いたり、背景色で塗りつぶしたり、複雑なデザインの箱を組む時でも、できるだけボーダーを設定した方が、印刷時に奇麗に見えることがあります。たとえばこんなデザイン。 基本例 背景画像を印刷する設定して、インク代を浪費する人はまれなので、ほとんどの人は、CSSにて指定された背景画像や背景色を出しません。その結果、なんか見出しなんだか何なんだかよく分からんよねという感じに。 まぁ、ある程度はしょうがないんですが、グラデーションの端にborderをつけておくことで、ちょっとだけ分かりやすくすることができる。borderつけてHTML組んだサンプルと、その印刷イメージです。 HTML組んだサンプル(HTML) どうでしょうこれ。なんかすごい微妙な例で申し訳ないんですが、2番目のやつとか、むしろイラネーと自分で思ってしまったんですが、こんな
HTMLの提案書を書こう | Takazudo Clipping*
HTMLなんかどこに頼んだってかわんねーよ！というわけじゃない。 ちょっと前に、会社がコンペに参加するとかでHTMLの提案書を書いた。要件は、もう設計とか完了していて、ワイヤーフレームとかチャートとか用意しちゃっている気合いの入ったクライアントで、デザインとCMSに組み込むためのHTMLテンプレート（とガイドライン）を作ってーというもので、自分が書いたのはHTMLのところ。 まー、最初は自分が全体書いてて、ユーザーありきで設計してデザインしてコーディングしてってやってるんですーという、ワークフローな感じのことを書いたのだけれども、社内のWeb仙人に駄目だしされ、もっと特化したものを書け！大体、デザイン以降が要件なんだから、前半まったく意味ねーよ！ってことで自分の書いたものはフルボツになり、自分はHTMLのとこだっけ書くことになりました。 しかしまぁ、前からこんな、HTMLで何がいいわけ？み
設計者とデザイナーとコーダーと高品質なサイト | Takazudo Clipping*
最近、会社の中で、サイト制作の際、デザイン・HTMLに行くまでにどういう資料を作ればいいんだろうプロジェクトみたいのをやっておりまして、はじめは、ページの構成、こー言う風に考えていますという、ページの内容を説明する資料のフォーマットを考えていたんですが、どうにもそこだけでは足りないような感じに思えてきて、どうしたもんかなーと思って色々見ていたところ、インフォメーションアーキテクチャってのが、まさにその答えでした。今まで制作の中で悶々としていたことが、かなーりすっきり理解できた。誰がいつ何をしないといけないのかが。 なんとなくうだうだ情報設計みたいな話 インフォメーションアーキテクチャについての細かい説明は、勉強中なのでこのエントリ内では詳しく書きませんが、サイト制作には、大まかに、次のようなフローがある。一応ここでは、サーバーサイド技術を含まない、コーポレートサイトみたいなものだと仮定して
ブロックリンクのデザイン | Takazudo Clipping*
最近デザインでつまずいたこと。 つまずいたといっても自分はコーダーなので、ページ組み終わってから、むむっ…ｱｯｰｰｰ！となったこと。 ローカルナビ まずはこれ、ローカルナビの例 ローカルナビなんかのデザインなどで、Aの場合、液晶テレビ～のリンクは、明らかに文字しかリンク範囲が反応しないように見えるが、Bの場合は、枠の中全体がリンク範囲として反応しそうに見える。こんな感じでリンク範囲を文字の周囲にまで及ぼしたいときは、Bみたいに、どこまでがリンクとして反応するのかがすぐ分かるようにした方が使いやすいし迷わない。 ブロック形式のナビ 次はこれ、ブロック形式のナビの例 先程の例を生かして、全体をリンク範囲にしよう！だから、Aみたいなものを作った。 Aだけが存在する場合、これは、ブロック内全体リンクにして間違いない。 Bが加わったとき、Aがあるなら、当社の…の説明文もリンクしなきゃおかしいか
h1はトップレベルの見出し | Takazudo Clipping*
h1をページロゴにすべきか、ページの内容を一番よく表す見出しとして使うべきか、考えるネタとして、W3CのTipsのなかにこんなのがあった。 Use <h1> for top-level heading これによると、 スタンドアローンのページであれば、「ジェネバのおすすめスポット」みたいな、ページ内容を一番よく表す見出しがh1=titleになり、両方に指定すればいい。 複数のページにまたがる内容の一部であれば、例えば、ペットのサイトのなかにある犬のページであれば、h1は、「犬」っていう、ページの内容を汲み取れる見出しにしたほうがよくて、titleには、内容が分かるように「犬 - ペットガイド」にすればうまくいくんじゃねーか とある。 そうなると、サイトロゴとかって何タグになるの？というなぞなぞに対して、個人的には、別に決まってないってことで、妥協のpとかでいい。とか思う。 ロゴだけじゃなく
何で見出しレベルを飛ばしちゃいけないの？ | Takazudo Clipping*
見出しレベルって飛ばしていいと思うんだけれども。 いいというのは、文章の内容的に考えたら、飛んでるのは自然で、色んなアクセシビリティガイドラインでAAAとかとりたいなら飛ばさないでいくしかないと思った。ちなみに、明確な答えは無い（と思う）。 文章的に自然というのはどういう意味かというと、 見出しには、上から考える見出しと、下から発生する見出しがあると思うんですよ。「レベル見出し」と、「汎用見出し」みたいなものが。 自分が良く出会うのは、こんなの これ（右図）の、「注意」って、h2なんでしょうか？ でも「パグ」と「ゴールデンレトリーバー」より明らかに重要度低い。「写真」も同じ。こーいうのって、h1の見出しの下が分かれる場合はh2で、その下で別れる場合はh3で･･･って言う考えとは、逆の考えで、 注意 - 犬が嫌いな人は帰ってください 写真 - 犬の写真 っていうコンテンツの塊だけで考
class名のつけ方 | Takazudo Clipping*
デカいサイトでのclass名のつけ方って、すごい難しいと思う。 だけど、CSSいじったりし始めたりした人は、その、すごい難しいってことに気付かないと思う。 別にCSSだけの話じゃなくて、プログラム書くときの関数名とか構造も同じだと思うんだけれど。 ベストなclass名のつけ方は、完全にサイトの構造を把握してないと無理だと思う。 そして、そのサイトに要素が追加されたときにも柔軟に対応できるルールを持ったclass名のネーミングルールが必要だ。 破綻が起きて、CSSが混沌になってしまわないように。 今自分がこれがイケテルーと思うのは、こんなかんじ。 まず、ページで使われる要素を、モジュール化する。 （みんなやっていることだとは思うが） このモジュールの中で使われるclass名は放っておくとして、この、モジュール単位のクラス名が超重要。具体的には、見出しとかリストとか、ナビのリス
alt属性はいかに決定されるべきか | Takazudo Clipping*
画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt！と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
