CSSのたったの3行で、画像・テキストを天地中央表示するコード ～Vertical center with only 3 lines of CSS～
たったの3行のCSSのコードで実現できる上下、左右共に中央寄せに出来るコード。とてもシンプルに実装できるので覚えて起きやすいテクニックです
CSSのフィルターを掛けたものと元の画像を一本の縦線をスライドして比較できるコード ～CSS Filter Glass～
CSS Filter Glass See the Pen CSS Filter Glass by Yogev Ahuvia (@kindofone) on CodePen. http://codepen.io/kindo […]
CSSだけで作られたワークスペースの風景がスゴイ!! ～Web Developer Workspace Full CSS～
Web Developer Workspace Full CSS See the Pen Web Developer Workspace Full CSS by Arbaoui Mehdi (@arbaoui_mehdi […]
超シンプルWordPressのアクセスカウンタープラグイン ～WP Hit Counter～
WordPressにウィジェットを使って簡単にアクセスカウンターを設置するプラグインです WP Hit Counter http://wordpress.org/plugins/wp-hit-counter/ プラグイン […]
HTMLで画像の下に空白が出来てしまうのを防ぐ方法
HTMLでimgタグを貼り付けると、画像の下に空白（隙間）が出来てしまうことが有ります CSSに少しコードを加えてやるだけで無くなります CSS img { vertical-align:text-bottom; } i […]
CSSだけで作られたジグザク模様のパターン ～Gradient Zig Zag Pattern SASS Mixin～
Gradient Zig Zag Pattern SASS Mixin http://codepen.io/jason-kinney/pen/qKGgx SASSで書かれているので、カラーを簡単に変更する事が出来ます C […]
GoogleのYoutube再生品質の評価サイトがとても楽しい
GoogleがYoutubeの再生状況の統計からISPを評価するサイト（現在：日本は未対応）が最近公開されました そのサイトが楽しいデザインでしたので紹介します。 http://www.google.com/get/vi […]
CSSだけで作られた背景の動作がパララックス～Pure CSS Parallax Scrolling～
Pure CSS Parallax Scrolling See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen. h […]
映画の宣伝の様な映像っぽい文字がフェイドインしてくるCSSアニメーション ～CSS3 Text Animation Effect～
CSS3 Text Animation Effect See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen. http […]
フェイスブックのLike BOXをレスポンシブにする方法
Facebookのライクボックスは基本的に横幅を指定して設置しますが、レスポンシブなサイトだとレイアウトが変動するので、それに合わせて横幅が自動で決まるようにする方法です FacebookでLike BOXの作成 htt […]
CSSだけで実装できるタブメニュー radioボックスを使ったシンプルなコード ～CSS Tabs～
CSS Tabs See the Pen CSS Tabs by How Bizarre (@howbizarre) on CodePen. http://codepen.io/howbizarre/details/bE […]
文字がほろほろと落ちてくるようなアニメーションをWEBサイトに実装するコード ～Simple float down text paragraph～
Simple float down text paragraph See the Pen 文字がほろほろと落ちてくるようなアニメーション by たつや (@tatsuya) on CodePen. http://code […]
CODEPENをWordPressのビジュアルエディタで簡単に貼り付けられるプラグイン
CODEPENはHTML、CSS、JSを専門的に扱ったコードを投稿。編集、埋め込みができるもので、そのCODEPENの埋め込みをWordPressのビジュアルエディタで貼り付けできるショートコードが使えるようになるプラグ […]
404エラーをtext-shadowとanimationを使って壊れかけのネオン管で表現したアイディア
元はjavascriptでどうさせるものでしたが、CSSだけで動かせるように改良されたものです No Vacancy 404 CSS Only http://codepen.io/Zeaklous/pen/dIomg こ […]
Canvasで作った泡がポコポコ浮き上がるアクアリウム ～Aquarium～
Aquarium HTML5の新要素 Canvasをつかって表現された泡がぶくぶくと上がっていくアニメーションです。 小さい泡はマウスポインターを当てると動きます。癒し系なアニメーションです 背景とか、ヘッダー画像の代わ […]
Twitterのフォローボタンをテキストリンク化する方法
Twitterのフォローボタン、いいのですが やっぱりデザイン的にちょっと、WEBサイトに合わない時があるので できればテキストリンクで実現したい Twitterのフォローボタンをテキストリンク化する方法 […]
javascriptを使わずCSSのみでマトリックスのような文字が流れるアニメーション ～The Matrix in Sass～
The Matrix in Sass 映画マトリックス(MATRIX)で印象的だった、文字が流れていく様をCSSで実現したものです 何故か文字は片仮名と平仮名が流れていますがクールでカッコいいです 文字はCSSの方で扱っ […]
FeedlyのFollowボタンをテキストリンクで実装する方法
Feedlyへの登録ボタンをテキストリンクにする方法です。 Feedlyの場合はかなり簡単にできます 1 Feedlyでボタンを作る http://www.feedly.com/factory.html 普 […]
レスポンシブに対応したテーブル(TABLE)デザインのアイディア
Responsive Table v2 http://codepen.io/green-plastic/pen/Fczvd Responsive table http://codepen.io […]
WordPressのカスタムメニュー(wp nav menu)で囲まれている<ul>タグを削除・無くす方法
WordPressでちょっと凝ったメニューを実装しようと思って、ulがあると邪魔になるのでulが無い<li>そのままでカスタムメニューを出力する方法です カスタムメニューで出力されるタグからul […]
