jQuery 使い勝手の良いslick.jsスライダー（レスポンシブ対応）
今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです！ (a...
WEB DESIGN
jQuery 
CSS ロールオーバーで画像を半透明にするシンプルな方法
ボタンや画像などで「ロールオーバーした時に画像を半透明にしたい！」そんなときの簡単な方法をご紹介します。かなり単純なことなので、扱いやすいかと思います。 (adsbygoogle = window.adsbygoogle || []).pu...
HTML 文字化け防止のために「文字コード宣言」は必ずしよう！
HTML文書で日本語を使用したファイルは、必ず「文字コード」を指定してから保存しましょう。また、HTML文書内において必ず「文字コード宣言」をすることを忘れないようにしましょう。// // なぜ文字コードの宣言が必要なの？簡単に言ってしまえ...
WordPress WordPressをはじめたら「8つの基本設定」を確認しよう！
個人でWordPressを導入し“Webサイト”や“ブログ”などを構築する方も増えてきていますが、何と言っても昨日の多さやそこまで知識が深くなくてもそれなりのものができるという容易さは、ここまで広くWordPressが広まった大きな要因でし...
WordPress ページの表示速度を改善するプラグイン「WP Super Cache」
Wordpressでサイトやブログを運用していると、気になるのがその「表示速度」。スマホなどで閲覧すると如実に表れますが、ページ全体を読み込むまでにはそれなりに時間がかかってしまいますよね…。 そんな問題を少しばかり軽減してくれる、表示速度...
HTML スマホサイトで使われるメニューデザイン7タイプ
スマホサイトの作成においてワイヤーを引く際に、まず悩むのが「メニューをどうするか？」ということ。 サイトの印象を大きく左右するその「メニュー」について、それぞれどういったことを考え、適切なメニューのタイプを決めれば良いのか？ そのメリットや...
CSS CSSで丸いボタンを装飾してみる
CSSの「border-radiusプロパティ」を使用して、色々な丸いボタンを作ってみたいと思います。まずはデモサンプルを確認してみてください。 デモサンプル (adsbygoogle = window.adsbygoogle || [])...
CSS 半透明ボタンにしたいとき、背景の柄が透けてしまうのを防ぐ方法
ボタン要素をimg画像で配置した時に、マウスオーバー効果として半透明にする指定をすると、背景が黒っぽい場合に柄が透けてしまって少しカッコ悪くなってしまうのを防ぐ方法になります。 簡単に言ってしまえば、画像の裏側に背景白を指定するだけで解決し...
jQuery 可変グリッドレイアウトを実装できるMasonry
可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単に実現できるjQueryプラグイン「Ma...
CSS マウスオーバーでラインアニメーションを実現する
ナビゲーションなどでマウスオーバー時に、装飾の下線を横に伸ばすアニメーションをかつてはFlashなので実現していましたが、これと同じような動きをCSSのみで実現することが可能になりました。 a要素に対する擬似要素の「a:after」と「a:...
CSS text-shadowプロパティによる装飾サンプル
テキストに対しての装飾を考えるとき、わざわざPhotoShopなどで画像を作らなくても、CSS3の「text-shadowプロパティ」の指定で、ドロップシャドウや光彩などの、基本的なエフェクト効果を実現することが出来ます。 それらの指定方法...
WordPress テーマをカスタマイズして子テーマをつくる方法
WordPressを利用して、サイトやブログを運営している方の中で、無料テーマをそのまま利用している方も多いかと思いますが、文字サイズやテキストカラーなど、ちょっとした見た目を少し調整したいなぁと思うと、多少なりともCSSやテンプレートファ...
CSS 【初心者向け】CSSってどこに記述すればいいの？
※CSS初心者向けの内容ですので、それなりの方はすっ飛ばしてください！ 最近CSSをはじめた方に、「CSSの記述場所って決まってるの？」 というような質問をされたので、CSSの記述場所の基本を確認しておきます。 (adsbygoogle =...