VSCodeで生産性を上げる

2024/06/16 281 users vscode ユーザーフレンドリー エディター 執筆 拡張機能

はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

2014/03/24 820 users

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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