AMP(Accelerated Mobile Pages)とは～対応HTMLを作ってみてわかったこと～ | サクラサクのSEO【SEO対策・コンテンツ制作なら】 あっ！サクラサクに相談しよう
AMPとはAccelerated Mobile Pages の略で、GoogleやTwitterなどが共同で参加しているAMPプロジェクトが構築した仕組み、もしくはそのためのHTML規格のことです。 AMPはその名のとおりモバイルユーザーのユーザー体験向上を目的として、WEBページの表示速度高速化が図られています。（ですのでAMP HTMLは基本的にモバイル端末で閲覧することが想定されています） Google検索ではすでに2016年2月24日からAMPで作成されたページが検索結果画面に表示されています。 ここではHTMLをAMPに対応させるための書き方の基本やAMPを取り巻く環境の変化についてまとめました。 update この記事はもともとGoogleのAMP実装に合わせて作成した記事でしたが、8月に大きく追記・修正しました。 『SEO会社が作った、SEOチェックリスト147選-自社サイト
HTML5の目玉機能の一つ、動画再生ができるvideoタグ | ずぼらイズム
・HTML5の動画形式(ブラウザ毎の対応表) ・videoタグの記述 ・videoタグの属性 1.HTML5の動画形式(ブラウザ毎の対応表) HTML5ではvideo要素を使用することでこれまでは主にFlash Player形式を介して行っていた動画再生をブラウザ単体で簡単に行うことができます。 2010年にはiphoneやipadを有するApple社の故スティーブ・ジョブズ氏が 「我々はAdobe社のFlashをサポートするつもりはない、今後Flashは使われなくなりHTML5に移行する」 と発言したことによって、ますますvideoタグが注目されるようになりました。 著名人の発言もあってか、2012年11月現在ではほとんどの主要ブラウザがHTML5に標準で対応しています。 videoを使うにあたってまず気にしないといけないのが、各ブラウザに対応する動画形式です。 全ブラウザにて同一
HTML5のvideoタグを使って動画を貼り付ける時の注意点と問題点
Image by:theQ camera HTML5ではvideoタグを使って動画を貼り付けることができます。 これまでWebサイトで動画を貼り付ける場合には、FlashやQuickTimeなどを使うのが一般的でした。 「theQ camera」は、videoタグを使っています。 videoタグを使えれば、よりリッチなWebサイト作りが出来て、面白そうだなぁ～っと思って、いろいろ調べてみました。 なかなか苦戦したので、概要をメモしておきます。 メイン動画の容量は重要！ 最初にメインとなる動画を準備します。 当たり前のことですが、これがないと始まりませんね。 動画の容量調整は難しいところです。 容量が大きいと、表示が重たくなって表示される前に離脱されてしまう可能性が高くなりますし、かといって、容量を小さくし過ぎると画質が粗くなって、見栄えが悪くなったりしてしまいます。 そうならないためにも、
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
Halcyon Days - An Exclusive Freebie for Codrops
A Creative Portfolio Template Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id tempor ipsum. Fusce at massa ac nunc porta fringilla sed eget neque. Quisque quis pretium nulla. Fusce eget bibendum neque, vel volutpat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesu
<input> - フォーム部品：入力欄 - とほほのWWW入門
形式 <input type="..."> サポート LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1 カテゴリ フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ(※1) パルパブルコンテンツ(※1) リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素 ※1 type=hidden 以外の場合 親要素 フレージングコンテンツ を子要素に持てるもの 子要素 無し(Empty) タグの省略 開始タグ:必須 / 終了タグ:無し 属性 グローバル属性 accept alt autocomplete autofocus checked dirname disabled form formaction formenctype formmethod formnovalidate fo
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
スマートフォンでiframeが伸びる件の対策 - ambergrisの日記
Andoroid携帯でもiPhoneでも、 iframeが中身の分だけ高さとかoverflow:hiddenとか全無視して伸びるので iframe下のコンテンツに被ってるということが判明。 こことか http://javascript-memo2.seesaa.net/article/200710596.html ここを参考に http://ameblo.jp/bofb/entry-10631465099.html １．<head>～</head>の間に↓を追加して、 <script> (function(){ var _UA = navigator.userAgent; if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) { document.write('<link rel="stylesheet" href="css
HTMLタグ/リンクタグ/起動させたメールに件名や本文を入れる - TAG index Webサイト
リンクで起動させたメールに、予め件名や本文などを挿入しておくことができます。 以下のサンプルコードをコピーする場合は、メールアドレスの書き換えを忘れないようにご注意ください。 <a href="mailto:info@example.com?subject=問い合わせ&body=ご記入ください">メールはこちらへ</a> 値の詳細 mailto:info@example.com?subject=件名&body=本文 info@example.com … 送信先のメールアドレスを記述します ? … メールアドレスとその後に続く情報を ? マークで区切ります subject= … メールの件名を記述します body= … メールの本文を記述します & … 件名と本文を & マークで区切ります（文字参照で & と記述します） サンプル（メールソフトを起動します）
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
特殊文字・記号や罫線文字の入力一覧表
すべての Microsoft 製品 Microsoft 365 Office Windows Surface Xbox セール サポート ソフトウェア Windows アプリ OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Azure Microsoft Dynamics 365 Microsoft 365 Microsoft Industry データ プラットフォーム Power Platform 法人向けを購入する Developer & IT .NET Visual Studi
埋め込みHTMLタグ自動生成ソフトウェア
Real Player, Windows Media Player用の埋め込みHTMLタグ自動生成ソフトウェア 埋め込みHTMLタグ自動生成ソフトウェア JavaScriptにより非常に簡単にタグを生成する事が可能になりました。コピー&ペーストして使ってください。 ダウンロードしてオフラインで使用する事も可能です。 ダウンロードする(現在RealPlayer版) Source Maker for Real Playerバージョン (Windows Media Player版は暫くお待ちください) オンラインバージョン
番号付きのリストの途中から番号を変える
<ol><li value=””> 番号付きのリストは、標準では「1.」から順に、マークの種類を変更した場合は、そのマークのはじめから表示されますが、<ol>タグ内の<li>タグに「value=””」という属性を追加すると、リストごとにこの開始番号を変更することができます。 途中で開始番号を変更すると、以降のリストは変更された番号から順に表示されます。 記述例 <ol> <li>文章1</li> <li>文章2</li> <li value=”6″>途中で開始番号を変える</li> <li>以降は変更した番号から連番になる</li> <li>文章</li> </ol> 文章1 文章2 途中で開始番号を変える 以降は変更した番号から連番になる 文章
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
input type="radio"でchecked指定しているにもかかわらずデフォルトでチェックが入らない？と思ったときは・・・
input type="radio"でchecked指定しているにもかかわらずデフォルトでチェックが入らない？と思ったときは・・・ 原因を調べるのにずいぶんと苦戦したので備忘録を作ります。 input name="calendar_1" value="1" type="radio" checked こんな感じのチェックボックスが画面にあるのですが、何度試してもデフォルトcheckedにならないのです。 IEでもFFでも再現しました。 Firebugからcheckedを再度指定し直したり、きちんとchecked="checked"に書き方を変えてみてもダメ。HTMLのバグかと思いましたよ。 原因は・・・そう、ラジオボタン、カレンダーで使ってたんですよ。 3月の1日と4月の1日が同じカレンダーの上に乗っかることもありますよね。 input name="calendar_1" value="1"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Å] HTML5とCSS3をIE対応させるにはこの2つでいい？ブログを対応させる時に使った方法を書いたよ！![[Å] HTML5とCSS3をIE対応させるにはこの2つでいい？ブログを対応させる時に使った方法を書いたよ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0934cbd6b1a55d10f10c2fe2231b2993624e5cd/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Fbefore.jpg)
untitled
http://oji21.com/hpt/menu02/internetvideo.html
http://www.seo-maniax.com/high-rank/wmv-ie-mozilla.php
HTML4 で使える文字実体参照