CSS CSS「absolute」で真ん中寄せにする
横幅が2000pxなど、かなり大きな画像をトップのメインで使いたい場合など、イメージを常に真ん中に持ってきたい場合など、ディスプレイサイズに関係なく背景画像を真ん中に配置したいときなどにCSSの「absolute」を使って指定してみます。 ...
CSS 
jQuery 何かと便利な「Slider.js」
ピックアップ記事など、画像と文章をひとつの記事とした、スライドギャラリーを作りたいと思ったので、何かと便利な「slider.js」をちょこっとカスタマイズしてみました。 デモサンプル // // 1.wex.imより「slider.js」を...
CSS CSSから別のCSSを読み込む方法
複数のCSSをWebサイトに利用する場合、<head>内で全てを読み込むように記述するとコードが煩雑になってしまうことがありますが、CSSに用意されている機能で、別のCSSをまとめて読み込む場合などに利用できるので記録しておきます。 // ...
WordPress WordPressループの基本的なwhile文と関数について
WordPressの記事を表示する際に、繰り返されるループの基本的な「while文」と関数を理解していきます。かなり基本なことですね。 // // ここで出てくるものは、 while文 have_posts()関数 the_post()関数...
CSS CSSだけで画像キャプチャにエフェクトをつけて魅せる「InContent」
class指定をするだけで、キャプチャ画像にアニメーションをかけてカッコよく魅せてくれるスタイルシートの「InContent」のご紹介。 デモサンプル // // 1.InContentから「incontent.css」をダウンロード In...
jQuery マウスオーバーでエフェクトをかけてくれるjQueryプラグイン「Mosaic.js」
いくつかのキャプション画像を並べたページなどで、画像にマウスオーバーするとその説明やリンクテキストなどを動きをつけて表示してくれる「Mosaic.js」を使ってみました。 デモサンプル // // 1.Mosaic!より「mosaic.js...
jQuery 色んなエフェクトが簡単にできるjQuery Customboxを使ったモーダルウィンドウ表示
モーダルウィンドウってなに？ モーダルウィンドウとは、あるウィンドウの子ウィンドウとして表示し、ユーザーがそれに対して何かしらの応答をしない限り、親ウィンドウに戻さないというユーザーインターフェイスのひとつ。何かの注意事項や緊急のお知らせな...
jQuery ぐわわっと移動するグリッド配置してくれるdylay.js
グリッドレイアウトで要素を配置してくれるプラグインに、ぐわわっと大きな動きで移動するjQueryプラグインdylay.jsを使ってみました。 デモサンプル // // 1.dylay.jsをダウンロード A responsive "dyna...
PHP 基本的なPHPの知識で出来る便利なこと
phpをそこまで詳しく知らないWebデザイナーさんでも、Webサイト制作でちょこっとphpを組み込んで作れちゃう。そんなことから初めてみればphpも身近に感じられるかもしれませんね。ということで、まずは簡単に出来るものをやってみました。 /...
jQuery ローディングを自動表示させてくれるjQueryプラグイン「pace.js」14種
要領の大きい画像などを配置したページを読み込む際に、ローディング表示をするだけで読み込み時間のユーザーストレスを軽減することができます。そこで「pace」を使用すると間単にプログレスバーなどの表示が出来るようになります。 (adsbygoo...
HTML alt属性とtitle属性の違いについて
imgタグの属性として「alt」と「title」があります。どちらも画像に対する説明テキストですが、どのように使い分けるのが正しいのか？ちょこっと触れてみます。 (adsbygoogle = window.adsbygoogle || []...
CSS Normalize.cssって何？
これまで、各ブラウザ間のにおけるデフォルトCSSの差異を一旦全てリセットして、スタイルを初めから指定していきましょうというreset.cssがありましたが、全てをリセットしてしまうことは便利な面もあり、困る場面もありました。それを補う役割と...
CSS CSSに設定するfont-family
基本的なことかもしれませんが、Webサイトを作る上でフォント設定を皆さんどうしていますか？ 「Windows OS」や「Mac OS」そして各ブラウザの解釈によっても異なる基本設定や、有無をも言わず明朝体にしている、とか色々なんだと思います...