googleadservices がデザインを破壊する GoogleAdservicesのトラッキングコードを入れると、消去できない余白がサイトの下にできてしまう問題があります。悪さしているのは、 <script src="https://www.googleadservices.com/pagead/conversion.js" type="text/javascript"> というタグで、</body>タグの直前に幅300px、高さ13pxのiframeを挿入します。 このifram…

なんてことを、こちらの記事を読んで思いました。 デザイナーと一口に言うけれど - LIFULL Creators Blog に書いてあるところによると、 ユーザー体験を演出するUXデザイナー ユーザーの使いやすさを考えるUIデザイナー 見た目の美しさを考えるビジュアルデ…

フラットデザインだか、ミニマルだか分かりませんが、スマホのアプリを紹介するサイトとかでよく使われる一枚絵のウェブデザイン。大雑把に言うと下の絵のような。 でっかい写真があって、何かクリックさせるボタンが一つだけとか。これが縦に長くなって同じ…

きっかけはホッテントリー 奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ 気持ちはよく分かります。でも「これはアカンやろう」って話で終わっちゃうのはもったいなくて、やっぱWeb屋としては、これはおいしい教材な…

なんかの拍子にFirefoxをリセットしてしまい、使っていたアドオンを全部再インストールしなきゃいけない羽目になったので、今後同じようなことになってもすぐにもとに戻せるようにメモ。 ColorZilla – Firefox (ja) 向け拡張機能を入手 専ら色のピックアッ…

アクセシブルなデザインがトレンドになる？ iPhoneやAndroid、Windows8など、タブレットやタッチデバイス対応のOSが次々に出てくる今、タッチデバイス向けのWebデザインをどうするのかという悩みがまた一つ、発生しています。 しかし、タッチデバイスに適し…

コンテンツの分類 1．プロフィール（既存のものをほぼ流用） 1-1 履歴/資格/職務経歴 1-2 使用ツール･ソフト 2．作品集 2-1 ウェブサイトデザイン（既存のアーカイブ） 2-2 ブログカスタマイズ（Ti-da,はてな、他。） 2-3 CMSデザイン（サーバを借りる。） 2…

個人サイトのリニューアル計画 背景 職業訓練期間中に製作したサイトは以下の問題を持っている。 アクセシビリティに乏しい。 コンテンツの拡張性がない。 目的。仕様 アクセシビリティ、ユーザビリティの向上。 コンテンツの拡張性の向上。 フリーとなるこ…

前回の続き。 margin:; IE6未満、IE6後方互換モードでautoが効かない。 border:; IE5ではdashed,dotted非対応（参考）。また、インライン要素に適用する場合、width指定をしないと表示されない（参考）。 width:;,height:; IE6未満及び各IE後方互換モードで…

IE6未満のブラウザをターゲットにすることは無いと思うけど念のためチェック。 ※プロパティの対応状況は、詳解HTML&CSS&JavaScript辞典 第三版を元にしています。 要素:first-letter{:;} 最初の一文字の制御。IE5(Win非対応、Mac文字化けの危険) font-size:;…

使用方法 <ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby> これを表示させると、 漢字(かんじ) となります。これだけタグがややこしいと、ユーザー辞書登録をしておいたほうが良さそうです。 文書型はXHTML1.1以降。 即ちこうなる。XHTML1.1宣言 又はHTML5宣言 アクセシビリティに与える影響…

大抵のウェブサービスでは、プロフィール画像や、ファビコンを設定することができます。 ところで、この画像の製作ですが、存外難しいものです。今日はほぼ一日、居眠りとお絵かきで終わってしまいました。 製作した画像は2枚。 一つ目は、プロフィール画像…