This is what every (ish?) html5 form element looks like on your current operating system and browser. by Joshua Jenkins
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
とあるシステムでデータベースから引いてきたデータの表示が文字化けするという不具合がありました。 データベース内のデータとしては文字化けしていない状態で格納されていることはわかっていたので、どこかしらの文字変換で化けていることはわかっています。まずはどの誤変換により文字化けするのか原因切り分けのために、decode/encode の組み合わせによる文字化けパターン一覧を作りました。おかげさまでどのパターンに類するものか判別することができ、無事に改修することができました。 その話はまた別にするとして、今も昔も変わらず文字化けに悩む人は意外と多いと思います。誤変換結果一覧は原因解析の参考になると思い、記事としてまとめることにしました。 文字コード変換ミスによる文字化けパターンを可視化するプログラムと一覧表 まずは誤変換を生成する perl スクリプトです。プログラムはとっても簡単で、「文字化けで
2013年4月7日 著 レスポンシブWebデザインにおけるコーダーの役割という記事を読みました。冒頭、自分では思ってもいないところでリツイートされましたとありますが、何を隠そう僕もリツイートした一人であります。記事に書かれている内容については基本的に賛同できるのですが、これを機に以前から思っていたことを二点ほど、まとめておこうかと(既にTwitter上でつぶやいたことと重複しますが)。 一点目は、レスポンシブWebデザインの場合、スクリーンサイズなりスクリーン幅ごとに「分けて」考えないほうが、うまくデザインできるのではないか?ということ。逆に言えば、分けて考えれば考えるほど、うまくデザインできないように思います。たとえばスマートフォン、タブレット、デスクトップPCそれぞれに完全に「分けて」デザインされたものをメディアクエリーで合体させたところで、それが優れたレスポンシブWebデザインと言え
メタファー、日常生活であまり使うことのない言葉ですが、実はWebを通して私たちは日常的に触れています。 そもそものメタファーの意味はwikipediaに下記のように説明がありました。 メタファーは、言語においては、物事のある側面をより具体的なイメージを喚起する言葉で置き換え簡潔に表現する機能をもつ。わざわざ比喩であることを示す語や形式を用いている直喩よりも洗練されたものと見なされている。 参考: wikipedia Webにおけるメタファーで代表的、かつ議論があるものと言えば、保存を示す「フロッピーディスク」のアイコンでしょうか。 フロッピーディスクは昔、(今ではあり得ない量ですが)データを保存するものでした。そのなごりで私たちはフロッピーディスクのアイコンを見ると「保存するアイコン」と認識するようです。 この他にもWebにおけるメタファーの例はたくさんありますが、 今回は「メタファーがU
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
[対象: 全員] Tag Assistant(タグ・アシスタント)というChromeの拡張機能をこの記事では紹介します。 Tag Assistantを使うと、GoogleアナリティクスをはじめGoogleが提供するサービス・ツールのタグが正常に動いているかどうかを検証できます。 使い方は簡単です。 インストールして有効化したら調べたいページでアイコンをクリックします。 “working”と出ていれば正常に動作しています。 Googleアナリティクスのトラッキングコードだけでなく、タグマネージャのタグやAdWordsのコンバージョンタグ、リマーケティングタグもチェックしてくれます。 正常に動いていないときは“not working”が表示されます。 “working”あるいは“not working”をクリックすると詳細な情報が表示されます。 オプションで「Detailed Informat
【Web開発者必見!】Windows8タブレット向けWebサイトを構築する際に知っておくべき9つのポイント Windows8が出てしばらく経ちました。今後はWindows8のタブレットやハイブリッド型のノートPCが普及して、モダンUIのブラウザも開発対象になっていくと思います。弊社ではWindows8タブレット、モダンUIのInternet Explorer10を対象にしたWeb案件も始まっています。既存のサイトをモダンUIブラウザに対応することも増えるでしょう。そこでデスクトップのブラウザで開発する場合とどのような違いがあるのかをまとめてみました。あと誤解のないようにいっておくとタブレットでも一応、デスクトップのブラウザは使えます。ただタッチパネル用ではないのであまり使いやすくありません。ですのでタッチパネル向け=モダンUIブラウザ向け という前提で話を進めます。 1. モダンUIブラウ
前回の記事ではサイト全体の参考サイトのまとめ紹介でした。 今回はサイトの各部分のデザインにこだわった参考サイトの特集をしてみました。 デザインで何か物足りないなーと思った時に、ちょっと見てみると良いかもしれません。 特殊ページ Not Found ページ COMING SOON、工事中ページ/ 管理画面ページ/ ショッピングサイト ページ パーツ 背景 ロゴ/ タイトルイメージ/ ヘッダー/ フッター/ フォーム/ テーブル/ ナビゲーション・メニュー/ バナー/ ボタン/ その他要素/ レイアウト 特殊ページ <Not Found ページ> かっこいい404 Not Foundページのデザイン集 | CSS Lecture 404エラーをデザインする為のインスピレーション*ホームページを作る人のネタ帳 WordPressの404ページデザインいろいろ | CREAMU <COMING S
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
流行りのレスポンシブ・ウェブデザイン! よく使われるデザインパターンを集めてみた! 2013.01.18 | この方法お勧めです! | サイト推薦! tips | WordPress | ほらみんなも! | デザイン | レスポンシブ あけましておめでとうございます! 今いる場所がシアター!Huluの動画サイトにはまり、かなり引きこもりがちなブラウンです。 超寝不足。。。やばいです。。。 今回は流行りの【レスポンシブ・ウェブデザイン】について、デザイナー目線の記事を書こうと思います。 少し前までは『レスポンシブ!?そんなんいらんわっ!!無視や!無視っ!!』って思って勉強することから逃げていました。しかしもうダメのようです… もうIT業界では、レスポンシブ・ウェブデザインは当たり前って流れがきてます。確かにアクセス解析ではPCよりスマホやタブレットからの方が多いですし。 とにかく、今回レスポ
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ~っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか?さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう! LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
はじめに Webデザインを行う上で一番使われているソフトといったら、やはりAdobe Photoshopでしょうかね。僕も仕事で使うことはよくあるんですが、やはり画像の補正やら修正・レタッチ、合成などがほとんどで、オブジェクトを作って配置していくということをPhotoshop上で行うことに慣れていません。 そして、僕自身仕事で一番使うのはやはりAdobe Illustratorです。印刷物のデザインをメインにやってきましたので、自ずとそうなってしまいます。しかし、IllustratorはWebデザインには向いていないとよく言われます。そう言われるにはたくさんの理由があるのだと思うのですが、線にアンチエイリアスがかかるときがあることや、そもそもIllustratorの操作に慣れていないという声もよく聞きました。 ですので、今回こちらの記事では、僕のようなスタイルの人がWebデザインをIllu
「安全なウェブサイトの作り方」は、IPAが届出(*1)を受けた脆弱性関連情報を基に、届出件数の多かった脆弱性や攻撃による影響度が大きい脆弱性を取り上げ、ウェブサイト開発者や運営者が適切なセキュリティを考慮したウェブサイトを作成するための資料です。 「安全なウェブサイトの作り方」改訂第7版の内容 第1章では、「ウェブアプリケーションのセキュリティ実装」として、SQLインジェクション 、OSコマンド・インジェクション やクロスサイト・スクリプティング 等11種類の脆弱性を取り上げ、それぞれの脆弱性で発生しうる脅威や特に注意が必要なウェブサイトの特徴等を解説し、脆弱性の原因そのものをなくす根本的な解決策、攻撃による影響の低減を期待できる対策を示しています。 第2章では、「ウェブサイトの安全性向上のための取り組み」として、ウェブサーバの運用に関する対策やウェブサイトにおけるパスワードの取扱いに関す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く