jQuery 画像や動画をぐいっとポップアップ表示！jQueryプラグインの「Lity」
画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多い...
WEB DESIGN
jQuery 
CSS 【初心者向け】はじめてのCSS ～第4話～ フォントサイズと単位について
前回の記事「【初心者向け】はじめてのCSS ～第3話～ ウェブセーフカラーについて」にて、ウェブセーフカラーについて記述しましたが、今回は「フォントサイズとその単位」について解説していきたいと思います...
CSS inline-blockで横並びにしたときにできる隙間の対処法
ナビゲーションや画像など、横並びに要素を配置したいときにdisplay:inline-blockを利用する方法があります。その際に要素ごとの間に隙間ができてしまう問題があります。今回はその理由と対処方...
CSS Google日本語フォントが試験的に公開！使い方を解説！
昨年、Googleより無料で使える日本語フォントが9種類公開されました。アルファベットよりも文字数が多く、データの問題的になかなか日本語で使えるフォントがないのが現状ですが、試験的ではありますが一般ユ...
HTML 「Font Awesome」利用サンプル集
前回の記事、「Font Awesome」ウェブアイコンフォントの利用方法の続きとして、実際に「Font Awesome」を利用しながら、オプションとして指定できるサンプルを見ていきたいと思います。▼目...
jQuery 画面内に表示されたときに動きをつける「jquery.inview」
スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処...
HTML 「Font Awesome」ウェブアイコンフォントの利用方法
一昔前は、ナビゲーションやリストマークなどに「シンボルマーク+テキスト」を表示したい場合、「png画像」を背景画像に指定するなどして対応することもありましたが、フラットデザインが流行してからは「Web...
CSS 【初心者向け】はじめてのCSS ～第3話～ ウェブセーフカラーについて
前回の記事「【初心者向け】はじめてのCSS ～第2話～ 色の指定方法について」にて、色の指定方法について記述しましたが、今回はその続きとして「ウェブセーフカラー」について解説していきたいと思います。(...
CSS 【初心者向け】はじめてのCSS ～第2話～ 色の指定方法
フォントカラーや背景色、リンクカラーやボーダー色など、様々な要素やプロパティに対して「色」を指定することができます。CSSによる色の指定方法には、以下の3つの方法があります。 16進数による指定 10...
CSS 【初心者向け】はじめてのCSS ～第1話～
最近、「WEBをイチから学びたい！」という意欲旺盛な挑戦者とやり取りをすることがあります。その際に利用している自分なりにまとめた資料があるのでご紹介しようと思います。ちなみにこの記事は「WEBデザイン...
HTML Google HTML / CSS Style Guideを翻訳してみた。
Google HTML/CSS Style Guide (【改正】2016.2.24 )これまで何となく認識しているルールとか、規則ってありますよね・・・。「決まりがあることは知っているけど、守らなく...
jQuery ウィンドウサイズによるクラス名の付与＆削除する方法
レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1 ・・・背景色を...
CSS リンククリック時の点線を非表示にする方法
画像のリンクボタンをクリックした時に、四方にちゃっかり出てくる「点線」を非表示にする方法をご紹介します。気にならない人はいいかもしれませんが、個人的にはかなり気になってました・・・。どういうことかとい...
CSS hr要素の罫線をちょっと装飾してみる。
<hr>要素は「罫線（けいせん）」を表示するタグですが、そのまま罫線を引くだけでは面白くないので、CSSでちょっと装飾してみることにします。▼まずは、デフォルトで設定されていhr要素のスタイルをリセッ...