IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (1) 本特集の趣旨 | エンタープライズ | マイコミジャーナル
本特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため
HTMLをWPテーマ化する時の手順リスト
WordPressWPテーマ化手順 一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リストSTEP.1HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクル
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
画像とテキスト（文字情報）が一対になっているリンク | Accessible & Usable
公開日 : 2009年10月4日 (2015年3月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Webページに実装されているリンクの中には、画像とテキスト（このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます）のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。 テキストリンクにアイキャッチャーとなるアイコンが付随している例（成田空港の公式サイトのフッターより） 商品カテゴリーへのリンクにイメージ写真が付いている例（スターバックス コーヒーの「ビバレッジ」のページより） 具体的な商品（品番）へのリンクに写真
.htaccess ファイルを簡単作成「.htaccess Editor」
リダイレクト Fromにサイトパスを入力、ToにURLを入力 301 Moved Permanently 恒久的に移動 From: To: From: To: From: To: 302 Moved Temporarily 一時的に移動 From: To: From: To: From: To:
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
CSSだけでキーボードのキーを表現する方法
タイトルがわかりにくいかな。まあいいや。 「方法」などとエラそうに言うほどのものじゃないんだけど やってみたら何かそれっぽく見える気がしてきたので一応書いときます。 要するに何がやりたいのか ブログなんかの文中で 「このキーを押すんだよ」ということを伝えようとして そのキーに刻印された文字を示すことがある。 でもそのままではキーっぽく見えないので、 それ用のスタイルを用意して 何となくキーに見えるようにしたい。 つまりこのようなことが言いたいときに Shift + ⌘ + 3 で画面をキャプチャーします。 このように表示したいということ。 Shift + ⌘ + 3 で画面をキャプチャーします。 CSS 非対応のフィードリーダーで読んでたらわからんと思うのでサイトに来てください。 あと IE6 だと ⌘ ←が出ませんねごめんなさい。”Command” と読み替えてください。 どのタグを使う
サイトのレイアウトがサクサク作れるAIRアプリ「Boks」:phpspot開発日誌
Boks - A Visual Grid Editor サイトのレイアウトがサクサク作れるAIRアプリ「Boks」。 Boksを使えば、グリッド内をドラッグ＆ドロップして直感的にレイアウトを作っていけます 作ったレイアウトは「Export」で簡単にHTML+CSSに出来ます。 HTMLとCSS複数が吐き出されます 基本設定として、グリッドの設定なんかも調整できて、自由度はあります サイトのレイアウトがめんどくさいという方はこういうものでサクっと済ませちゃうというのもありですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サ
SSIで効率管理
ウェブサイト内には、ヘッダ・サイドバー・フッタなど全ページ共通のパーツがあることが多いでしょう。そのような共通部分を全てのページに記述するのは非効率的です。なぜなら、共通部分を更新したい場合には、全てのページを同時に更新しなければならないからです。ページ数が多ければ多いほど作業量も増え、更新漏れが発生しやすくなってしまうでしょう。 ■共通部分だけを独立したファイルに分けておいて、動的に合成できると便利 そのようなサイト内の共通部分は独立したファイルに分離しておき、ウェブサーバ側で動的に合成できれば、共通部分の管理や更新作業が楽になります。共通部分を更新したい場合には、その独立した1ファイルを修正するだけで全ページの表示が更新されるからです。 例えば、サイト内の全ページに共通する部分を下記のような3つのファイルに分離しておきます。これらの3ファイルを、上図のように各ページのHTMLに合成しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
microformats.biz » Blog Archive » Yahoo Open Search
http://www.designwalker.com/2009/01/table.html
HTML5.JP - 次世代HTML標準 HTML5情報サイト