flexがあるからfloatやclearfixはいらない？ んなわきゃ無い - Webデザインの日々日記
floatやclearプロパティ周りの話題が出るたびに、「flex使えばオッケーじゃん」というような声が散見されるので、「それは違う！」と強く訴えたい、というお話です。 そもそもflexはfloatの代替品ではない floatプロパティは、それを設定した要素を文字通り"浮かし"て、後続の要素を回り込ませる役割を持っています。 一方のflexの役割は"並べる"のであって、floatのように後続要素を回り込ませる機能は持ちません。 floatを使って要素を並べるのは、本来の用途から少し外れています。そのためclearfixという多少の無理をしていました。その無理のしわ寄せは、clearfixを適用した要素には、after疑似要素を利用できないところに現れます。 なお、要素を並べるには、floatの他に、 display: inline-block; display: table;とtable-
Jeff Croft「web標準が成功しhtml名人は用済みになった」 - 以下斜め読んだ内容
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
Microdata + schema.org を実際に使ってみる
schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabulary) を提供しようというものです。この schema.org の語彙を利用して、実際のマークアップに Microdata を追加する具体例をいくつか考えてみました。 schema.org の アイテム型 (item type) は 階層 (hierarchy) のかたちで定義されています。型ごとに独自の プロパティ が定義され、上位の型のプロパティは下位の型に引き継がれます。最上位は Thing という汎用の型で、name、url、image、description というもっとも基本的なプロパティが定義されています。そしてその下に CreativeWork、Event、
Googleの検索結果ページでパンくずリストを表示するmicrodataの使い方 | 初代編集長ブログ―安田英久
どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか？ 確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね（特にWeb担のような無機質なURLの場合は）。 最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです（「リッチスニペット」と呼ばれるもの）。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。 そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。 ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。 <a
itemscope 属性値(マイクロデータを含んだ範囲) - HTML リファレンス
HTML5 ISO-HTML HTML4/XHTML1 詳細 HTML5 での定義。 平成30年 1月17日現在の定義です。 属性の定義 マイクロデータを含んだ範囲。 定義している要素 全要素(グローバル属性) DOM インタフェイスでの扱い 定義なし。 ISO-HTML (JIS-HTML, ISO/IEC 15445:2000)での定義。 ISO-HTML には itemscope 属性値の定義はありません。 HTML4/XHTML1 での定義。 HTML4/XHTML1 には itemscope 属性値の定義はありません。 itemscope 属性値とは。 itemscope 属性値は、ある人物や物事に関するデータを含めた範囲を示す属性です。 基本的には、ある人物, 作品, 或いは商品などと言ったアイテムについてのメタデータは、この属性を与えられた要素内に収まっているものと考えられま
head要素以下でのitemprop属性 - Weblog - Hail2u.net
Microdataではitemprop属性を使ってプロパティーを追加する。HTML標準仕様の変更によってbody要素以下でもlinkやmeta要素を使えるようになったので、どうでも良いマークアップを追加してCSSで隠して誤魔化すとかしなくても大体なんとかなるようになった。しかしその一方でlinkとmeta要素はitemprop属性と同時にrel属性やname属性を使うことはできない。そのため例えば<meta name="description">タグにitemprop="description"を追加してWebPageスキーマのプロパティーとして追加するなどということは無理。 <html lang="ja-JP" itemscope itemtype="http://schema.org/WebPage"> <head> <meta content="This is a foo." nam
meta 要素に対する Microdata の指定
meta 要素に対する Microdata の指定について、過去に書いた記事に間違いがあったので修正とその解説。また、itemprop 属性もつ meta 要素や link 要素の body 要素内での使い方に関しても解説してみます。 もうちょっと早く書こうと思ったんですけどこんなに間が空くとは…… 去年の末、HTML5 Advent Calendar 2012 の記事として、「Microdata を使ってみよう。サンプルソースで学ぶ Microdata」 を書いたんですが、その中で 2箇所ほどサンプルソースに間違いがあるのをご指摘頂いて修正したんですね （ご指摘感謝です）。 そのうち、1つの間違いは単純な記述抜けというか、ミスだったんで置いといて、もう1つ、私が meta 要素に対して itemprop 属性を指定したサンプルで、同じ要素に name 属性をあわせて指定してたのをご指摘頂
schema.org 日本語訳 - 始めましょう！
ウェブサイトを作っているほとんどの人がHTMLタグについてご存じでしょう。一般的に、HTMLタグはブラウザーに対してタグ内の情報をどのように提示するかを指示します。例えば、<h1>Avatar<h1>とすれば、ブラウザーは文字列Avatarを大見出しとして表示します。しかし、HTMLタグはこの文字列が何を意味するかについての情報は与えられません。Avatarは大ヒットした映画のことかもしれませんし、インターネット上のプロフィール画像のことを指すかもしれません。このために、検索エンジンが関連した内容を見つけるのが難しくなってしまうのです。 Schema.orgは、ウェブサイトを、Google、Microsoft、Yahoo!などの巨大な検索エンジンでヒットさせるために使える用語集を提供するものです。 Schema.orgの用語集とmicrodata formatを使用すれば、HTMLに情報を
ちょっとしたメモ - HTML5＋Microdataへの全面移行
この春頃からMicrodataを試してみたりHTML5にかかわる機会が増えてきたので、いずれ実施しようと考えていたサイト全ページの書き換えを敢行しました。スタイルシートはごく一部を除いてほとんど従来のまま。ページ自身のメタデータほかの構造化データは、Schema.org語彙を中心にして表現しています。 Microdataの記述 今回使ったMicrodataの一部を紹介しておきます。Microdataは、文書内に記述されたものごとの特徴を表す名前-値の対（プロパティ）のグループをアイテムと呼び、基本単位として扱います。 アイテムと型 Microdataの場合、まず最初にアイテムの範囲（スコープ）をitemscope属性で示します。文書のメタデータを表現したいので、html要素にこの属性を加えて全体を一つのアイテムとします（itemscopeは真偽値属性で属性名のみを記述しますが、XHTML構
HTML5 microdataを使ってWordPressでパンくずリストをGoogleに表示 | HALAWATA.NET
HTML5はmicrodataを使って要素にメタデータを付加することができます。 今回はそのmicrodataを使ってWordPressのサイトでパンくずリストをGoogleに表示させる方法を、いろいろなサイトを参考にしながら紹介したいと思います。 microdataの基本 本題に入る前に簡単にmicrodataについて簡単に触れておきたいと思います。 microdataを使うことで、通常の要素に属性をつける形でメタデータを付加することができます。 まず、メタデータを定義している要素を囲んでいる要素にitemscope属性を指定します。この囲んでいるdiv要素の開始タグから終了タグまでをアイテム（item）と呼びます。 もし名前空間がある場合は、itemtype属性でURLを指定します。名前空間（NameSpace）は、ここでは属性の意味を定義するためのものです。サンプルでは適当なURLを
ブログのHTMLをmicrodata（schema.org）を使って構造化する | HALAWATA.NET
今回はブログの記事部分のHTMLをschema.orgのスキーマ（語彙）を使って構造化する方法を紹介します。 schema.orgとはGoogle、Microsoft、Yahoo!の3社が共同で開発している構造化データマークアップのためのスキーマのことで、セマンティックウェブを実現するためのものです。（schema.org以外にも様々なスキーマがあります）セマンティックウェブを実現することによって、検索エンジンなどのコンピュータがHTMLの構造を正しく理解することができるようになり、効率よく情報を収集し、ユーザーに提供できるようになります。 例えばパンくずリストを構造化のスキーマを使ってマークアップすることで、検索結果にパンくずリストを表示させることができるようになります。このブログでもHTML5 microdataを使ってWordPressでパンくずリストをGoogleに表示する方法を書
「構造化データ マークアップ支援ツール」をGoogleが公開、HTMLベースでのタグ付けが可能に
[対象: 上級] Googleは、構造化データのタグ付けを支援するために2つの機能を追加しました。 データハイライターがサポートする構造化データの追加 構造化データ マークアップ支援ツールの追加 データハイライターがサポートする構造化データの追加 データハイライターが新たに、7つのタイプのデータのタグ付けに対応しました。 これまでの「イベント」と合わせて8種類をサポートします。 記事 イベント 地域のお店やサービス レストラン 商品 ソフトウェア アプリケーション 映画 テレビ番組のエピソード こちらについては、公式アナウンスが出る前にすでにブログで取り上げています。 データハイライターが、商品やレストラン、記事などイベント以外のタグ付けをサポート開始 構造化データ マークアップ支援ツールの追加 データハイライターによるタグ付けは、ウェブサイトの構造化データのパターンをGoogleに伝えま
FacebookのOGPに fb:admins と fb:app_id の設定は必要？htmlタグのxmlnsは？ | Cappee Design
OGPとは Open Graph protocolの略で、facebook、mixiなどのソーシャルにシェアした場合にOGPを設定しておけば意図した内容を表示させる事ができる、というものです。 詳しくは下記をご覧ください。 OGPで指定する fb:admins と fb:app_id ですが、受託なんかの場合は予め管理者にするFacebookユーザーを確認する必要があるため少々面倒だったりもします。 fb:admins と fb:app_id は記述しないと表示されないのかしら？と思って、記述なしにしてOGPを確認できるFacebookのデバッガーでみてみたところ、下記のような警告が表示されました。 Admins And App ID Missing:fb:admins and fb:app_id tags are missing. These tags are necessary fo
inline-blockとinline-table - HTMLリファレンス
CSSのdisplayに、inline-blockとinline-tableというものがあります。 両方とも、指定するとブロック要素になりますが、 通常のブロック要素の場合、前後の文章などは上下になりますが、 通常のインライン要素のように前後の文章などのインライン要素が横に並びます。 inline-block 前の文章 <span style="display:inline-block;width:250px;border:1px solid black">ブロック要素</span>; 後ろの文章 ↓実際の表示↓ 前の文章ブロック要素後ろの文章 ↑実際の表示↑ 通常のブロック要素では、前後の文章は上下に表示され、横に並べられません。 通常のインライン要素では、widthが無効で、横幅の確保ができません。 両方を解決したい時に使います。 例では<span>タグをインラインブロック化しています
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
レスポンシブ≠リキッドフレームな件について - akuyan to
お仕事でもインターネッツでも頻出するようになった「レスポンシブ」ウェブ。 それにあたりまして、若干お仕事な上で「レスポンシブ」がイコール「リキッド（可変）フレーム」だと思ってる方がいて、制作を進めるうえで話が噛み合わなくて「ん？」ってなったりするので、説明の手間をはぶくためにココにメモがてら書きます。 レスポンシブってなんじゃ まず「レスポンシブ」とは1つのHTMLで、端末や解像度によってCSSで見た目を切り替える手法を指します。HTMLは1つで、対応したい解像度に対して対応してるCSSが1つ以上ある形。 「あなたがレスポンシブさんですよね？」って勘違いされるヤーツ で。よく「これレスポンシブだね！」って勘違いされやすいヤーツなのが、画面解像度によって横幅がうにうに伸び縮みしたり、ボックスが下に自動的にまわりこむヤーツですね。Pinterest的なのとかがわかりやすく一般的でしょうか。 し
viewportの設定に注意
この記事は1年以上前の記事のため、内容が古い可能性があります。 この記事は2012年に作成されたものです。内容が古くなっている可能性があります。 【2013/06/17追記】こちらの記事もあわせてどうぞ。 target-densitydpi=device-dpi に注意【viewport】 スマホサイトを作る際は、viewportの設定を行なわないと、デフォルトの横幅980pxで設定してしまうので注意、とのことだったので、いろんなサイトが良く設定している <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> を設定してみました。 しかし、FirefoxのFireMobileSimulatorで一通
スタイルシート［CSS］/ボックス/overflowの縦横の処理を個別に指定する - TAG index
overflow-*** は、overflow の縦と横の処理を個別に指定するプロパティです。（*** の部分には、x または y が入ります） overflow-x … 横方向の指定 overflow-y … 縦方向の指定 div.example1 { width: 200px; height: 100px; white-space: nowrap; overflow-x: scroll; } div.example2 { width: 200px; height: 100px; overflow-y: scroll; }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://o-ands.net/blockquote-css-design-temple/
