HTML&CSS

object-fitで画像を指定したサイズにピッタリ合わせる

こんにちは、ゆんつです。 大きさや縦横比が全くバラバラの画像がここにあります。 1:1(横120px縦120px) 3:2 (横180px縦120px) 4:3 (横240px×縦180px) この画…

HTML&CSS

CSSでYouTubeを背景にする

こんにちは、ゆんつです。 WEBサイトを作成しているときに「背景にYouTubeの動画を使いたい」というときがあります。 自分のサーバーに動画をアップロードして背景に使用するよりも、YouTubeに動…

HTML&CSS

マウスカーソルが乗ったらカバーをかける

こんにちは、ゆんつです。 WEBサイトを見ているとメニューなどの項目にマウスカーソルを乗せると、メニューの上や下からカバーのような感じで新たな要素が覆いかぶさってくるデザインをたまに見かけます。 マウ…

HTML&CSS

簡単!クリッカブルマップの作り方

こんにちは、ゆんつです。 クリッカブルマップという言葉をご存じでしょうか? 例えば1枚の日本地図があったとします。 この日本地図を県ごとに区切ってリンクを貼ります。 ある県をクリックすると、その県庁の…

HTML&CSS

CSSだけで作るアコーディオンメニュー

商用のWEBサイトをみていると、よく「Q&A」を見かけます。 「Q&A」の内容は、そのサイトで紹介している商品やサービスなどに対する質問と、それに対する回答というのが多いと思います。 …

HTML&CSS

CSSだけで作るハンバーガメニュー

スマホでWEBサイトを見ると画面の右上や左上でよく見かける3本線。 この三本戦をタップすると、たいていの場合画面外の左や右からメニューがスライドして現れます。 これを「ハンバーガーメニュー」とか「ドロ…

HTML&CSS

タブメニューを作る

WEBサイトでよく見かけるものにタブメニューがあります。 タブメニューはタブの部分をクリックすることにより、コンテンツ部分が切り替わります。 必要な情報だけを画面に表示することができるのでスペースの節…

HTML&CSS

見出しの両サイドに横棒を配置する方法

WEBサイトにはhタグを使った「見出し」がつきものです。 見出しには様々なバリエーションがありますが、結構よく見かけるのが見出しのキーワードの両サイドに横棒がある見出しです。 シンプルですが見出しであ…

HTML&CSS

CSSで作るドロップダウンメニュー

WEBサイトにを見ているとグローバルナビゲーションにマウスカーソルを乗せるとニューっとサブメニューが現れる「ドロップダウンメニュー」というのを見かけることがあります。 ドロップダウンメニューを一見する…

HTML&CSS

埋め込んだ動画が再生されない原因と解決策

先日、動画ファイルをWEBサイトに埋め込む作業をしていました。 最近ではWEBサイトに動画を表示させる場合は、まずYouTubeに動画をアップロードしてYouTubeからその動画を読み込む形式が多いで…