ここではフォームの作り方を説明します。フォームはホームページを作るときはあまり使用しませんが、cgi(掲示板やチャット)を作るときによく使われます。どうやって作るか、覚えておけば後で役に立つかもしれません。
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説:(有)ムーニーワークス 林 豊/田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
みなさん、こんにちは お元気ですか?僕は元気です。 さて 最近よく、「いいね!」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP (Open Graph Protocol)と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー??とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
ボックスの境界線の幅を指定する方法もいくつかあります。まずは、境界線の幅をまとめて指定する方法です。 /* 上下左右すべての境界線の幅を1pxに設定 */ border-width: 1px; /* 上下の境界線の幅を1px、左右の境界線の幅を2pxに設定 */ border-width: 1px 2px; /* 上の境界線の幅を1px、左右の境界線の幅を2px、下の境界線の幅を3pxに↵ 設定 */ border-width: 1px 2px 3px; /* 上の境界線、右の境界線、下の境界線、左の境界線を個別に設定 */ border-width: 1px 2px 3px 4px; 次に、上下左右の境界線の幅を個別に設定する方法です。 /* 上の境界線を設定する */ border-top-width: 1px; /* 右の境界線として細い線を設定する */ border-right
ホダ塾ディストリビューションに同梱されているWizmobileを使って、携帯電話対応ホームページを作成した記録です。 キャリヤによる振り分けを使って文字サイズを指定する方法を試してみた。 さすがに文字サイズを指定する箇所すべてで、キャリアによる振り分けをするのも大変なので、phpにより変数にアサインしてみた。 【アサイン変数】 ※アサインしている値は任意である サンプルソース <?php if( ! defined( 'XOOPS_ROOT_PATH' ) ) exit ; if (@$this->_tpl_vars['wizmobile_carrier'] == 'docomo') { $this->assign('fsxxsmall','xx-small'); $this->assign('fsxsmall','x-small'); $this->assign('fssmall','m
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか?』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
Tips 1. XHTMLで作成する。 画面の「新着ニュース」や「お知らせ」にあるように、ブロックレベル要素に背景をつけるためには、ドコモではXHTMLで書かなければなりません。TABLEタグを使用することもできますが、その場合だと対応する端末の敷居を高くする結果となるので、XHTMLで全体をコーディングする必要があります。 XHTMLでHTMLを書くにはPC向けとは異なり、少々テクニックが必要です。これについては、前回の記事で詳しく書きましたので、そちらをご覧ください。 参照) iモードHTMLとiモードXHTMLを正しく切り替える方法 Tips 2. キャリアごとの仕様の差は外部CSSで。 モバゲーのように文字を1段階小さくして全体のテキストを表示する場合など、キャリアごとに若干差が出てきてしまう場合もあります。この場合、特に(ドコモ)と(au・ソフトバンク)に差がでることが多いので、
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ~ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述
新しく追加されたタグや属性は、PCサイト向けのHTMLでもよく見かけるタグや属性がほとんど。 あとは、どのタグでもstyle属性が使用できるようになった(これまではpとかspanとか、一部のタグでのみ、style属性が使用可能だった)。 CHTMLとiモードXHTMLの関係に変化あり iモードブラウザ2.0から変化したことがもう一つあった。それは、マークアップ言語の垣根がなくなったということ。 これまでのdocomoは、マークアップ言語が「CHTML」と「iモードXHTML」の2種類あって、使用可能なタグ・属性やContent-Typeヘッダが明確に区別されていた。たとえば、次のような感じだ。 CHTMLではfontタグが使えるが、XHTMLではfontタグが使えない。 XHTMLではstyle属性が使えるが、CHTMLではstyle属性が使えない。 CHTMLのConten
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く