奈良市公式サイトのパンくずが斜め上を行くヤバさな件 | Seamonkey-Director

2014/03/24 820 users

住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな～って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくず食い過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事... 続きを読む

WordPress初心者がハマリやすいエラーや問題とその解決方法 | コリス

2011/11/06 751 users WordPress テンプレート スタイルシート 全部 URL

WordPressでブログやサイトを作成・運営する際に役立つ、ハマリやすいエラーや問題とその解決方法を紹介します。 下記は各ポイントを意訳したものです。 テーマとテンプレートの違いは？ 画像が表示されない URLを全部書くのが面倒 パンくずを設置したい ページごとに異なるスタイルシートを適用したい 新しい記事を表示したい テーマとテンプレートの違いは？ 問題 WordPressのテーマファイルとテ... 続きを読む

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル | コリス

2010/11/03 601 users コリス 色相 class チュートリアル CSS

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><... 続きを読む

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

2013/10/27 486 users コリス NAV CSS アイコン 勉強

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

[CSS]パンくずの実装はどのようにするのがよいかの考察 | コリス

2010/11/10 396 users CSS-Tricks コリス ul要素 チュートリアル CSS

パンくずは何要素で実装していますか？　ul要素？　ol要素？　p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 ... 続きを読む

掃除機は、ダイソンよりルンバさんより、マキタの充電式クリーナー - プログラマになりたい

2013/11/21 388 users 一因 片手 まきた ダイソン プログラマ

小さな子供がいるので、食事の時にパンくずなどをボロボロとこぼして家族のストレスの一因となっていました。そんな時に勧められて購入してみたのが、充電式クリーナーです。これが中々良かったです。勧めてくれた人は、以下の３点を強調していました。 充電式クリーナーのお勧めのポイント軽くて使いやすい手軽に使えて便利ちょこっと使いが出来る 　まず軽さですが、重さが1kgと片手で簡単に扱えるレベルです。一般的な掃除... 続きを読む

最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills | コリス

2014/04/16 387 users Refills コリス ブッダ モーダル アコーディオン

ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。 Refills Refills -GitHub デモでは、さまざまなコンポーネントの動作が確認できます。 ナビゲーション 下に半分見えてるのは、打ち出しコンテンツ 各デモの「Show C... 続きを読む

Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos

2007/06/27 379 users youmos opacity Apple ペー 半透明

Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。 半透明のアルファチャンネルを持つPNGイメージを使う方法と、CSSでopacityを指定する方法のどちらでも同じようにデザインできます。IEはペー... 続きを読む

パンくずのデザイン集と概要やデザインのポイント | コリス

2010/08/17 315 users 実装 特長 設置 判断基準 コリス

Tweet ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。 Breadcrumbs Design Show [...] 続きを読む

鳩になれる海外のゲームがヤバい「ハト好きの方へ」「鳩の見た目したヤギ」 - Togetter

2019/06/16 277 users ふん 爆弾 pic.twitter.com タクシー やぎ

鳩になれる海外のゲーム パンクズ食べたり、タクシーにフンをかけたり、人間に体当たりしたり、爆弾落としたりできる pic.twitter.com/fQ7xIn9ShG 続きを読む

[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート | コリス

2009/02/11 241 users アロー コリス グラデーション CSS リスト要素

グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 Simple scalable CSS based breadcrumbs demo パンくずはリスト要素で実装されており、日本語の使用も可能です。 パンくずのHTML Home Main section Sub section Sub sub section T... 続きを読む

[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb | コリス

2009/02/17 233 users レベ コリス アニメーション 既存 スクリプト

jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベ... 続きを読む

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

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

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

[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック | コリス

2018/02/26 211 users コリス border 矩形 height width

パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 ... 続きを読む

HTML5のパンくずマークアップについて | HTMLMEETING

2011/10/06 124 users トロント Working Draft 先々週 夜中 毎週末

トロントでワーホリ中のしまえるです。 HTML会議は毎週末の夜中に4人でひっそり開催中です。とっても楽しい！ 先々週に盛り上がった内容、HTML5でのパンくずのマークアップの話をします。 W3Cのサイトを見るとこう書いてます。 2011年10月5日時点でののWorking Draftを見ました。 4.13.2 Bread crumb navigation This specification do... 続きを読む

米国で「パン粉」が人気 - WSJ.com

2013/07/03 123 users WSJ.com パン粉 マカロニ 米国 シェフ

By SARAH NASSAUER 米国人はチキンフィンガーやフライもの、それに夕食を短時間で作れる方法が好きで、この結果、質素な日本の食材の販売が増えている。ブレッドクラム（パンくず）で作る「パン粉」だ。 シェフや食品メーカーなどによると、米国のものに比べて少し大きく、ふわふわしていて、さくさく感のあるパン粉は油で揚げなくてもフライのさくさく感が出る。このためチキンフィンガーなどの料理やマカロニ... 続きを読む

[WordPress]コピペでOK！カテゴリー、タグ、パンクズを呼び出すサンプルコードいろいろ

2014/01/13 114 users コピペ WordPress 参考 タグリンク 説明

WordPressの手っ取り早いサンプルコード集！ 以前、WordPressでカテゴリー、タグリンクの作り方を紹介する記事を書きました。今回はその記事内容を踏まえた、コピーするだけで使えるサンプルコードをいくつか、紹介したいと思います！よかったら参考にしてみて下さい！ [WordPress]初心者でもカテゴリー、タグリンクを1から作れるようになるための説明いろいろ 投稿日：2014.01.11 W... 続きを読む

[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs | コリス

2013/05/08 113 users jQuery コリス 一行 スクリプト 多階層

多階層をもったサイトでは、パンくずも長くなりがちです。 テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。 jQuery rCrumbs -GitHub rCrumbsのデモ rCrumbsの使い方 rCrumbsのデモ 一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。 主要なモダンブラウザをはじめ、IE8+でご覧ください... 続きを読む

[Å] パンクズをGoogleの検索結果に表示させる方法を紹介！あっさりと設置できました！！ | あかめ女子のwebメモ

2013/07/09 96 users Webメモ Google 女子 検索結果 ウェブマスター

パンクズをgoogleの検索結果に表示させる方法をご紹介。あっという間に設定ができるので参考にしてみてください。Googleで検索をした時に検索結果と一緒にパンくずが表示されているのはご存知でしょうか？ブログを運営している方の方はGoogle ウェブマスターツールにブログを登録していると思いますが、そのウェブマスターで気になる内容を見つけたので設定してみました。見事に私のブログも検索結果にパンクズ... 続きを読む

ブログで不思議なこと。どうして、一定確率で「相手が気づいていなそうな瑕疵」をエントリー内で発見すると、喜んで、何か言いたくなる人がいるんだろう - 勝間和代が徹底的にマニアッ

2018/04/02 67 users 勝間和代 Twitter ブクマ 瑕疵 シンク

2018 - 04 - 02 ブログで不思議なこと。どうして、一定確率で「相手が気づいていなそうな瑕疵」をエントリー内で発見すると、喜んで、何か言いたくなる人がいるんだろう ブログ整備 小ネタ ブログを更新していて不思議なのは、どうも高い確率で、 「ブクマやTwitterで一家言ある人」 が登場することです。 パンくずをシンクで切るアイデアを紹介すると「下水道を荒らすんじゃないか」とか、 車載にモ... 続きを読む

ウェブデザイン用の各エレメントをフラット・ソリッドなど複数のスタイルに展開させたPSD素材 -3in1 UI Elements | コリス

2013/10/10 67 users コリス elements ソリッド PSD素材 UIエレメント

ナビゲーション、パンくず、ドロップダウン、ボタンなど、UIエレメントのデザインをそれぞれフラットとソリッドと立体感のあるバルキーの3パターンに展開させたPSD素材を紹介します。 フラットが好き、ソリッドが好きでそのまま使うもよし、比較して勉強するのにもよし、のちょっといつもとは趣向の違った素材となっています。 3 in 1 User Interface Elements Kit Part 1 (F... 続きを読む

[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ | コリス

2019/05/09 59 users シャドウ グラデーション コリス バリエーション 山形

サイトのパンくずやフォームのステップでよく見かける、ブロックに三角形の山形を隣接させたリンクの列をCSSで実装するテクニックを紹介します。 CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します。 Oh, the Many Ways to Make Triangular Breadcrumb ... 続きを読む

魔女殺しの味を覚えた「ヘンゼルとグレーテル」！ 『Hansel and Gretel: Witch Hunters』予告編公開 : Kotaku JAPAN

2012/09/06 56 users ヘンゼル グレーテル お伽話 道しるべ 死刑宣告

クロスメディア , トレイラー , ニュース , 動画 , 映画 , 書籍/コミック 魔女殺しの味を覚えた「ヘンゼルとグレーテル」！ 『Hansel and Gretel: Witch Hunters』予告編公開 2012.09.06 19:40 | by 傭兵ペンギン 魔女たちに死刑宣告！（裁判なし） パンくずを道しるべとして落としていくお話やお菓子の家が登場することでも有名なお伽話、「ヘンゼル... 続きを読む

奈良市公式サイトのパンくずリストがすごい件について、「ダサい」「狭くなる」以外にダメな理由を教えて欲しい - novtan別館

2014/03/25 53 users novtan別館 ダサい パンくずリスト すごい件 委任状

雑記, WebfacebookがどうとかなS賀県T雄市とどっちがひどいんでしょうかなあ。奈良市公式サイトのパンくずが斜め上を行くヤバさな件 | Seamonkey-Director基本的にはリンクをバックトラックして自動生成、リンク元が複数あったら全てのルートのパンくずリストを構築、なんでしょうね。例に上がっている委任状は確かにリンク元が多いせいでスゴイことになっちゃってますけど、パンくずリストを... 続きを読む

ページ内のパンくず的なものを実装するjQueryプラグイン・Sausage - かちびと.net

2011/04/16 51 users 語弊 net 目次 右端 こいつ頭

うまく説明出来ないんですがページ内の 右端にパンくずっぽいページ内リンクを 作成するjQueryプラグイン・Sausage。 視覚的に分かりやすくなり、コンテンツ内に 目次のようなものを置く必要も無くなります。 縦に長いページにせざるを得ないコンテンツ に良さそうです。 パンくずっていうとちょっと語弊あるかもですが他にいい表現が思いつかないのでこいつ頭悪いなと思ったらデモ見てください。URLに#も... 続きを読む