可変グリッドレイアウトで実現するレスポンシブWebデザイン（後編） | ADC - Adobe Developer Connection
Dreamweaver CS6 では、 デスクトップやスマートフォン、タブレットなど様々な画面サイズに適したコンテンツレイアウトを実現するための「可変グリッドレイアウト」機能は、「レス ポンシブWebデザイン」といわれる、CSS3の Media Queries を使用してワンソースでマルチデバイス対応させる振り分け方法を容易に実装するための機能です。 前編では、この「可変グリッドレイアウト」機能を利用して、実際に3つのデバイスでレイアウトが可変する大枠のHTMLまでを準備しました。 後編では、以下の様な作例のデザインを元にして、実際の細かい部分のコーディングにあたってのTipsや注意点を紹介いたします。 ※このサンプルサイトは本記事用に作成した架空のサイトであり、公式のページではありません。 モバイル→タブレット→デスクトップというCSSの継承順序と Media Queries まず、前編
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
メディアクエリーの設定とグリッドデザインの導入 (1/3)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 前回までで幅320pxの画面を基準としたCSSが完成しました。今回は、タブレットやデスクトップなどの大きなスクリーンでも閲覧しやすいように、メディアクエリーを使ってCSSを切り替えるようにします。また、大画面用のレイアウトのためにグリッドデザインの考え方も導入します。 レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じ
これからの企業サイトは「レスポンシブ・ウェブデザイン」であるべきだ
スマートフォンで企業のウェブサイトを訪れたとき、パソコン用の画面が立ち上がって非常に見にくい思いをした経験を皆さんお持ちだろう。パソコン用、スマホ用、ケータイ用と3種類のサイトが用意されていれば問題は起こらないが、企業側としては手間もコストもかかる。 一方、さまざまな端末からのアクセスを、ひとつのサイトで対応する方法があり、グーグルもこの方法を推奨している。具体的には、すべてのデバイスに単一のURLで同じHTMLを提供し、見映えを指示するソースの部分（CSS）のみを使って、デバイスごとにデザインを変更するのである。 スクリーンの幅に合わせ、コンテンツの形が柔軟に変わる NHKスタジオパークのサイト。単一のサイトがデバイスによって自動的に形を変える（左上から時計周りに、スマホ表示、タブレット表示、パソコン表示） このような考え方を「レスポンシブ・ウェブデザイン」と呼ぶが、これを実装したウェブ
スマートフォンサイトの作り方(8/8) - 入力フォームの最適化 - シンプルな暮らし。 - 家族とWEBマーケティングな日々
数字用キーパッドの指定 PC画面の場合はさほど問題になりませんが、スマートフォンで入力値が数値の場合(郵便番号や電話番号など)には、数字入力用キーパッド(HTMLのinput type="number"input type="text"にpattern="[0-9]*"を指定してあげるとユーザービリティーが向上します。pattern属性は、正規表現で入力文字を制限する指定で、[0-9]*は数字に限定するという意味です。[0-9]*を指定すると自動的に英字キーボードの場合に数字用キーパッドが表示されます。input type="number"は、iOS4では問題なかったのですが、iOS5のSafariの仕様変更により連続した数字3桁を入力した場合に自動的にカンマが挿入されるのと、先頭に「0(ゼロ)」が入力できなくなったので避けたほうが無難です。 ただし、PC版のほとんどのブラウザではHTML
Webデザインでレタープレス（型押し）エフェクトを作るときのTips
レタープレスエフェクト大好きなんです ...。レタープレスエフェクトを使った Webデザインを観察していて気付いたことをまとめながら、Photoshop を使ったレタープレスの作り方をおさらいしてみました。 最近いろんな Webサイトを見ていると、レタープレス（型押し）を表現したデザインを、たくさん見かけるようになりました。私もきれいなレタープレスが大好きなので、このブログでもたくさん使いたいんですけど、なかなかきれいに表現できません …。レタープレスエフェクトは、黒や白の背景ではあまりきれいにならないし、色やテクスチャによって見え方がかなり変わってきます。レタープレスエフェクトを使った Webサイトを観察していて、こうしたらキレイにできるかも … という視点でまとめてみました。
テーマ | jQuery Mobile 1.1.0 日本語リファレンス
テーマシステム概要 jQuery Mobileに含まれる全てのレイアウトやウィジェットは、統一感のあるテーマをサイトやアプリケーションに実装するための新しいオブジェクト指向CSSフレームワークが適用されています。このテーマシステムはjQuery UIの ThemeRoller に近いものですが、幾つかの重要な進化を遂げています。 画像ではなく CSS3 の角丸、影落とし、グラディエーションなどを活用しているため、テーマファイルが軽量になりサーバ負荷を軽減しています。 テーマは複数の スウォッチ を含みます。これはヘッダバー、コンテンツ、ボタンなどを自由に作成し、組み合わせられるものです。これにより、よりリッチなデザインが可能になります。 この 無制限テーマ システムにより、テーマごとに26種類までの見本を用意でき、ほぼ無限の組み合わせでデザイン可能です。 全ての背景に CSS3のグラディエ
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
スマートフォン最適化を実施する際に最低限抑えておきたいこと : LINE Corporation ディレクターブログ
こんにちは。livedoor グルメを担当している澤田です。 livedoor グルメでは3月に、iPhone版Safariブラウザでの表示最適化に対応いたしました。これは、iPhone版Safariブラウザでlivedoor グルメを閲覧した際に、PC版の画面ではなく、iPhoneの表示サイズや使い方に合わせてカスタマイズされた画面を表示させるものです。 最適化されてないサイトの場合は、基本的にPCと同じ画面がiPhoneに表示されるので、表示される画面が小さく、大量の画像データなどを読み込むため表示に時間もかかります。 この「最適化」の作業を行うことで、iPhoneユーザーにとって必要な機能を、より使い易いナビゲーションで提供できるようになります。 今回はその画面開発時に、ユーザーの使い勝手に留意して設計した、いくつかのポイントについてご紹介します。iPhoneをお持ちの方は、ぜひSa
一行おきにテーブル行の色を変える - jQuery 日本語リファレンス
HOME'S賃貸 家賃相場 2008/03/28のデータより $(document).ready(function(){ // 偶数行の色を設定 $('table#stripe-table tr:even').css('background-color', '#666'); // 奇数行の色を設定 $('table#stripe-table tr:odd').css('background-color', '#333'); }); ここでは直接背景色を指定していますが、addClassなどを使って事前に定義されたスタイルを充てる方が、より実践的でしょう。 $(document).ready(function(){ // 偶数行にのみクラスを指定 $('table#stripe-table tr:even').addClass('even-row'); });
BLOG THE DESIGNIUM : デザイニウムブログ
株式会社デザイニウムは、会津若松市を本社として地域DXとXR（AR/VR/MR）領域の開発を得意とする開発会社です。 Designium Inc., a development firm based in Aizuwakamatsu City, specializes in Community Digital Transformation (DX) and Extended Reality (XR) technologies, driving digital innovation for local community support and crafting XR solutions for diverse industries.
40 Examples of a Single Letter Designed Logo | Naldz Graphics
A logo is an iconic symbol and is one of the most important graphic design elements of a company. It carries the image of the organization and functions to create a recognizable impression to the mind of the customer. It often includes a name or icon of a trademark such as shapes, colors and fonts that represents an organization. Today, we will be sharing a collection of logos which only have one
Webクリエイターボックス
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね
年末年始にWebデザインを学び直すための3つのステップ
この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く
ランディングページ集めました。
2009年からランディングページを集めているサイトです。購買行動や認知拡大のために作られたランディングページのデザインまとめサイトです。LP制作の参考にどうぞ。
30のユニークなコメント欄デザイン
ソーシャルブックマークのコメント機能や、Twitter などのマイクロブログサービスにその場を奪われてしまっているブログのコメント欄ですが、まだまだ工夫次第で楽しいものになりますよ、ということで。30のユニークなコメント欄デザインを集めた記事がありました（via swissmiss）： ■ 30 Must See Comment Designs for Web Designers (Creating a blog web design blog) コメント欄がユニークな30のブログについて。冒頭で「コメント欄のデザインはアートだ！」という名言（？）が飛び出したりしています。とりあえず先に30個を箇条書きにしてみると： alwaysBETA AudetteMedia Baekdal Bartelme Blog Design Blog Dale Anthony Darkmotion Eliti
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/09/jquery-table.html
オットー・オンラインショップ
Webプログラマー＋WebデザイナーなZARU日記