マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
【AMP】Googleが推進するAMPとは？概要と対応方法まとめ
突然ですが、最近スマホで検索をした時にたまにカミナリ⚡マークが付いたページが表示されるのをご存知でしょうか？ 赤い枠で囲っているリンクにはカミナリのマークがついています。このようなリンクはAMP HTMLで構築されたWebページに遷移します。 リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。 これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。 「最近よく聞くけど、AMPってなんなの？」と疑問をお持ちの方も多いのではないかと思います。 SEO界隈で何かと話題のAMPについて、概要から対応方法までまとめてみました。 AMPのメリットや設定方法について、こちらの動画でもわかりやすく解説しています。 記事とあわせてぜひご覧ください。
VS Codeで選択範囲をHTMLタグで囲むショートカットキーを設定する - Qiita
以下のようなことができるように設定する方法を書いていきます。 （この記事では VS Code Version: 1.44 を使っています。） まず File > Preferences > Keyboard Shortcutsを開きます。 検索バーに emmet wrap と入力します。 表示された項目をダブルクリックし、それぞれに割り当てたいショートカットキーを設定します。 1番目に表示されているEmmet: Wrap Individual Lines with Abbreviationは、選択した範囲の各行をタグで囲むコマンドです。 2番目に表示されているEmmet: Wrap with Abbreviationは、選択した範囲全体を囲むコマンドです。 それぞれのコマンドの詳細はEmmetのドキュメントで読むことができます。 ショートカットキーを使う 選択範囲全体をタグで囲む まずは使
HTMLとCSSだけでポップアップ表示を作成する方法を現役デザイナーが解説【初心者向け】
[PR] Webデザインで副業する学習方法を動画で公開中 HTMLに記述する内容 ポップアップを実装するため、まずはHTMLに下記を記述します。 表示させたいコンテンツ ボタン要素 <label> <span>popupを表示</span> <input type="checkbox" name="checkbox"> <div id="popup"><img src="https://assets.techacademy.jp/public/logo.png" alt="TechAcademy" /></div> </label> ポイントはinput要素のcheckboxを使用することです。 この事でcheckboxがチェックされたとき（クリックされたとき）のアクションを、CSSで制御することができます。 CSSに記述する内容 つづいて、CSSに内容を記述します。 CSSに記述する内容
VS Code でEmmet使ったらHTML書くの速くなった～‼
背景 個人的に一番使いやすいなと思っているエディタが VScode です。 標準で使えるEmmetというとても素敵な機能があるのですが 先日まで知らなかったので、ワタシのような方に向けてお知らせしようと思いました。 Emmetって？ Emmetは、HTMLとCSSのワークフローを大幅に改善できるWeb開発者のツールキットと公式にあります。 要はHTMLとCSSを書く際の手数を大幅に減らしてくれる便利なツールなのです！ 本当、今までHTML書いていた時間が。。。モッタイナ 知らなかった自分を悔いてしまう そんな素敵なツールです。 まずは見てみましょう 手順は htmlファイルを用意し、VSCodeで開きます。 !（ビックリマーク)を入力して Tab 押します。 これだけでHTMLのひな形を↓入力してくれます。便利すぎですよね。 <!DOCTYPE html> <html lang="en">
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
Fancy Button 2016年を代表する鮮やかな配色に、オーバー気味のドロップシャドウが美しい、ボタン・ホバー用エフェクト。 See the Pen Fancy Button by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen. Big Fancy 3D Rotating SVG Button マウスホバーに合わせて、立体的に回転します。 See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen. Blue Light Button 青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。 See the Pen Blue light button by Toshiyuki TAKAHASHI (@g
HTML/CSSで表現できる、すごいテキストエフェクト用スニペット44個まとめ
この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。 HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ Fluid text hover マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。 See the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen. SVG textPat
【header/footer共通化】htmlをphp includeする方法がおすすめ｜なべわかし
タグ 2045年問題adsAIatomauCMcodecheckcssGDgitgulphtmlhtml5httpsITlintcheckMacMedia QueriesNode.jsnodebrewPHPRegenerate ThumbnailsSEOSNStipsVSCodeWEBwi-fiwordpressYoutubeやる気アイデアアフリカエジプトエラー解決エンジニアオンライン学習カフェカンボジアキャリアキリングフィールドギミックグループディスカッショングループワークコナンコナン映画コミュニケーションコーディングゴールドマンサックスサハラ砂漠サムネイルサービスシャウエンシンギュラリティスキルスタートアップスーダンセブターミナルフィーテクノロジートラブルシューティングネタバレバックパックビザビジネスフィリピンフレームワークブログプノンペンプラグインプログラミングプログラミング独学プロ
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法 | HPcode（えいちぴーこーど）
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法 2018 5/27 ～ とあるサイトのカスタマイズ案件にて ～ わたし「対応が完了したので、ご確認いただけますでしょうか。」クライアント「変更されていません。」わたし「大変お手数ですが、キャッシュを削除してからご確認いただけますでしょうか。」クライアント「キャッシュの削除ってなんですか？」わたし「PCだとCtrl + Shift + R、スマホだと各機種によって異なるため、「[機種名] キャッシュ削除」で検索していただけますか。」クライアント「まだ変わっていません。」わたし「どのような画面が表示されていますか？」クライアント「（キャプチャー添付）」わたし「またキャッシュが残ってますね。。大変お手数ですが、もう一度さきほどのキャッシュの削除をお試しいただけますか？」 うわあああああああああああ キャッ
【JavaScript入門】はじめてのDOM操作・取得まとめ！ | 侍エンジニアブログ
こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。 今回は、JavaScriptでHTMLを操作するために欠かせない「DOM」について学習をしていきましょう。DOMを学ぶには「ツリー構造」の基本や「イベント処理」などについて学習することも非常に重要になってきます。 そこでこの記事では、そもそもDOMとは何か？DOMの使い方は？という基本的な内容から学習を進めていき、さらに、 「DOM」とは？ それでは、まず最初に「DOM」について基本的な知識から学習を進めていきましょう！ 「DOM」は、簡単に言うとHTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと言います。DOMの正式名称が「Document Object Model」と呼ばれることからも分かるように、HTML文書をオブジェクトデータのように考えます。 例えば、次のようなHTMLが
Google Apps Scriptで最も簡単なWebページを作成して公開する
みなさん、こんにちは！ タカハシ(@ntakahashi0505)です。 Google Apps Scriptを使うとスプレッドシートやドキュメント、カレンダー、GmailといったG Suiteを中心としたサービスをいとも簡単に操作することができます。 そんなGoogle Apps Scriptですが、HTML・CSSによるWebページを作成できることはご存知でしたか？ しかも、サーバーはGoogleが用意してくれているものをそのまま使えますので、個別のサーバー契約やセッティングなど不要で、すぐさまインターネットにWebページを公開することができるのです。 しかも無料…！ ということで、本シリーズでは、GASユーザーかつHTMLページ・CSS初心者向けにWebページの作り方の基本中の基本を解説していきます。 まず、最初の一歩として、GASで最も簡単なWebページを作成して公開する方法をお伝
HTML5とは？メリットとHTML5から追加された新しいタグを紹介！
manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。 HTML5とは？ そもそもHTML5とは、2014年に利用が勧告された最新の規格です。2017年に勧告されたHTML5.2が現在の最新バージョンとなっています。1999年にW3Cが勧告したHTML4から約20年の時を経て、様々な機能が追加されました。 HTMLの歴史 1999年にHTML4が開発された後、W3CはHTMLの開発を中止してXHTMLの開発を進めていましたが、厳密な基準化を進めるXHTMLはエンジニアたちには受け入れられませんでした。 XHTMLの開発を進めるW3Cに反対する形で、Opera、Mozill
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Templates
Another HTML-lint 5
htmlでのツリーメュニー
必ず覚えておきたいHTML5の特徴と新機能／HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向
インライン要素・ブロックレベル要素とCSS「display」の使い方
HTML5 & CSS3 リファレンス - autofocus属性 （フォーカスを自動的にあてるかどうか）