ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 | HTML5でサイトをつくろう
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 xhtmlとHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素（タグ）の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。 【前回のまでエントリー】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編 ：HTML5のマークアップ】 HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！【初級編 ：HTML5のマークアップ】 HTML5では要素やCSSの設定の仕方でいろいろな考えがありますので今回のソース
HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！ | HTML5でサイトをつくろう
前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。 【前回のエントリー】 HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編 第2回：HTML5のマークアップ】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 今回はそのサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML 5 Outliner』を利用してxhtmlとHTML５の違いを比較しながら理解を深めていきたいと思います。 アウトラインとは まずはアウトラインに
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 | HTML5でサイトをつくろう
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5＝難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
キャッシュコントロールってご存じですか？ 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
携帯電話のコンテンツブラウザには、ある程度のキャッシュを保持できる領域を持っています。例えば、携帯でホームページを閲覧しているとき、前の画面に戻る際にページに用意されている「戻る」を押すよりも、携帯のバックボタン（←やクリアボタン）を押した方が余計な通信を行わずに、パケット代を節約できると言われています。 これはブラウザのキャッシュを利用しているのですが、簡単に言えば、キャッシュ保存は携帯に限って言えば、パケット代を節約するために一度見たページの内容を端末に保存しておく便利機能です。画面保存とは少し違います。 現在の常時接続の時代では、キャッシュの保存機能をとやかく言う人はいないのですが、電話回線で接続している時代や、現在の携帯電話など通信料によって課金される従量課金では、一度見たページをキャッシュから再表示する機能はとてもありがたい機能です。 このような利用者の観点からすると、このキャッ
IT news, careers, business technology, reviews
Heads on: Apple’s Vision Pro delivers a glimpse of the future
PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」:phpspot開発日誌
Free, Fast and Easy CSS webpages! | psd 2 CSS Online psd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」 PSDファイルをアップロードすると、内容を読み取った上で、レイヤーごとにブロックが分けられた状態のXHTML＋CSSを取得できます。 簡単なPSDファイルを送ってみたところ、完全ではないですが、再現することが出来ました。 PhotoShopにも同じような機能はありますが、必要な画像のみトリミングしてくれ
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
ウノウラボ Unoh Labs: 携帯サイト作成時のXHTMLでの相違点
こんばんは。harukです。 DoCoMo編…となるはずですが、特に書くようなことがないので、今回はXHTMLについて少し書いてみます。 現在ではすべてのキャリアが3G端末がメインとなってきています。 ※2006年11月末現在 DoCoMo: 約60% au: 約90% SoftBank: 約35% ほとんどの3Gの端末ではHTMLに加え、XHTMLを使うことができます。 XHTMLを使うことによって、文字の背景色を設定できたりするなど、デザイン表現が多彩になっています。 今回はXHTMLを使用する上での、各キャリアの仕様の違いなどをまとめてみたいと思います。 対応機種 DoCoMo FOMA(初期の2001,2002,2101以外) au WAP2.0ブラウザ搭載端末 SoftBank W型、3GC型 DOCTYPE宣言(推奨) DoCoMo <!DOCTYPE html PUB
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
HTMLとXHTMLの違いはどこにある？
ある程度、記述の内容に自由度のあったHTMLに比べると、XHTMLは、XMLの持つ特徴をそのまま引き継ぎ（XML文書ですから当然ですが）、書式が厳密になっています。また、拡張のたびに複雑になる傾向のあったHTMLと異なり、XHTMLではモジュール化による拡張性も視野に入れた仕様になっています（モジュール化をベースとしたXHTML 1.1は現在勧告案の段階ですが、携帯電話やカーナビなどの表示能力が乏しいデバイス用であるXHTML Basicから、将来の拡張性までを考慮した仕様になります）。 XHTMLに関連する W3C勧告は以下のとおりです。 XHTML(TM) 1.0: The Extensible HyperText Markup Language - A Reformulation of HTML 4 in XML 1.0 XHTML(TM) Basic Modularization
HTMLとXHTMLの違い
HTMLとXHTML 1.0の違い HTMLもXHTMLも，Webページを作るための言語です。XHTML（Extensible HyperText Markup Language）は，従来のHTML（HyperText Markup Language）と，構造化された情報を表すための新しい言語XML（Extensible Markup Language）の特徴を合わせ持つものです。 HTMLは，かなりいいかげんというか，書き方に自由度がありました。たとえば，HTML 4.01では <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <title>私のホームページ</title> </head> <body> <p>工事中 </body> </html> のように書きました。この段階ですでに <
第４回 HTMLからXHTMLへの移行方法（1）：ITpro
HTMLからXHTMLにスムーズに移行するには、「書式の違い」をきちんと押さえておくことが不可欠。今回は「XML宣言」「文書型宣言」「XML名前空間と言語コード」「MIMEタイプ」「style要素とscript要素」について見ていこう。 HTMLよりも書式が厳格なXHTML XHTMLはHTMLをXMLで再定義したマークアップ言語であり、HTMLの簡便さを残しつつXMLの論理的厳密性を備えている。そのため、HTMLのようにルーズなコーディング（たとえば終了タグがないなど）でもブラウザで問題なく表示される、ということはほとんどない。したがって、書き方にエラーがないかどうか少し神経質にならなければならない。 また、CSSがきちんと適用されないというトラブルも、実はXHTMLが正しく書かれていないことに起因していることが少なくない。 これらの問題を避けるべく、エラーのないソースにするには、バリデ
いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けない“Web標準”、そしてXHTML＋CSS：いまさら聞けないリッチクライアント技術（4）（1/3 ページ） 前回の「いまさら聞けない、“Ajax”とは何なのか？」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML／XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか？ HTML／XHTMLとCSSとどのような関係があるのか？ さらに、HTML／XHTMLやCSSって何？ といった点について見てみましょう。 「Web標準？ Webを標準化することかな？」 AjaxやXML、Jav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The W3C Markup Validation Service
Mantisa Templates - Free wordpress themes, templates, tutorials, seo and guides.
ValidなCSS/XHTMLテンプレート集:phpspot開発日誌