タグ XHTML
人気順 5 users 10 users 50 users 500 users 1000 usersh1要素は複数回使って良いのか!? HTML5.1に関するW3GとWHATWGの主張の違い - Togetterまとめ
h1要素が同じHTML内に複数もあるのはどうなの的な宗派(XHTMLの流れをくむセマンティックス派)でいたわけですが、HTML5.1が明確に否定してくれました。信じるモノは救われる的なものですかね 続きを読む
[JS]a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 jQuery A+ jQuery A+ -GitHub jQue... 続きを読む
新人コーダーに知っておいて欲しいリダイレクトの基本 : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの... 続きを読む
WordPressのテーマファイルをHTML5にするチュートリアル | コリス
このサイトはまだHTML5にしてないので、WordPressのテーマファイルをXHTMLからHTML5にするステップごとに解説されたチュートリアルを紹介します。 Convert Your WordPress Theme to HTML5 下記は各ポイントを意訳したものです。 チュートリアルのゴール HTML5のベーシックなレイアウト Step 1: header.phpをHTML5化 Step 2... 続きを読む
画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」 : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~
■完成イメージ ブラウザ標準のフォームUI(チェックボックスやセレクトボックス)のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUI... 続きを読む
簡単なサンプルで学ぶ!ゼロからはじめるレスポンシブWebサイト初級編 ~メディアクエリを使ってCSSを分岐させる~ | HTML5でサイトをつくろう
スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。 そこで今回はレスポンシブWebデザインを使用したサイトの制作や仕組みを理解しておくためにCSS3のメディアクエリを使用してレスポンシブWebデザインのデモソースとチュートリアルをつくりました。 今回はXHTMLでコーディングしたソースで、CSS3のメディアクエリを使って、PC、タブレット、... 続きを読む
XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう【MdN連載第11回目】 | HTML5でサイトをつくろう
前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行いました。 HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】 今回はxhtmlとHTML5のコードのアウトラインを確認しながら、各要素のアウトラインについてみてみたいと思います。 アウトラインにつきましてはこちらの記事で説明してあります。 HTML5の「... 続きを読む
HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】 | HTML5でサイトをつくろう
前回のエントリーで簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしました。 XHTML1.0とHTML5のコーディングの違いを確認してみよう【MdN連載第9回目】 今回はxhtmlとHTML5のコードの違いを見ながら、HTML5で新しく追加されたタグをどのように使ったかを見てみたいと思います。 HTML5のマークアップについてはどの要素を使うか迷う箇所も原稿によってはあると思いま... 続きを読む
いままでまとめたHTML5の勉強をしたさいに作成したまとめ ~HTML5の新要素の説明からマークアップの基本まで~ | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
今回は僕がHTML5を勉強するにあたりもう一つのブログ「HTML5でサイトをつくろう」でまとめたページをまとめました。初めて作るならここからやるといいかなとおもったHTML5の新要素、コンテンツモデルやアウトラインについて、xhtmlとHTML5で同じフォーマットをマークアップして違いを比べたりしました。 現在WEB制作で仕事をしながら勉強している人やゼロからやってみようと思う人に仕様書を全部読む... 続きを読む
Tumblrにfacebookのlikeボタンやらtwitterボタンやらはてブボタンをつける方法 | IDEA*IDEA
ドットインストールの公式ブログ(Wordcampで発表したのにTumblr・・・)にいろいろボタンをつけたのでそのやり方をシェアしておきます。 ↑ こんな感じね。 ざざっと。 ■ facebookのlikeボタン 一番面倒ですな。まずはHTML宣言をこちらに差し替えます。 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://ww... 続きを読む
HTML5 は SEO に有効なの? | WWW WATCH
「HTML5 でコーディングしたら SEO (検索エンジン最適化) 的に有利になりますか?」 っていう質問、たまに聞かれるんですけどね。 個人的には "SEO のために" HTML5 にするか XHTML にするかなんて悩んでる暇があったら利用者に役に立つコンテンツの 1つでも考えた方がいいよと思うわけですし、聞かれたときはそのように答えているわけですが、折角なので簡単に考えをまとめて Blog ... 続きを読む
HTML5: img 要素の alt 属性 の仕様 | attosoft.info Blog
概要 alt 属性に指定する代替テキスト 空文字列の代替テキスト alt 属性の省略 関連リンク 概要 HTML5 では img 要素の alt 属性の仕様が大幅に変更され、HTML4/XHTML と比較すると定義がかなり詳細化されている。 HTML5 における alt 属性 の仕様を概略すると次のようになる。 alt 属性には画像を置換可能な詳細な代替テキストを指定する HTML4/XHTML ... 続きを読む
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 | HTML5でサイトをつくろう
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 Category : HTML5でサイトをつくろう | 2011年09月14日 xhtmlとHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素(タグ)の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。 【前回... 続きを読む
HTML5のアウトラインって何?xhtmlとHTML5のコードを比較してアウトラインを理解しよう! | HTML5でサイトをつくろう
前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。 【前回のエントリー】 HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編 第2回:HTML5のマークアップ】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5... 続きを読む
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス... 続きを読む
たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~
.sampleBox { overflow: hidden ; } .boxLeft { float: left; width: 150px; } .boxRight { float: right; width: 150px; } サンプルページ ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる... 続きを読む
電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し - Publickey
XHTMLやCSSといった国際標準をベースとし、グーグルのGoogle BooksやアップルのiPadなどが電子書籍のフォーマットとして採用したことで急速に注目度が高まっている「EPUB」。 EPUBはこれまで、縦書きやルビといった日本語で電子書籍を作るには機能が不足しているとされてきましたが、EPUBの国際化を進めるサブグループ「Enhanced Global Language Support」... 続きを読む
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない!」という項目は以下の6つ ・xhtml?html? ・文字コードは? ・tableは使ってOK? ・絵文字... 続きを読む
フォントサイズを変える「大・中・小」ボタンを実装する方法 | THE HAM MEDIA
札幌でホームページ制作をする社会人ハムの勉強ブログ。 JavaScriptやjQuery、XHTMLやCSS、その他思ったことなどについてなどを気ままに書きます。jQueryのpluginなども公開中。 jQuery plugin 自作plugin JavaScript (X)HTML CSS SEO 日記 プロフ Webコン 知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変... 続きを読む
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー(もしくはディレクター?)さんは、デザインをパッと見て「このデザインで組めます!」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これか... 続きを読む
HTML5 を学ぶための情報源まとめ | WWW WATCH
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、... 続きを読む
ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org
ケータイ3キャリアに対応するためのDOCTYPE宣言について 2009/10/14 水曜日 matsui Posted in 全キャリア対応, 記事紹介・リンク | No Comments » XHTMLを使ってケータイサイトを作成する際には、HTMLの冒頭にDOCTYPE宣言を記述する必要があります。 先日からこの「DOCTYPE宣言」に関するブログエントリーが人気を集めているようなので、当サイ... 続きを読む
携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法 - ma-san.org - 仙台でWeb制作をするWebデザイナー
携帯サイトを構築するとき、キャリア毎の分岐などがHTMLだと非常に面倒くさいので僕の場合はPHPで構築します(というかPCサイトでもPHPで構築してますが、それはまた、別の、話)。 各キャリアで使用できるタグや、セレクタにも差があり、特にDocomoなんかは拡張子をxhtmlにするとCSSが上手く適用される(解釈の違いはあると思いますが...)とか、CHTMLの独自の仕様があったりとコーダー泣かせ... 続きを読む
ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです... 続きを読む
補完機能が強力で無駄なキーボードタイプを少なくしてくれるXHTML/CSSエディタ『SEEdit Maxi II』 | Macの手書き説明書
CSS、XHTML、JavaScript、RSS、PHPなどWebサイト作りにまつわるほとんどすべてのテキスト編集ができます。 補完機能が並外れて強力かつ使いやすいのが特徴です。 htmlのタグ補完を例にあげると<hと書き始めるだけで該当するタグの候補を表示してくれ、選択してTabでそのタグを挿入、その後>で閉じタグも挿入してくれます。 ショートカットOption+.で手動で閉じタグ挿入も可能です... 続きを読む