WebDesign

日本国内のデバイス別のディスプレイサイズ(解像度)のシェア状況を調べてみましたので、デバイス別(デスクトップ、タブレット、スマートフォン)にそれぞれサイズとシェアをまとめておきます。

JavaScript/jQuery

jquery.inviewはディスプレイのビューポート内(画面内)に入った要素に対して、何らかの処理を実行させることができるライブラリです。
今回はこのjquery.inviewを使ってスクロールで画面内に現れた要素にCSSでフェードインなどの動きをつける方法と記述例を紹介します。

JavaScript/jQuery

jQueryをWebページに読み込ませる方法について、ダウンロードしてサイトに設置する場合とCDNを利用する場合それぞれの方法を紹介していきます。

HTML/CSS

Animate.cssは、HTMLの要素にクラス名を指定するだけで簡単にアニメーションを利用することができるCSSライブラリです。
今回はこのAnimate.cssのバージョン4系の使い方について紹介していきます。

JavaScript/jQuery

シンタックスハイライトとは、ソースコードなどの文字列の可読性を上げるために、属性などに応じて色分けをして表示することです。 今回は、自動でソースコードのシンタックスハイライト表示ができるJavaScriptライブラリ”Prism.js”の使い方を紹介していきます。

HTML/CSS

Webサイトのセクションの区切り等で背景色の切り替わりが斜めになっているようなデザインがありますが、 このような斜めの背景をCSSで作るにはtransformやclip-pathを利用する方法が考えられます。 今回は、これら二つを使って斜めの背景を作る方法を具体的な記述例と併せて紹介していきたいと思います。

HTML/CSS

軽量なCSSフレームワークの「Pure.css」の一部のファイルを使って、手軽さ最優先でレスポンシブなグリッドレイアウトの枠組みを作る方法を紹介します。

HTML/CSS

最近良く使われている各種CSSリセットについて、ファイルサイズと主なhtml要素への適用結果について比較してみました。

JavaScript/jQuery

“Lightbox2″は、画像を拡大してモーダルダイアログにポップアップ表示させることができるJavaScriptライブラリです。今回は、この”Lightbox2″の使い方を紹介していきます。

JavaScript/jQuery

指定した文字列を一文字ずつタイピングしているようなアニメーションを表現できるJavaScriptライブラリの”iTyped.js”の使い方を紹介します。