ホームページ作成ソフト
FTPクライアントなら、FileZilla が便利でおすすめ！使い方も解説
ホームページ作成 WordPressでホームページだけに表示させる条件分岐
WordPressサイトで「ホームページだけに特定のコンテンツを表示したい」という場面はよくありますよね。たとえば、トップページにだけバナーを表示したり、お知らせを出したりといった用途です。
WordPressのテンプレートファイル...
CSS辞典 CSSの擬似クラスの : と :: どっちを使えばいい？【使い分けと理由を解説】
CSSでスタイルを指定していると、:hover や ::before など、コロンが1個のものと2個のものを見かけたことがありませんか？
「これって何が違うの？どっちを使えばいいの？」と疑問に思った方のために、この記事では「...
WordPress よく使うWordPressのテンプレートタグ一覧【目的別・コピペOK】
WordPressでテーマを自作したり、テンプレートをカスタマイズしていると、「あの情報、どうやって表示するんだっけ？」という場面によく出くわします。
そこでこの記事では、よく使うテンプレートタグを目的別に整理して一覧化しました。コ...
CSS辞典 CSSで横並びメニューを簡単に作る（flexboxの基本）
サイトのグローバルメニューやナビゲーションバーを作るときによく使われるのが横並びのメニューです。
flexboxを活用すると、複雑な調整なしに簡単に横並びレイアウトを実現できます。少し前は、横並びレイアウトに floatを使用してい...
CSS辞典 レスポンシブデザインに必須「メディアクエリ」の基本
レスポンシブデザインの基礎にして最重要テクニック
Webサイトをスマホやタブレット、PCなど異なる画面幅に対応させるには、CSSの「メディアクエリ」が欠かせません。ビューポートのサイズに応じてスタイルを切り替えることで、柔軟なデザイ...
CSS辞典 【CSS】クリックで押した感のあるボタン（transform: scale & shadow）
実際に押したようなフィードバック演出をする
ボタンをクリックしたとき、「へこむ」ような動きを加えることで、視覚的なフィードバックを演出できます。ユーザーにクリックが伝わったことを感覚的に示せる、非常に実用的なUI演出です。
H...
CSS辞典 ボタンをプルプル震えさせるアニメーション
注目を集めたいボタンや、遊び心を加えたい場面に
ボタンが「プルプル」と震えるアニメーションは、ユーザーの注目を引きつけたり、遊び心を演出したいときに役立ちます。CTA（行動喚起）ボタンや、ゲーム風UI、インタラクティブな表現で活躍す...
CSS辞典 box-shadowでボタンに立体感を出す方法
平面的なボタンを奥行きのあるデザインに変える
立体感のあるボタンは、押せそうな印象を与えるため、UIにメリハリをつけたいときに活躍します。box-shadowを活用することで影をつけ、見た目に奥行きを出すことができます。
HT...
CSS辞典 ボタンホバー時にふわっと色を変える【CSS】
ボタンにマウスを乗せたとき、ふわっと色が変わる演出は非常に基本的ながら効果的です。CSSのtransitionプロパティを使えば、カラーチェンジやサイズ変更などのアニメーションをスムーズに表現できます。ユーザーに反応があることを示すため、...
CSS辞典 CSSだけでローディングスピナーを作る
読み込み中や待機時間に最適な演出
ローディングスピナーは、処理中や通信中などの“待ち”時間にユーザーへ状況を伝える定番UIです。CSSだけで実装すれば、外部画像やJavaScript不要で軽量なインジケーターが作れます。
HT...