1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

2018/09/20 345 users コリス header article HTML要素 main

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Trashy.css Trashy.css -GitHub Trashy.css... 続きを読む

[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル | コリス

2015/07/27 232 users コリス チュートリアル CSS スニペット gallery

レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery<... 続きを読む

[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック | コリス

2015/01/08 52 users コリス CSS ホバー時 テクニック ナビゲーション

ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">S... 続きを読む

デザインの勉強にもなる、CSSで実装するパンくずのまとめ | コリス

2013/10/27 486 users コリス CSS パンくず アイコン 勉強

角丸や三角形、アイコンなどを添えたり、CSS3アニメーションを加えたりなど、CSSで実装するパンくずを紹介します。 機能的にはもちろんシンプルなテキストベースのものと同じですが、サイトのUIにあったデザインのパンくずも素敵ですよね。 Breadcrumb Tiny CSS3 Round Breadcrumb Flat CSS3 Breadcrumb Pure CSS3 Breadcrumb Nav... 続きを読む

びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu | コリス

2013/09/27 88 users コリス ナビゲーション スマフォ タブレット テンプレート

タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 iPad Mini Nav 紹介するのは、デザイン的なものと実際に動作するデモの2つです。 まずは、デザイン的な方から。 iPad Template こちらではiPad, iPad Miniの精巧なテンプレートと共にこのナビゲーションの動作を楽しめます。 ダウンロードできる... 続きを読む

アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」:phpspot開発日誌

2013/05/21 86 users jQueryプラグイン phpspot開発日誌 ライブラリ

jQuery.mmenu slick app look-alike sliding menus for your mobile website アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 この手のライブラリというかプラグインは色々と出ていそうですが、１つの選択肢として知っておくとよいのかも。 $("#nav").mmenu(); で簡単にメニューが初期化でき... 続きを読む

HTML5とSEOについて「HTML5とか勉強会」で話してきました。 by @tsuj

2012/05/15 77 users SEO by @tsuj HTML5 section 勉強会

HTML5とSEOについて「HTML5とか勉強会」で話してきました。 HTML5とSEOの関係についてまとめました。現段階ではあまり意味ありませんが、今後を考えるとHTML5のnav、aside、section等による論理構造化、セマンテック化はSEOに大きく影響する可能性が高い重要な事です。 4月25日に開催された、HTML5とか勉強会の第29回、「HTML5ビジネス最前線（B2C編）」のパネル... 続きを読む

[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法 | コリス

2012/04/23 118 users コリス Three CSS float TWO

ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a>... 続きを読む

[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション | コリス

2012/04/05 152 users セマンティック Button コリス チュートリアル 実装

デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li>... 続きを読む

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel

2012/02/21 649 users jQuery webOpixel グローバルナビゲーション

グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HO... 続きを読む

これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス

2012/01/18 89 users コリス Container ナビゲーション Opera 実装

デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む

見落としがちなHTML5で変更された要素いろいろ | Webクリエイターボックス

2011/09/06 805 users Webクリエイターボックス HTML5 section 既存

HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ H... 続きを読む