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
簡単に設置できる！Blogger ブログでトップへ戻るボタンを設置する
注意 テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。 不安な方は以下の関連記事を参照してください。 【 超初心者向け 】 Blogger のテンプレートを反映・編集する方法 JQuery の導入 JQuery の導入をしていない場合、以下の script を <head> の直下に記述します。 <!-- JQuery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/> Font Awesome の導入 Font Awesome を導入していない場合、以下のコードを <head> の直下に記述します。 <link href='https://use.fontawesome.com/releases/v5.6.4/css/al
jQueryで簡単ドロップダウンメニュー
恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。 今回はjQueryを使ってコピペで作成できる ドロップダウンメニューをご紹介します。 今回作成するドロップダウンメニューのデモがこちら DEMO 早速作成していきましょう！ jQueryを読み込ませる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> これをHTMLのbodyの閉じタグの前に入れましょう。 HTMLで形を作る。 <ul class="dropdwn"> <li>HOME</li> <li>A <ul class="dropdwn_menu"> <li><a href="#">A1</a></li> <li><a href=
CSS でドロップシャドウをつける方法 - by Takumi Hirashima
CSS でドロップシャドウをつける方法を紹介します。 例えば、CSS で要素に影をつけたいときに便利な方法です。 類似機能のボックスシャドウと比べて、ドロップシャドウは擬似要素も対象になります。 ドロップシャドウを付ける方法 ブラウザの対応状況 box-shadow じゃだめなの？ ドロップシャドウを付ける方法 CSS で特定の要素にドロップシャドウを付ける方法を紹介します。 ドロップシャドウをつけるには filter プロパティの関数 drop-shadow を使用します。 実際の見た目はこんな感じです。 ベースの HTML は次の通りです。 <div class="dropshadow">ドロップシャドウ</div> CSS はこちら。 .dropshadow { position: relative; width: 240px; margin: 0 auto; padding: 15
box-shadowはもう古い？CSS新時代の「影の落とし方」
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
box-shadow
CSS3 の box-shadow はボックスに１つあるいは複数の影（ドロップシャドウ効果）を付加する プロパティです。これを使うことによって、立体的な要素の表現が可能に可能になりました。 他の要素の配置に影響を与えないので重なることがあります。 box-shadowプロパティでボックスに影を表示 ※下記 サンプルコード：高さ,幅,ボーダーなどのコードは省略してます。各自で設定してください。 シャドウ 外側 右方向、下方向 box-shadow構文： 水平方向 垂直方向 ぼかし 広がり 色 向き（内向きにする場合insetを付加）； .shadow { box-shadow:6px 0px 0px 0px blue; } /* 水平方向 右へ 6px */ .shadow { box-shadow:6px 7px 0px 0px blue; } /* 垂直方向 下へ 7px */ .sha
CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法 | TechMemo
transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーション時に画像が一瞬だけ伸縮してしまうことがあります。 a img{ transition:all .3s ease-in-out; } a:hover img{ opacity:0.8; } このような現象を対処するための方法をご紹介したいと思います。 CSSアニメーションで要素が一瞬伸縮したりちらついたりする場合の対処法 要素が伸縮したりちらついてしまう現象が発生する場合は、アニメーションを指定している要素に対して、以下のCSSを追加します。 a img{ -webkit-backface-visibility:hidden; backface-visibility:hid
CSSのグラデーション（linear-gradient）の使い方を総まとめ！
この記事では、「背景」や「ボタン」などWebページの様々な部分にCSSでグラデーションをかける方法を紹介していきます。
CSSのみで要素を六角形にする方法 | TechMemo
CSSを使って要素を六角形にする方法をご紹介いたします。 画像を使わなくても六角形を実装できるので、背景色を変えたい時などにCSSの修正のみで対応できるようになります。 CSSのみで六角形を実装する方法 上記のような六角形を実装します。 まず、HTMLは以下のように記述します。今回はdivにしていますが、リンク等でもOKです。 .hexagon { width: 88px; height: 50px; background: #aaa; position: relative; } .hexagon_cont { height: 100%; font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: relativ
【CSS】マウスオーバーするとアンダーラインがﾇﾙｯと伸びてくるテキストの作り方
マウスを乗せるとアンダーラインがヌルっと出てくるリンクテキストを最近良く見るので、使用率が高そうな2パターンを作ってみました。
最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α
最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね（うちのブログもだけど） そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン（上に画像・下にタイトル）を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。 そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ﾇﾙﾘ。
【CSS】画像の下に生まれる謎の余白問題を解決する方法
深夜のテンションでサムネ画像作ったらこんなことになりました。いい感じにハイになってます。 …さて、Webサイトの制作時、画像の下に謎の余白が生まれることがありますよね？これ、初心者の方は結構悩みそうなので、理由と解決方法を載せておきます。 ちなみに写真は愛車のCBR400Rちゃんです。 謎の余白が生まれる理由 これ結構忘れがちなんですが、画像ってテキストと同じインライン要素なんですよね。なので、配置されるのは下端ではなくベースラインです。このベースラインと下端の間が、余白として現れてしまいます。 あ、ベースラインって何ぞや？って人はググってね。 解決方法 display: block 画像をブロック要素にするのが一番簡単な方法です。 なお、ブロック要素にはtext-alignが効かないので、中央寄せしたいならmargin: 0 autoを使いましょう。
CSSで要素の表示・非表示を切り替える方法いろいろ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。 opacity visibility display では一つひとつ、特徴と用例をみていきましょう。 1. opacityの切り替え See the Pen 191001 by ligdsktschy (@lig-dsktschy) on CodePen. 特徴 非表示のときも、領域が確保される クリック／タップ可 transition可 用例 「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えない
z-indexが下の要素も上の要素もクリックできるようにする - haayaaa’s diary
z-indexを指定して要素を重ねている時、下になっている要素にリンクを設定したのですが、そのままだとクリック出来ない状態で困りました。 解決方法についてメモしておきます。 問題 もともとz-indexが指定してあり、２つの要素が重なっておりました。 重なっている要素のうち下の要素にリンクを設定したかったのですが、普通に設定しただけだとクリック出来ない状態でした。 解決方法 上になっている要素に、pointer-events: none; を付け加えます。 #zindex2 { // z-indexを指定して上になっている要素 略 z-index: 2; pointer-events: none; } すると、下になっている要素がクリックできるようになります！！ しかしこのままだと、上の要素にもリンクがある場合、そちらがクリック出来なくなってしまいます。 それを解決するには、上の要素の配下
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【ワードプレス】コクーンに設置した、カスタム検索のデザインを調整しました