仕事で使っているWebやシステム開発関連の情報を掲載しています。開発に使用するソフトウェアの使用方法やシステム開発に必要な技術的情報。トラブル解決方法等を掲載してるサイトです。仕事で使っているWebやシステム開発関連の情報を掲載しています。開発に使用するソフトウェアの使用方法やシステム開発に必要な技術的情報。トラブル解決方法等を掲載してるサイトです。開発WordPress入門ゲーム開発CGSEの雑談椅子お問い合わせプライバシーポリシーメニューを閉じる検索切り替えメニュー2024年11月5日アコーディオンメニューをつくるアコーディオンメニューは、開いている状態と閉じている状態チェックボックスを利用してつくります。WEB2024年11月5日バッジが小刻みに揺れるアニメーションを設定したい「New」と書かれたバッジを横方向に小刻みに移動させます。画像の色が変化するアニメーションを設定したいトランジションは「変化前の状態」と「変化後の状態」をなめらかにつなげる機能でした。画像にホバーしたときに浮きあがるような効果をつけたいマウスポインタがリンク画像にホバーしたときに、浮き上がるような効果をつけます。具体的には、画像を拡大して回転させ、ドロップシャドウをつけます。画像にホバーしたときにセピア色にする効果をつけたいfilterプロパティに、半角スペースで区切って複数の値を指定すると、要素にふたつ以上のフィルター効果をつけることができます。画像にホバーしたときに明度が上がる効果をつけたいマウスホバー時に効果として、リンク画像そのものの色合いを変化させたいとき。画像にホバーしたとき徐々に拡大させたいリンク画像にマウスがホバーしたときに徐々に拡大させたい。サンプルでは変化前に比べて50%拡大させています。画像にホバーしたとき透明度を徐々に変化させたいリンク画像にマウスがホバーしたときに、徐々に透明にします。CSSの記述量も少なく簡単なのでリンクに適用するトランジションでもっともよく使用されます。WEB2024年11月5日ホバーしたときにテキストの傾きを変えたいトランジションとは、要素が「いまの状態」から「次の状態」に変化するときに、その変化をなめらかにつなげることです。WEB2024年11月5日テキストを斜めにしたいtransformは、要素のボックス変形させず、要素のコンテンツだけ「回転」「移動させる」「拡大・縮小させる」と「ゆがませる」機能を持つプロパティです。WEB2024年11月5日テキストの選択ハイライト色を指定したい「::selection」セレクタを使うと、ユーザーが選択したテキストのハイライト色を変更できます。このセレクタには注意点があります。WEB2024年11月5日テキストにドロップシャドウをつけたい要素のボックスだけでなく、「text-shadow」プロパティを使ってテキスト自体にもドロップシャドウをつけることができます。区切り線をグラデーションで表現したい区切り線のデザインをグラデーションにする方法を解説。区切り線のスタイルを変更したい区切り線の<hr>は、長い文章にメリハリをつけるには便利ですが、デフォルトの見た目は変えたいときがあります。WEB2024年11月5日スマートフォンサイトの電話番号がリンクにならないようにしたいAndoroid、iOS搭載のスマートフォンは、ページに含まれる「電話番号に見える」番号を検出して、電話をかけられるリンクを自動で設定します。多数のボックスを整列して並べたい(flexbox版)フレックスボックスを使って、ウィンドウサイズに合わせて伸縮するボックスを5列で並べます。WEB2024年11月4日ボックスを整列して並べたい(flexbox版)ウィンドウサイズに合わせて横に並ぶボックス自体も伸縮させたいとき、フレックスボックスを使って横に並べます。fixed;」を適用すると、その背景画像をスクロールしないようになります。WEB2024年11月4日ページ下部にキャンペーンブロックを表示したいページ下部にキャンペーン情報や目立たせたい情報(期間限定)表示したいときの方法を解説します。要素をページの下部に固定配置します。WEB2024年11月4日ナビゲーションをウィンドウ上部に固定したいヘッダーとナビゲーションをウィンドウ上部に固定して、スクロールしないようにします。それ以外の部分は通常通りスクロールできるようにします。伸縮するレイアウトの上限幅を決めたい伸縮するコラムレイアウトにすると、ページの幅はウィドウサイズに合わせて際限なく拡大します。あまりに広すぎると読みづらくなって、デザインも悪くなります。伸縮する3コラムレイアウトを作成した(flexbox版)フレックスボックスを使った伸縮する3コラムレイアウトを解説します。フロートを使うよりはるかにシンプルに作れます。伸縮する2コラムレイアウトを作成したい(flexbox版)フレックスボックスを使ってメインコンテンツの領域とサイドバーを横に並べます。WEB2024年11月4日パソコン向けのグローバルナビゲーションを作成したい(flexbox版)「フレックスボックス」は、フロートに変わるCSSの新しいレイアウト機能です。画像を使ったナビゲーションを作成したい(float版)ナビゲーションの各項目を、テキストではなく画像(背景画像)で表示します。そのためには、「スプライト」というテクニックを使用します。WEB2024年11月4日パソコン向けグローバルナビゲーションを作成したい(float版)グローバルナビゲーションを作成するには、通常であれば縦に並ぶ<li>を横に並ばせる必要があります。その方法には大きく2つの方法があります。WEB2024年11月4日スマートフォン向けのグローバルナビゲーションを作成したいスマートフォン向けのデザインでは、多くの場合グローバルナビゲーションを横ではなく縦に並べます。WEB2024年11月4日ローディングサインを表示したい画像が表示されるまで、読み込み中であることを示す「ローディングサイン」を表示させておくことがあります。一般的には、ローディングサイン自体も画像で作成します。WEB2024年11月4日プルダウンメニューの見た目を変えたいフォーム部品の一部など、たとえば<select>タグには、ブラウザが用意した特殊なアピアランス(見た目)が用意されています。WEB2024年11月3日テキストフィールドのすぐ横に送信ボタンを配置したいサイト内検索フォームで、テキストフィールドと送信ボタンを横にくっつけます。このテクニックのコツは、実はHTMLにあります。