HTML 「Font Awesome」利用サンプル集
前回の記事、「Font Awesome」ウェブアイコンフォントの利用方法の続きとして、実際に「Font Awesome」を利用しながら、オプションとして指定できるサンプルを見ていきたいと思います。▼目次 アイコンサイズを大きくする アイコン...
WEB DESIGN
HTML 
jQuery 画面内に表示されたときに動きをつける「jquery.inview」
スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処理をして表現をしています。今回はそのよう...
HTML 「Font Awesome」ウェブアイコンフォントの利用方法
一昔前は、ナビゲーションやリストマークなどに「シンボルマーク+テキスト」を表示したい場合、「png画像」を背景画像に指定するなどして対応することもありましたが、フラットデザインが流行してからは「Webフォント」を上手に活用してページ自体の高...
CSS 【初心者向け】はじめてのCSS ～第3話～ ウェブセーフカラーについて
前回の記事「【初心者向け】はじめてのCSS ～第2話～ 色の指定方法について」にて、色の指定方法について記述しましたが、今回はその続きとして「ウェブセーフカラー」について解説していきたいと思います。(adsbygoogle = window...
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要素のスタイルをリセットしておきましょう。CSSでhr要素をリ...
jQuery 横並びにしたブロック要素の高さを揃えたい！
横並びに配置したコンテンツが、中身の高さ（画像の大きさやテキストの長さ）によって、バラバラになってしまうことってありませんか？そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があり...
CSS 画像の下に隙間が出来るのはなぜ？
画像を配置する際に、なぜだか"画像の下に隙間"が出来てしまうことありませんか？どういうことかと言うと、デモサンプルを確認してみてください。DEMO上の「デフォルトの配置」の画像下に背景色が見えてしまっているのがかわるかと思います。このように...
CSS 蛍光ペン風やアンダーラインなどのテキスト装飾をCSSで実現する
ブログ記事などでよく見かける、強調表現のひとつ「蛍光ペン」や「アンダーライン」。ランディングページでもよく見かける手法ですが、背景に画像を使ってリピートさせたりすることで表現するやり方もありますが、今回はCSSのみでテキストの装飾をしてみた...