タグ

ブックマーク / ascii.jp (5)

  • スマホ対応の新潮流「レスポンシブWebデザイン」とは? (3/3)

    *1 768ピクセルでは、ネットブックのようなタブレット以外の端末も指定範囲に入ってしまう。しかし、レスポンシブWebデザインのコンセプトはデバイスベースではなく、ウィンドウサイズベースでデザインを調整することだ。あくまでウィンドウサイズを基準に、そのウィンドウサイズに適したレイアウトを提供する。 1. ピクセルでデザインして%に変換する レスポンシブWebデザインは、width, padding, margin を%単位で指定するリキッドデザインの一種だ。 width, padding, marginを%単位で指定してレイアウトを組めればいいのだが、実際には非常に難しい。そこで、一度ピクセル単位でレイアウトを指定してから、width, padding, margin を % に変更していこう。 たとえば、Webページ全体の幅であるbody要素が960px、その子要素であるheader要素

    スマホ対応の新潮流「レスポンシブWebデザイン」とは? (3/3)
  • コンテンツを依頼するときのSEOチェックリスト17

    コンテンツの発注が曖昧だと、「こんなはずではなかったのに」というテキストやイラストができあがってくる。検索エンジンはテキストを重視するので、特に文章についてはSEO的観点からあれこれ細かく注文し、ライターの仕事を長引かせてしまうことがあるのは当に申し訳ない。 SEOについては、雑誌や書籍の仕事を長くしてきたライターは、「SEOなんて知らないから発注側で適当に直せばいい」という立場の人が多いように思う。一方でライティングの仕事をWebから始めたライターには「ターゲットキーワードは何ですか?」と打ち合わせの段階から聞いてくる人もいる。原稿受領後にSEO的な問題を指摘したとき、すんなり応じてくれるのはWeb系ライターに多い印象だ。 SEO的か否かにかかわらず、原稿に納得がいかず、こちらで手直しすれば手間が増えるだけで、初めから明確に注文しておけばよかった、と毎回反省だ。きちんとしたチェックリス

    コンテンツを依頼するときのSEOチェックリスト17
  • iframe対応!初めてのFacebookページの作り方 (1/4)

    Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する連載。第1回では、Facebookページの概要と基的な機能について、事例を挙げながら紹介しました。今回はASCII.jp Web ProfessionalのFacebookページを例にとって、Facebookページの作成方法を具体的に解説しましょう。 さっそくですが、完成したWeb ProfessionalのFacebookページを紹介します。 Web Professional編集部では、「固定読者を育てることで媒体価値をアップさせる」ことを目的にFacebookページを開設しました。「いいね!」をしてくれたユーザー(ファン)に対して、ニュースフィードを通じて最新情報を提供し、ウォールによる記事へのフォードバックや、ファンの友人を通じた潜在的な読者へのリーチも狙います。Web Professiona

    iframe対応!初めてのFacebookページの作り方 (1/4)
  • jQuery MobileのCSSを変更してテーマをカスタマイズ (1/3)

    CSSを駆使することでjQuery Mobileでもオリジナルデザインを実現できますが(関連記事)、フルカスタマイズではかなりの手間がかかります。今回はjQuery Mobileのテーマカラーのみを変更する、手軽なセミカスタマイズの方法を紹介します。 jQuery MobileのCSSを解剖する テーマカラーをカスタマイズするために、jQuery MobileのCSSがどのように設計されているか、見てみましょう。 jQuery MobileのCSSは、「共通CSS」と「テーマCSS」の2つで構成されています。共通CSSは、要素のサイズや間隔、余白など、ページの構造やレイアウトに関する設定が記述されており、すべてのテーマで共通して利用されます。 一方、テーマCSSは、data-theme属性で指定したテーマ(デフォルトでは「a」~「e」までの5種類)のスタイルを記述したCSSで、指定したテー

    jQuery MobileのCSSを変更してテーマをカスタマイズ (1/3)
  • XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)

    HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に(勝手に)リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い

    XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
  • 1