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からその動画を読み込む形式が多いで…

HTML&CSS

CSSでボタンをキラッとさせる

WEBサイトには「ボタン」がつきものです。 別のページに移動するためのボタンやメッセージを送信するためのボタンなど、どんなWEBサイトでもたいてい1つか2つのボタンが設置されています。 ボタンはただ置…

HTML&CSS

画面内に入った要素の背景色を横から延ばす方法

WEBサイトで、ページをスクロールさせているとサーっと横から背景色が伸びてきて、白かった要素の背景に背景色がつくページを見たことはありませんか? この仕掛けは比較的簡単に作れて、見てくれる人に「おっ!…

HTML&CSS

タイムラインやカレンダーの埋め込み方法

WEBサイトを見ていると、 TwitterやFacebookのタイムライン、又はGoogleカレンダーを埋め込んでいるサイトを見かけることがあります。 これらのタイムラインやカレンダーの表示は特別な技…