ゼロから始めるレスポンシブWebデザイン入門スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、菊池 崇氏が解説します。
ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
作って学ぶスマートフォン対応サイトの基本 (2/4)
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
スマートフォンサイトをデザインする7つのポイント (1/3)
Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ
星占いサイト「筋トレ」は、なぜラッキーカラーを紹介しないのか (1/5)
sponsored 2024年4月に新キャンパスへ移転した静岡デザイン専門学校は、最新設備を備えた実習室とMSIのノートPCで学生の実践力を養成 sponsored 部屋が狭い日本家屋仕様になったピラーレスケース、自作初心者にもオススメ！ ピラーレスだがコンパクト、価格もお手頃なCORSAIRのPCケース「3500X」が完成度高い！ sponsored コスト、人材、セキュリティ…… データ活用の課題を包括的に解消するHPEの取り組み なぜHPEがソフトウェアを？ 統合データ基盤「HPE Ezmeral」に注力する理由を率直に聞いた sponsored “データをためる”と“データを活用する”の2製品が解決する課題、得られるメリットを知る 「HPE Ezmeral」がシンプルに実現する大規模データ活用の姿とは sponsored スマホ設定で快適なハイエンドゲーミングルーター「ROG Ra
ネットショップに強いWeb制作会社の選び方 (1/8)
WebPro 評判を高めるネットショップのクレーム対応 ネットショップで小売に進出した鰻の「山口水産」。慣れないクレーム対応に追われるスタッフへWebディレクター江口明日香が出したアドバイスとは？
jQueryとは――Webデザイナーから見た魅力 (1/3)
Webデザイナーさん、（X）HTML／CSSコーダーさん、マークアップエンジニアさん、お待たせしました。Web制作者のためのjQuery入門が始まります。 本連載では、現役Webクリエイターの西畑一馬氏が、人気のJavaScriptライブラリ「jQuery」を使ったリッチなUI（ユーザーインターフェイス）の作り方を解説します。プログラムの基本的な書き方の説明から、実務で使えるサンプルの紹介まで。目指すは「Webデザイナーが最短距離でjQueryを使えるようになること」です。 jQueryをマスターすれば、たとえば「このタブパネルの向きを変えてほしいんだけど……」といったクライアントのわがままにもスピーディーに応えられるようになります。仕事の幅をぐっと広げるきっかけに、本連載をお役立てください。 （編集部） 圧倒的人気を誇るJavaScriptライブラリー「jQuery」 ここ数年、「pro
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
新Google検索にSEO/SEM業界は大困惑？
近い将来、SEO（検索エンジン最適化）業者は困ったことになるかもしれない。グーグルが、Web検索のパーソナライズに本腰を入れてきたからだ。 グーグルは、5月7日、Google検索に「サーチウィキ」機能を導入したと正式に明らかにした（関連記事）。サーチウィキは、ユーザーが検索結果を中から任意のWebサイトを上位に移動させたり、非表示にしたりできる機能。5月に入ってから順次導入を始めており、一部ユーザーの間では数日前から「検索結果のページに見慣れないアイコンがある」と話題になっていた。 サーチウィキが有効になるのはGoogleアカウントを所有し、実際にログインしているときだけだ。カスタマイズした検索結果は、自分のIDでログインしている場合にのみ反映されるもので、他のユーザーには影響しない。 検索結果の順位を入れ替えたり非表示にする以外にも、手動で任意のサイトを追加する機能もある。さらに、検索結
ASCII.jp：絶対入れたいFirefoxアドオン最強50選
sponsored 超高リフレッシュレートのゲーミングディスプレーって体感できるの？ 500Hzの液晶はどれ？144～500Hzの中からVALORANTのプロに見極めてもらった sponsored MSIがビジネス向けPRO Seriesの4K・IPSモデルを発売 27インチ4Kディスプレー「PRO MP273U」が3万円台、PIP/PBP機能で作業の合間にPS5もプレーできる sponsored JN-MD-IPS13U2KPをレビュー 2160×1350ドットのキックスタンド式13型16：10モバイル液晶が2万円台、もうこれ買いますわ sponsored 2024年4月に新キャンパスへ移転した静岡デザイン専門学校は、最新設備を備えた実習室とMSIのノートPCで学生の実践力を養成 sponsored 部屋が狭い日本家屋仕様になったピラーレスケース、自作初心者にもオススメ！ ピラーレスだが
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
次世代ブラウザ、Web制作者の苦悩 (1/4)
今月17日の公開からわずか1日で800万件超というダウンロード実績を打ち立てた「Firefox 3」。一足早く今月12日に公開された「Opera 9.5」も17日までの5日間で470万件のダウンロードを記録するなど、次世代Webブラウザの出足が好調だ。 JavaScriptまわりを中心とした処理速度の向上（関連記事1）、セキュリティの強化や多機能化（関連記事2）といったさまざまなメリットが、それだけ多くのPC/ネットユーザーに歓迎されているということだろう。 だがその一方で、人知れず苦労しているのが、企業のWebサイトやインターネットサービスの制作を担う、「Webデザイナー」や「マークアップエンジニア」たちだ。実は普段、私たちが何気なく見ているWebページを「どのブラウザでも同じ見た目に保つ」というのは一筋縄ではいかない。Web制作者から見た、“次世代ブラウザで変わったところ”を探ってみた
デザイナーにオススメ！JavaScript滑らかメニュー
サイトの構造を分かりやすく整理したグローバルナビゲーションを設置したい。カテゴリが細分化されているWebサイトで、遠回りせずに直接、目的のページに移動できるようにしたい――。そんなときに使えるJavaScriptライブラリが、Dynamic Driveで公開中の「Smooth Navigation Menu」だ。 Smooth Navigation Menuは、多階層のドロップダウンメニューを簡単に設置できるライブラリ。（X）HTML中のリストタグを読み込み、下の画面のようにドロップダウンメニューとして表示してくれる。しかも、メニューの展開時にはちょっとしたアニメーション付き。ライブラリ名にもなっているとおり、スムーズな動きがなかなか気持ちいい。 このSmooth Navigation Menuは、JavaScriptに詳しくないWebデザイナーでも扱いやすいように、スクリプト部分を一切い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実践！iPhone＆Androidサイト制作ガイド
作って学ぶスマートフォン対応サイトの基本 (4/4)
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門