Web・デザイン
-
美しい文字 「Google Web Fonts」「Adobe Web Fonts」及 @font-…
Webサイトでは、今まで通常、文字を画像にしたり、ブラウザで用意されているフォントを指定して表示してきました。しかしながら近年では、サーバー上におか…
-
JavaScriptのアニメーションライブラリ AniJS
豊富なアニメーションが用意されているCSSとJavaScriptのアニメーションライブラリです。スクロール、ロード、クリック、ホバー、フォーカスなどのさ…
-
ページ上の要素をふるわす CSShake 「CSSアニメーションライブラリー」
CSShake はホームページ上のあらゆる要素をぶるぶるふるわすことができるCSSベースのアニメーションライブラリです。バイブレーションのように震え続け…
-
列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認す…
WordPress で jQuery + Ajax で FlexBoxの挙動を確認します。いまいち分かりずらいと言うことで確認用のプログラムを作成してみまし…
-
Ruby Sass のインストール 開発環境の整備
開発環境について ruby sass での開発 Sassをインストールするには Rubyが必要となります。 Windows環境とMac環境ではそれぞ…
-
Sass 開発環境 gulp.js の導入 Mac版
gulpはターミナル上で動作するjavascriptライブラリーです。ターミナルでjavascriptを動作させるためには node.js をインストールし…
-
CSS3 アニメーションライブラリ animate.cssについて学ぶ
「animate.css」のアニメーションは各要素のプロバティを編集するだけで色々な効果が得られます。ただ沢山の効果があるので一覧で動かして比較できないかと…
-
CSS3 グラフィックス transform transition animation を学ぶ
HTML、CSSのみで、アニメーションを基本をまとめてみました。同様にちょっとした応用で文字に動きを与えたり立方体を3Dで動かした備忘録です。 …
-
CSS3 リッチな表現 角丸、影、グラデーションについて学ぶ
Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで角丸、影やグラデーションとかを表現できるCSS3の機能があります。今回, borde…
-
CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
属性セレクタ CSS全ての a要素に適用"#" で始まる内部リンクURL のどこかに "example" が含まれるリンク…