Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
YouTubeをWebサイトに埋め込む方法・レスポンシブ対応で｜ホームページ｜Shopifyブログ｜ネットショップ開設ならShopify専門のショップアイズへ｜大阪のホームページ制作会社アイズオブシー運営のShopify（ショッピファイ）専門の構築サービス
オプションがありますのでご希望に合わせてチョイスしてください。 開始位置の指定もできます。 埋め込みサイズの変更はhtmlに張り付けた後にwidth,heightの数字を変えればOKです。
ドキュメント：<amp-youtube>
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.
背景にYouTubeを設定する - Qiita
はじめに 動画を背景に設定したいと要望をいただく機会がありました。 つまずきと学んだこと、備忘録にて残したいと思います。 要望内容 レスポンシブサイトである 背景に動画を入れたい（PC/SP両方） 動画再生方法の要望は特になし 推奨環境はわりと新しめ（IE11以上、他最新。IEはよ消えてくれ） 動画再生方法の採用について 結論から言うと、YouTubeのAPIを採用しました。 HTML5 videoタグによる再生方法を採用しなかった理由 支給される動画データがどのようなデータでくるか、不安が大きい videoタグはiPhoneのSafariで自動再生されない 支給される動画データについて、mp4でご用意ください～、縦横比気を付けてください～、データ容量も抑えてください～とか言うのって大変ですよね。熟知されてる方なら心配はないのですが 空けてびっくり玉手箱！想像を超えるデータが支給されるとき
動画のレスポンシブ対応メモまとめ - Qiita
動画埋め込みと自動再生のおさらい 動画埋め込みの種類 videoタグ youtube、vimeo等のiframeタグ ■ videoタグ <video controls autoplay muted loop playsinline poster="hoge.jpg"> <source src="hoge.mp4" type="video/mp4"> </video> 自動再生 autoplay属性追加。muted必須！ iOSインライン対応用にplaysinline追加。 その他のオプション https://developer.mozilla.org/ja/docs/Web/HTML/Element/video 今回の検証で気が付いたけど、 ブラウザの可視範囲に入った時だけ再生されるようになっている（！） とは言え、全ブラウザではないので別途jsで制御が必要。 対応 chrome saf
YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
Safariでposition: stickyが効かない？display: blockで対処
という問題の対処法を紹介します。 display: inline-block（display: inline-flex）を指定していると効かないposition: stickyとdisplay: inline-block（display: inline-flex）を併記しているとSafariでは効きません。 ※Safariではposition: stickyにprefix「-webkit-」が必要。 対処法display: inline-block、display: inline-flexの替わりに display: blockdisplay: flexを使いましょう。 Safariにおいてposition: stickyが効かない時の対処法でした。 特に、ナビゲーションはdisplay: inline-blockで横並びにしている場合もあるため注意です。 ナビゲーションはdisplay:
http://からhttps://に切り替えるときに気をつけること - Qiita
だんだんhttps://でのアクセスがスタンダードになってきました。 SEOで有利だったり、iOS9で通信できなくなっていたり、サービスワーカーが使えなかったりでもうやらなきゃいけない雰囲気・・・ そんなわけで先日https化の対応しました はじめは証明書入れてリダイレクトかけるだけだろ、 って思っていたのですがいろいろと面倒だったのでまとめました。 httpからhttpsにハードコーディングされていた部分を変える RSSとかOGPとか内部リンクとかもろもろ httpからhttpsにリダイレクトさせる 恒久的な移転となるので302ではなく301リダイレクトさせましょう。 読み込みリソースをすべてhttpsに変更する CDN、WebFont、画像、API、計測のJS、広告などなどたくさんのリソースを今のWebサイトは読み込んでいます。 外部から読み込んでいるリソースも例外ではないので、htt
OGPとは？設定するべき理由と設定方法について | デジマギルド
せっかく作り、運営しているWEBサイトであれば、なるべく多くの方に見てもらいたいですよね。 今回は、SNSで多くの方に目にしてもらう、知ってもらうために大切なOGP設定について解説します。 ＞＞【企業向け】SNS運営ができる複業人材をお探しなら「カイコク」 OGP（Open Graph Protocol）とは OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。 これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようになり、ユーザーに対してページの内容を詳しく伝えることができます。 例えばこちらの枠で囲まれた部分。ここがOGPです。 OGPを設定するべき理由 OGP設定をしていなかった場合、
被リンクチェックツール8選 | SEOツール | テクニカルSEO BLOG
こんにちは、SEO分析ツール「アナトミー」開発チームの江頭です。 Google検索のランキングを決める要因の一つに「リンク」があり、その中でも良質な被リンク（バックリンク）がSEOにおけるページ評価に影響すると言われています。 そこで、リンク元や被リンク数を調べるのに役立つ、無料・有料の被リンクチェックツールを８つ紹介します。 被リンクをチェックする理由 被リンク（バックリンク）は、ドメインパワーやページの評価に影響を与えます。しかし、被リンクは何でも良いということではなく、「SEOに良い影響を与える被リンク」と「SEOに悪い影響を与える被リンク」があります。 関連記事：ブラックハットSEOとホワイトハットSEOの違い 被リンクチェックツールは、被リンクの動向をチェックし、被リンク対策を進める過程で使用します。 競合サイトと比較する 被リンクチェックツールを使い、被リンク数を自社サイトと競
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
