Acest website foloseste cookies. Continuarea navigarii reprezinta acordul dvs. Politica Cookies
Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the <img> element to provide a better experience than the default. Two Facts About The <img> Element # To understand how we can style broken images, there are two facts about the way the <img> element behaves that we need to understand first. We can apply regular typography-related styling to the <img> elem
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
Private content!This content has been marked as private by the uploader.
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。Read less
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 動画(VideoObject、Clip、BroadcastEvent)の構造化データ Google 検索は、ユーザーが動画を見つけて視聴するための入り口です。Google は動画の詳細を自動的に把握しようとしますが、VideoObject を使用して動画をマークアップすることにより、説明、サムネイル URL、アップロード日、再生時間などの情報を明確に指定できます。動画は、Google 検索の検索結果、動画の検索結果、Google 画像検索、Google Discover に表示されます。 コンテンツのマークアップ方法に基づき、動画は次の機能強化の対象となります。 LIVE バッジ: 動画を BroadcastEvent でマークすることで、動画に LIVE バッジを追加できます。LIVE
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 動画の SEO ベスト プラクティス 動画は、ウェブ上に作成され利用されるコンテンツのフォーマットとして普及を続けており、Google は、何百万ものさまざまなサイトから動画をインデックス登録してユーザーに配信しています。動画は、メインの検索結果ページ、動画モード、Google 画像検索、Discover など、さまざまな場所に表示されます。 次のベスト プラクティスに沿って、動画が Google に表示されるよう最適化します。 Google が動画を検出できるようにする 動画がインデックス登録されるようにする Google が動画コンテンツ ファイルを取得できるようにする 特定の動画機能を有効にする 必要に応じて動画を削除、制限、更新する Google が動画を検出できるようにする 一
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える(かもしれない)最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
table-layoutプロパティは、テーブル(表)の表示方法を指定する際に使用します。 指定できるのは、テーブル(表)の列幅を自動レイアウトにするか(auto)、固定レイアウトにするか(fixed)についてです。いずれの場合も行の高さは自動的に算出されます。 初期値のtable-layout:auto; では、ブラウザはテーブル(表)全体を読み込んでから、セル内容に合わせて各列の幅を決定して表示を開始しますが、 table-layout:fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあります。 table-layoutプロパティに「fixed」を指定する場合には、必要に応じて各列(セル)の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます。 ■値 HTMLソース <p>table-lay
IE8で、テーブルのセルの中の画像にmax-width を指定したら困った表示になってしまった。 画像(img要素)自体はmax-widthに収まった大きさで表示されているのだが、その画像が入ったセル(td要素)が、画像のもともとの大きさをに拡大してしまうという現象が発生。 この場合は、max-width と max-height を両方指定したら直ったが、両方指定したくないことだってある。 テーブルの方に table-layout:fixed を指定せよという説もあり(その方が仕様どおりとか)。 他にも、IE8ではこんな表示崩れが発生するとのこと。 * Min-width on new block formatting context beside a float is sometimes treated as width. * Percentage width floats cause
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました: 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
先日、「レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと」という投稿をした際に、その内容に関するTwitterでのやり取りの中で@shokutoさんから以下のコメントをいただきました: @rriver そうですね、なぜレスポンシブデザインという手法を採用したのか、がもう少し説明されていると良かったなと思いました。新しいから、だけではないと思いますし、設計思想的なものって評価として重要な要素ですので。 — sunami hokuto (@shokuto) May 2, 2012 たしかに、「なぜレスポンシブWebデザインを採用したのか」は、すごく重要な部分ですよね。 ということで、以下にまとめてみました。前回の投稿と同様に、これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 僕が携わった大学ウェブサイトのリニューアル・プロジェクトで、レス
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く