CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
やる夫が企業サイトのSEOに挑戦するようです αSEO
1 ：以下、名無しにかわりましてαSEOがお送りします：2010/04/01(木) 00:00:00.01 ＿＿＿ ／ ＼ ／⌒ ⌒ ＼ 今日から新しい会社に出社だお ／ （●） （ ●） ＼ これで3年間の無職生活からはおさらばだお！ | （__人__） | ＼_ ｀ ⌒´ __／ やる夫を雇ってくれたのは水産物を売っている会社 /´:::／ﾍ;;;/∨::＼::::::::｀ヽ ここでやる夫はWebマスターとして働くんだお！ i:::,::>:::i/;;;;i /:::::::く:::::::,::::::ﾍ ｛:::i::ヽ::i;;;;;;;/:::::／::::::::i:::::::::｝ 2 ：以下、名無しにかわりましてαSEOがお送りします：2010/04/01(木) 00:00:00.02 ＿＿＿＿＿ ／.::::::
タイポグラフィック・グリッド作成アプリケーション - lab
http://lab.allianceport.jp/web-typography-app/web_typography/ 私が印刷とウェブのデザインの比較について興味を持ち始めたのは、まだ私が学生だった頃なので、もう 10年近くも前になります。当時、Josef Muler Blockmannの『Grid System』をもとに、ウェブデザインへのグリッドシステムの応用を考えていました。その頃から「メディアによる再現性の違いを理解し、一つの理論をそれぞれに展開する」という考えをベースに、実用的なツールをつくりたいと思っていました。 グラフィックデザインには、グリッド・システムというデザイン手法が存在します。グリッドシステムとは、書籍デザインにおいて、全ページを同じグリッド上で展開することで、ページ全体に統一性を持たせ、レイアウト上の判断を効率的に行うツールとして、全世界のデザイナーに使われ
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
CSSを最適化する3つのツール | エンタープライズ | マイコミジャーナル
Make Tech Easier - Uncomplicating the complicated, making life easier WebサイトやWebページ、WebアプリケーションにとってCSSはデザインを実現する中核技術となっている。このCSSを最適化する3つのツールが3 Useful Tools To Optimize your Blog’s CSS - Make Tech Easierにおいて紹介されている。紹介記事そのものはブログで利用されるCSSを取り出して最適化するストーリーになっているが、汎用的なテクニックとして利用できる。紹介されているテクニックとツールは次のとおり。 CSSファイル編集テクニック CSSはHTML内部に記述するのではなく外部ファイルにまとめる 属性に繰り返し同じ設定を記載するのではなく、クラスとして定義して利用するようにする。たとえば複数のクラス
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
Google App Engineを使って無料でサイトを立ち上げる方法 - EC studio 技術ブログ
Googleが提供する、Google App Engineというサービスを知っていますか？ Amazon EC2などと同じで、Googleが用意するクラウドサーバー環境で アプリケーション開発ができるというサービスです。 (レンタルサーバーのようなもの) その大きな特徴は、なんといっても月間500万PV相当まで"無料"ということです。 ※有料で制限を拡張することも可能 ※2011/09/07 注 Google App Engineの新料金体系が発表されました。 新料金体系では無料で使える枠が大幅に削減されています。 この記事の無料での使用制限に関する記述は、新料金体系では 正しくありませんのでご注意ください。 「App Engine は無料で始めることができます。最大 500 MB の永続性ストレージに加え、月間約 500 万ページ ビューに対応できる十分な CPU と帯域幅を、すべてのア
cssの情報・まとめ
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of
HTMLからCSSのベースを作ってくれるサービス – creamu
テーブルなどをHTMLで組んだ後に、CSSコーディングを簡略化したい。 そんなときにおすすめなのが、『Primer』。HTMLからCSSのベースを作ってくれるサービスです。 HTMLをペーストして、「PRIME IT」ボタンを押すと、idやclass名からCSSのベースを作ってくれます。 プログラマが作った素のHTMLにスタイルを当てていくときなどに使えるかもですね。 インターフェースがシンプルで、アイコンがかわいかったりするので一度見てみてください。 Primer あけましておめでとうございます。今年もよろしくお願いいたします。 今年は初の東京での年明け。浅草に初詣に行ったりおせちを食べたりで楽しい感じです。 勢いでwiiとニュー・スーパーマリオブラザーズを買いました。めちゃおもろいです。
Webのバグを燃やしまくるFirebugと、そのアドオン7選
Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（1/3 ページ） 高度化するWebのデバッグに悩む人、必見！ 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 本稿では、Firefoxのアドオンとして利用するFirebugと、
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
PHPを使って3分で作る3キャリア対応ケータイサイト | ke-tai.org
PHPを使って3分で作る3キャリア対応ケータイサイト Tweet 2009/11/17 火曜日 matsui Posted in ソフト紹介, 全キャリア対応 | 28 Comments » 本日は3分で3キャリア対応ケータイサイト作れてしまうというPHPスクリプト、「らくらくケータイ3キャリアコンバーター（仮名）」を作成してみましたので、そのご紹介をさせていただきます。 先日のPHP勉強会で発表させていただきました。 ご参加いただいた皆様、本当にありがとうございました。 発表資料をアップしてありますので、まずはこちらをご覧ください。 PHPを使って3分で作る3キャリア対応ケータイサイト View more documents from ketaiorg. ということで、「3分で作る」とは謳っているものの、ドコモ用に作られたHTMLを他キャリア用にコンバートするだけの、実に簡素な作りです。
初心者が効率良くSEOテクニックを身につける方法 | パシのSEOブログ
SEOテクニックをマスターする事は簡単ではありませんが、それなりの知識をつけそれなりの成果を出す事は難しくありません。 SEOをこれから始める方や、サイト管理の命を受けてSEOに取り組まざるを得なくなった方のために、効率よくSEOスキルを身につけていくための方法をご紹介します。 準備１：本を買う、SEOブログを見る SEOの基礎知識を身につけるためにまずは専門書を購入しましょう。SEOに関する書籍は沢山ありますが、おススメは下記の2冊です。SEOを行う上でCSSの知識は必ず必要となりますので、CSS本も併せて購入しておいた方が良いでしょう。 『検索にガンガンヒットさせるSEOの教科書：（翔泳社 ）』 『現場のプロから学ぶXHTML+CSS：（毎日コミュニケーションズ）』 購入したらとにかく読みます。始めは読み進めても分からない事だらけだと思いますが、とにかく一回読みきります。読み終えたら次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「MapFan」の地図リンクURLがパソコン・携帯で共通に
IDEA * IDEA
http://browsersize.googlelabs.com/