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カレンダーを埋め込んでいるサイトを見かけることがあります。 これらのタイムラインやカレンダーの表示は特別な技…

HTML&CSS

モバイルでoverflow-xが効かない時の対策

先日、コンテンツの背景色が画面幅からはみ出すようなデザインを作っていました。 背景色が画面の幅からはみ出しているので、当然そのままだと横スクロールが発生します。 そこでbody要素に「overflow…

HTML&CSS

オリジナルのSNSシェアボタンなどを設置する

最近のWEBサイトではSNSボタンがあるのがほぼ当たり前の状況になっています。 記事を見てくれた人がSNSボタンを押してくれれば、記事がシェアされ記事の閲覧者を増えてくれる可能性があります。 それぞれ…

HTML&CSS

要素をスクロールに追随させたいならsticky!

画面のスクロールに合わせて特定の要素が追随してくるようなWEBサイトを見たことがありませんか? ヘッダー部分がページの先頭から終わりのスクロールまでずっと付いてくるというような追随の仕方ではなく、スク…

HTML&CSS

【簡単】タブメニューを作ろう

WEBサイトを見ていると、タブメニューをよく見かけます。 タブメニューを使うと、クリックしたタブに合わせたコンテンツが表示され、それ以外のコンテンツはサッと隠れます。 選択したものだけ表示されるので、…