CSSコーディング【完璧 css divタグレイアウトコーディング】xhtml版
対応ブラウザWindows：IE6,netscape7以降（firefox,mozilla系）,opera6以降対応ブラウザ Macintosh：IE5.x（classic＆OSX）,netscape６以降（firefox,mozilla系）,opera6以降 はじめに このサイトで説明しているcssとxhtmlでのレイアウト手法は、今までドリームウィーバー(dreamweaver)でホームページを作成していて、これからはxhtmlフォーマットでページを作りたいというプロフェッショナル志向の方にはお勧めの方法です。初心者のかたにもお勧めです。わかりやすい説明を心がけております。もちろんタグ打ちでホームページを作っていくのが得意、または好きだという方にもお勧めの方法です。 本サイトでうたっている対応ブラウザは幅広いです。最初の表示が遅くていらいらするので有名なnetscape6.2も対象ブ
Web標準化Tips - Web標準普及プロジェクト
特定のWebブラウザの独自拡張仕様を使っていたり、 特定のWebブラウザの表示が間違っていたために、 Mozillaによって実際に問題が発生した事例の修正方法を紹介しています。 また、ここで紹介する修正案は全てWeb標準仕様に基づいた内容となっています。
W3C - W3Cの仕様書等の文書の日本語訳集
注意 日本語翻訳集は w3c-translators@w3.org メーリングリスト上で報告された日本語翻訳文書へのリンクを集めたものです． リンクされた翻訳はボランティアによって行われたものです． またこれらの翻訳には誤りが含まれる可能性もあります． 正式なものはあくまでも英語版ですので， この点をご理解頂いた上でご利用下さい． またコピーライトに関する情報を含め，W3Cの文書の翻訳に関しての一般的な情報や， 翻訳の際のヘルプは， http://www.w3.org/Consortium/Translation/にあるW3C翻訳ページ(英語版) をご覧下さい． TR集 勧告 ・ 勧告案 ・ 勧告候補 ・ 草案 ・ 技術ノート その他の文書等 FAQ集 ・ その他 TR集 勧告 HTML 4 (勧告) http://www.asahi-net.or.jp/~bd9y-ktu/html4re
XHTML、CSS を学ぶ時の 6つの間違い
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
Final Builds Site - IE Collection
Nederlandstalige versie, Main, Sitemap, News, Download links, Frequently Asked Questions and Answers, K-Lite Codec Pack, VideoLAN, DivX, Xvid, TreeSize Free, TreeSize Professional, Nero CD-DVD Speed, Nero DiscSpeed, IE Collection, McAfee VirusScan, 7-Zip, B1 Free Archiver, WinRAR, WinZip, DirectX, Tweak UI, IrfanView, Ad-Aware, Spybot Search & Destroy, Skype, PuTTY, KeePass Password Safe, Mozilla
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
WEBのモックデザインを作る時、便利な素材集「A Collection of Useful Web Design Wireframing Resources」
WEBのモックデザインを作る時、便利な素材集「A Collection of Useful Web Design Wireframing Resources」 WEBデザインのモックを制作する時に、クライアントにもっとアップ時の雰囲気を分かってもらう時に必要なのがブラウザ枠などをはじめとしたインターフェイスのデザインです。今日紹介する「A Collection of Useful Web Design Wireframing Resources」はそんなインターフェイスの素材をあつめたモックデザインを作る時、便利な素材集です。 Photoshop Browser Templates from joel laumans 上記は解像度別のブラウザのpsdデータ。PSDで制作を進めている方には便利な素材だと思います。その他にも様々なデータがまとめられていましたので、下記に貼付けておきます。 詳し
モバイルサイトを作るときに参考になるサイト – creamu
Mashableで、モバイルサイトを作るときに参考になるサイトが紹介されています。 いくつかご紹介しますね。 Mippin RSSを使ってサイトのモバイル版が作れるサービス WPtouch WordPressをiPhoneやAndroid携帯に対応させてくれるプラグイン Mobify デバイスごとの表示をリアルタイムに確認しながらCSSを編集できる。A List Apartがこれで作られた iPhone Compatible CSS Layouts iPhoneに対応したCSSレイアウトを配布 Smashing Magazines’s Mobile Design Showcase 9月にSmashing Magazineがまとめた、iPhoneデザインまとめ CSSiPhone iPhoneサイトのCSSギャラリー A List Apartの例はとてもいいですね。 一度見てみてください。
High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ | warikiru
2009-11-24 High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ ラベル: performance CSS Nite in ISHIKAWAで話をしてから1ヶ月経ったので、薄れゆく記憶の復習も兼ねて思いの丈を綴ってみたｗ High Performance Web Design 1. What's High Performance?ここでいうパフォーマンスというのはWebサイトの表示高速化についてです。つまり、ページをいかに早く表示させるかという課題です。でも、そうゆうのってサーバー側の問題でしょ？システムエンジニアの管轄じゃないの？と思われがちですが「ハイパフォーマンスWebサイト」の著者であるSteve Soudersの調査によると、80:20。一般的にユーザーの待ち時間の実に80%がブラウザ側、フロントエンドで費やされて
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
消費されずに成長するためのデザイナの3つの命題 - ＠IT
もうWebデザインしないなんていわないよ、絶対（4） ［番外編］ 消費されずに成長するための デザイナの3つの命題 ワンパク 宮城秀雄、吉森大介、野村政行 2009/11/26 新人デザイナよ。君は、Web制作がどんな体制で行われ、デザイナが何を担当して、何をすべきなのか、を考えているか インターミッション 右も左も分からないままに歩き出したWebデザイナへの道。チームプレーを学び（第1回「入社1年目、デザインしないデザイナなんて!?」）、スキルを磨き（第2回「デザイナーは消費されるもんだぞ」）、プレゼンでもまれて（第3回「デザイナーのためのUI設計段階のデモ制作6カ条」）、僕は少しずつ進歩してきた。 「消費されずに成長し続けるWebデザイナ」として1人前になるべく、これからの物語は新たな局面を迎えるわけだが、今回は外伝として理想の制作体制について僕なりに考えてみることにする。『フォレスト
商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと. net
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能（Commercial use）なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約（Terms of Use等）をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真 商用サイトでも利用できるロイヤリティフリー、パブリッ
デザインスタジオ・エル | 長野市のグラフィックデザイン／Webサイト制作会社
超えるをつくる あなたのいいところや、伝えたいこと。 一緒に見つけて、つくって、育てていく。
Web屋のためのVim設定・Tipsまとめ 2/2 - ナレッジエース
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) 「Web屋のためのVim設定・Tipsまとめ 1/2」からの続き。 Vimを使ったHTMLとCSSの編集について、さらに関係しそうな事項を紹介します。 HTML編集でもよく使うVim基本機能 =キーで自動インデント HTMLのインデントが崩れているときは、範囲選択して=キーを押せば、自動的にタグの入れ子を認識してインデント調整されます。 ばらばら→範囲選択→「=」ですっきり カレント行だけインデント調整したい場合はノーマルモードで==とすれば可能です。 なお、手動でインデントを上げ下げするには、ノーマルモードでは>と<、インサートモードでは<C-t>と<C-d>が使えます。 gfで相対パスのリンク先ファイルを開
ajiblo - デザイン作業効率化のためのルール
footer など… これをきちんとやっておくとコーディングの効率アップすることができます。 社外の方と協業する際もこのようなガイドラインがあるとスムーズに進めることができます。 その他には ・アイコンなどの共通素材をスマートオブジェクト化。 ・パターンライブラリの充実化・共有 ・スタイルの活用（よく使うスタイルの登録） ・各ファイルの軽量化 (ベクトルオブジェクトのラスタライズや、共通要素のレイヤー統合など） などもあります。 ■デザイン・コーディング作業時 ・案件ごとにデザイン指示書およびコーディング指示書を作成する。 ページ数が多い案件では特にこのような指示書があると効率化ができます。 何人かで手分けしてデザインやコーディングを行う際、 色や間隔を確認する手間を省くことができるのです。 ■素材の共有 ・アイコン・イラスト素材の共有 ・没になったデザイン案などの活用 似たようなものを作
「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]
一定期間更新がないため広告を表示しています
![「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2302e44c95c7e474fefb218540004f95dc47a4bb/height=288;version=1;width=512/https%3A%2F%2Fimaging.jugem.jp%2Ftemplate%2Fimg%2Fjugem_og-image.png)
トップ -ウェブアクセシビリティチェックサイトHAREL
2009年04月01日HARELが新しくなりましたHARELが、新機能の追加でますます便利になりましたので、ぜひお試しください。 お手持ちのHTMLファイルをHTMLアップロードページからアップロードすることで、HTMLファイルをチェックできるようになりました。HTMLテキストをHTMLテキスト入力ページから入力することで、HTMLテキストを直接チェックできるようになりました。結果をまとめて表示する機能が追加されました。また、より多くのチェック観点でチェックできるようになりました。 今後ともHARELをご愛顧賜りますよう心よりお願い申し上げます。 とても危険な画面の点滅【解説】ユーザの注意を引くことを目的に、ロゴやバナーを点滅させているウェブページがあります。 画面の点滅は光源性てんかんを誘発する場合があり、大変危険です。特に、弱視のユーザで、画面を拡大している方の場合、点滅の範囲が広く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HugeDomains.com
COOSY 株式会社クーシー｜Webデザイン/Web制作会社｜クリエイティブエージェンシー
