jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="
[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ
Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な
![[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/11d487ffaa0d8f97196e7f7cedd83ea94e889a64/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102601.png)
HTML5フリーライブラリー 【HTML5 テンプレート】
インターネットを介したあらゆるメディアの次期オープンプラットフォームとして注目されているHTML5。その中でもやはりWebサイトにおけるHTML5で作られたテンプレートの需要は今後ますます大きくなる事が予想されます。 まだ海外・国内とも数少ないですが、その中でもすでに質の高い汎用性のあるHTML5のテンプレート（無料）を配布しているサイト・ブログがありますので紹介します。 FREE HTML5 Template （海外） 海外サイトでその豊富なHTML5&CSS3のテンプレートを配布している『FREE HTML5 Templates』さんです。 テンプレートの数の豊富さもさることながら、その質の高さや、シンプルな作りのテンプレートは、オリジナルでカスタマイズするのに最適です。（同サイトもここで紹介のテンプレートをカスタマイズしています） HTML5やCSS3初心者の方から、HTMLに知
deCSS3 - a bookmarklet for graceful degradation.
Drag this to Bookmarks Bar → deCSS3 Use this bookmarklet to get a whiff of what your site will look like on older browsers that don't support CSS3. It doesn't do everything right now, but if you’d like to help please fork it on Github, we're looking for collaborators with regex-fu. Currently supports: Chrome, Safari
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
