シングルカラムから始める情報設計
横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、
決めようぜ最高のプログラム言語を綱引きで :: デイリーポータルZ
「PHPがdisられる時代は終わった～っ！ いくぜおまえら～！」「PHP!」「PHP!」（PHPはこの後一回戦で敗退しました） さる2015年1月29日。横浜大さん橋ホールで行われたエンジニア勉強会イベント「CROSS 2015」にて「第一回 プログラム言語対抗綱引き」が行われた。 コンピュータの世界を支えるプログラム言語がその至高性を競い腕力でぶつかる、言語間戦争に決着をつける大会である。 40人の勇者（プログラマー）により死闘を繰り広げたのはC、Perl、PHP、Python、Ruby、JavaScript、Go、Java。 結果、Goの圧倒的勝利で幕を閉じたのだった。あらためて本記事でその全貌をレポートしていこう。 知ってた？ 綱引きの掛け声の「オーエス」ってあれ、「OS（オペレーションシステム）」のことなんだぜ？ 英語版もご用意しております！ English article↓↓↓
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
iOSのSafariで文字選択が思い通りにならないときに使える画期的な対処方法
iOSのSafariで文字選択が思い取りにならなくてイライラすることがある iOSのSafariで表の中の文字の一部分を選択しようとしても、セル全体になってしまったり、行全体になってしまったりして、必要ない文字まで選択、コピーするハメになって面倒なことがあります。 特に、viewport指定で拡大が禁止されている場合はやっかい。 拡大が禁止されていなければ、拡大すると表の中であっても部分選択ができるようになるのですけどね。 あるブックマークレットを使うと表の中の文字であっても自由に選択できるようになる 今回紹介するブックマークレットを問題のページで実行するとアラ不思議！ 表の中の文字であっても自由に選択できるようになります。（続きは[Read More]から） ブックマークレットのSafariへの登録 以下のブックマークレットを全選択してコピー。 javascript:document.b
打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ | OpenWeb
メリークリスマス！ このブログは、HTML5 Advent Calendar 2013の12/25用です。 とはいえ、HTML5カンファレンスとかあったせいで、最近あまり技術的なトピックを追っておらず・・・ ここは、つい最近目にした gulp というプロダクトを触ってみたレポートでもしようかと思います。 Node.js製なので、実はHTML5ともあんまり関係ない。すいませんすいません gulpは、自身のことを「ストリーミング・ビルド・システム」と称しています。つまり、Gruntなどと同カテゴリの「ビルド用ツール」です。 Gruntは、JSON形式で宣言的にタスクのパラメータを記述していく形式です。慣れればスッキリしていて見やすいし、設定を変更するのも容易なのですが、細かくタスクの動作を制御する必要が生じた時に「何をどうすれば求める結果が得られるのか？」がわかりにくいという欠点があります。あ
javascriptで検索語句をハイライト表示 - おやすみばっか
Wordpressにおいて検索語句のハイライト表示は プラグイン：Search Word Highlight for Multibyte で可能らしいのですが、wp-cacheと相性が悪いのと、 phpで実現しているため直接ハイライトのタグがガシガシと書き込まれるのは少しいやですので、 私はjavascriptでの実装にすることにしました。 javascriptでの検索語句ハイライトの実装は、 JavaScriptで検索ワードをハイライトする - Open MagicVox.net 検索キーワードをハイライト表示化 | ふるぱ-しゃる といった記事がとても参考になりますが、日本語対応が完全ではないようです。 ということで本家Scott Yangさんの Search Engine Keyword Highlight with Javascript のversion1.5を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
