Result アニメーションエフェクトの不要なら結構シンプルなコードになります css.row figure {/*表示されている画像。*/ height: 240px; width: 240px; margin: 0; background-size: cover; background-position: 50% 50%; transition: all 1s ease-in-out; background-repeat: no-repeat; z-index: 2; display: inline-block; position: relative; } .row a {/*拡大画像を表示させる為の要素*/ display: inline-block; text-align: center; margin: 40px; text-decoration: none; color: wh

* { box-sizing: border-box; } .block > div{ margin: 0; padding: 0; } .block { max-width: 400px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: white; overflow: hidden; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px; border-bottom: 1px solid white; background-color:

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。 ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。 Paradeiser Paradeiser -GitHub Paradeiserの特徴 Paradeiserのデモ Paradeiserの使い方 Paradeiserの特徴 実装は簡単で、超軽量 Paradeiserは1.3KBのスタイルシート1つだけで、簡単に実装できます。 CSS Only jQueryやスクリプトは使用しません。 レスポンシブ対応 スマホ、タブレット、デスクトップのそれぞれで快適に操作できます。 オーバーフロー ナビゲーションはコンテンツにオーバーフローで表示されます。 スクロール時の

CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu

購読してるLea Verou女史のブログで 面白いツールが公開されていました のでメモ的にご紹介。以前も同じよ うなツールをご紹介しましたが、 もっと手軽に使えますのでこちらで も十分かもしれません。 cssとhtmlを書いたら即、結果が反映されるやつです。少し前にjsbinのインストール法を書きましたが、dabbletはインストール不要で、PHPと.htaccessが動くサーバーならDB不要で動作しますので結構手軽ですね。 ローカルに置いてみました。cssやHTMLを書くと、インタラクティブに反映。実行結果の場所や記述場所も選べます。上記は水平分割モード。 こんな風に実行結果の上にマークアップみたいな事も出来ます。これちょっと面白いｗ カラーコードにマウス乗せるとツールチップで実際のカラーを確認できます。 書いたコードは直接Gistに飛ばせます。 ただし、JavaScriptには対応して

CSSを構築する際、記述ミスや重複を防ぐためのチェックツールは 以前（2年以上前ですが…）の記事「CSSチェックツールについて」で紹介したものや、 それ以外でもいろいろあったりしますが、 記述したCSSをWebサイト上で診断して最適化できるサービス 「CSS Lint」が便利そうだったのでご紹介。 ≫CSS Lint ページ上に自分で記述したCSSを貼り付けて 「LINT!」のボタンを押すのみ。 記述ミスをしているところや プロパティが重複しているところや、まとめられる部分などなど 細かくチェックしてくれます。 診断結果画面は指摘内容がリストで表示され、 実際の該当箇所もCSS記述内に網かけで強調されるので 分かりやすいです。（診断結果画面は以下の様になります。） Webサイト制作の完了間近にチェックを入れたり 長い間更新を続けて収拾がつかなくなったCSSファイルなどの 記述整理にも使えそ