タグ「NAV」 - はてブログ

タグ NAV

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 19 / 19件)

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の精巧なテンプレートと共にこのナビゲーションの動作を楽しめます。ダウンロードできる... 続きを読む

NAVERに不正アクセス　169万件のメアドとハッシュ化されたパスワード流出か - ITmedia ニュース

2013/07/19 29 users NAVER メアドハッシュ化パスワード流出アクセス

LINEは7月19日、「NAVERまとめ」などNAVERブランドのサービスに外部から不正アクセスがあり、169万2496件のユーザーのIDとメールアドレス、ハッシュ化されたパスワードが流出した可能性があると発表した。対象サービスは18日午後8時に全アカウントのログインを遮断し、一部サービスを停止。19日午後9時に新しいパスワード再設定機能を設置し、サービスを再開する予定だ。対象は日本国内のNAV... 続きを読む

アプリ風のなめらかなサイドメニューが実装できる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(); で簡単にメニューが初期化でき... 続きを読む

ブログのSEO対策として画面最上部に固定してあるSNSへのリンク・検索窓をフッターへ書き直してみた | OZPAの表4

2013/03/04 40 users OZPA ナビゲーションバー header フッター div

最近読んだカグア！Googleアナリティクス解説Blogさんの最新SEO対策メモと7つの気づき2013と言う記事を参考に、最上部に固定してあるSNSへのリンク・検索窓の要素をフッターに書き直してみました。これまでは <head></head> <body> <div id="header"> <div id="nav">  </div> </div... 続きを読む

はてブで1000ブクマ越え連発の「セレブスタイル」のまとめ。:Ｂｌｏｇで本を紹介しちゃいます。

2012/09/30 13 users セレブスタイルスナフキンスヌーピー無印ヨーグルト

はてブで「セレブスタイル」の勢いが止まらない。料理やライフハック系記事をまとめた記事が人気を集めている。はてブをチェックしている方なら一度は見たことがあるはず。デートで使えるお店の紹介や、ヨーグルトの新しい食べ方、無印のインテリアの使い方など生活で使えるちょっとしたテクニック。スヌーピーやスナフキンの名言などを集めた記事が参考になる。そんな僕も人気になったまとめは定期的にチェックしてます。「NAV... 続きを読む

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>... 続きを読む

[CSS]ハッシュリンク先がどのエリアなのかを分かりやすくするスタイルシート | コリス

2012/04/10 36 users コリス Hoge CSS section要素 One

ハッシュリンク（#hoge）をクリックすると、その先頭はページ上部に表示されるので分かりますが、どこまでがそのエリアなのか分かりやすくするスタイルシートのテクニックを紹介します。実装 HTML HTMLはシンプルで、ナビゲーションをnav要素、コンテンツをsection要素、各ハッシュリンク先はdiv要素で実装します。 <nav> <a href="#one">1</a> <a href="#t... 続きを読む

[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>... 続きを読む

［Androidアプリレビュー］現時点では最強のバス路線アプリじゃないか？日本全国だいたい網羅の『バスNAVITIME』 #TABROID : ライフハッカー［日本版］

2012/02/25 13 users TABROID Androidアプリレビュー最強一角

Android , Google , TABROID , メディアジーンサイト , 仕事術 , 時間管理［Androidアプリレビュー］現時点では最強のバス路線アプリじゃないか？日本全国だいたい網羅の『バスNAVITIME』 #TABROID 2012.02.25 15:00 コメント数：[ 0 ] Tweet TABROIDより：いつの間にか経路検索サービス大手の一角を担ってますよね。NAV... 続きを読む

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... 続きを読む

Ustream.tv: ユーザー techcrunchjapan: Guest Speech 株式会社ドワンゴ川上量生氏, 株式会社ドワンゴ代表取締役会長川上量生氏による、TechCrunch Tokyo 2011での講演です。 TechCrunch Tokyo2011実況まとめ - NAV

2011/11/29 29 users odai ifr NAVER 録画 Ustream.tv

Guest Speech 株式会社ドワンゴ川上量生氏 0 視聴数長さ: 31:41 株式会社ドワンゴ代表取締役会長川上量生氏による、TechCrunch Tokyo 2011での講演です。 TechCrunch Tokyo2011実況まとめ - NAVER まとめ http://matome.naver.jp/odai/2132245039295758901 埋め込みコード：録画 <ifr... 続きを読む

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

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

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

NAVER　Nドライブ : 大容量のオンラインストレージアプリ！Androidアプリ1627

2011/05/12 16 users オンラインストレージアプリ Androidアプリ大容量

アプリの特徴 10GBのオンラインストレージが無料で利用できる「NAVER Nドライブ」公式アプリ Android端末－PC間で簡単にファイルを共有端末本体の容量不足の解消やデータのバックアップにも最適『NAVER　Nドライブ』は、10GBの大容量オンラインストレージが魅力の「NAVER Nドライブ」公式アプリです。オンラインストレージのアプリとしては『Dropbox』が有名ですが、『NAV... 続きを読む