マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
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に記述する内容
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
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法 | HPcode（えいちぴーこーど）
「キャッシュの削除お願いします」をなくせ！強制的にCSSのキャッシュを無効化する２つの方法 2018 5/27 ～ とあるサイトのカスタマイズ案件にて ～ わたし「対応が完了したので、ご確認いただけますでしょうか。」クライアント「変更されていません。」わたし「大変お手数ですが、キャッシュを削除してからご確認いただけますでしょうか。」クライアント「キャッシュの削除ってなんですか？」わたし「PCだとCtrl + Shift + R、スマホだと各機種によって異なるため、「[機種名] キャッシュ削除」で検索していただけますか。」クライアント「まだ変わっていません。」わたし「どのような画面が表示されていますか？」クライアント「（キャプチャー添付）」わたし「またキャッシュが残ってますね。。大変お手数ですが、もう一度さきほどのキャッシュの削除をお試しいただけますか？」 うわあああああああああああ キャッ
インライン要素・ブロックレベル要素とCSS「display」の使い方
divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。 CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。 よくul、liなどのリストを利用してメニューバーを作っているのを見かけます。リストってふつう縦並びになると思うんですがどうやったら横並びになるんでしょうか？？ HTMLのブロックレベル要素とインライン要素の違い <div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。 h1タグやdivタグなどは、ブロックレベル要素で改行がつき縦に並ぶのに対して、aタグなどのインライン要素は要素同
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
