CSS の element() 関数をご存知？
発端 きっかけは調べ物でこちらのブログを閲覧したときです。ぜひアクセスしてみてください。9 割以上の方は何も気づかないでしょう。 Chrome でのスクリーンショット なぜなら Firefox 以外のブラウザでは表示されないからです。 Firefox でのスクリーンショット Firefox でアクセスすると、“Woah! What's this?” と書いてある右側のミニマップに気づくはずです。 Firefox でのスクリーンショット これの驚くところは、なんと要素の状態がリアルタイムでミニマップにも反映されます。上記スクリーンショットはテキストを選択した状態ですが、ミニマップにもテキストが選択された状態で表示されていることが確認できます。 実装 どのように実装されているかというと、なんと CSS の element() 関数のみの 1 行で実装できます。そして、Firefox は ele
WordPress カスタム投稿タイプで日付別アーカイブページが表示されない時の対処方法 - by Takumi Hirashima
WordPress カスタム投稿タイプで年別や月別の日付別アーカイブページが表示されない時の対処方法を紹介します。 例えば、カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしている時に便利な方法です。 表示するテンプレートが不明な場合にも試していただけると幸いです。 カスタム投稿タイプで日付別アーカイブが表示されない原因 カスタム投稿タイプで年別アーカイブを表示する方法 カスタム投稿タイプで月別アーカイブを表示する方法 カスタム投稿タイプで年別アーカイブが表示されない原因 カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしていると、日付アーカイブページが表示されない場合があります。 原因は、「/%post_id%」指定で記事を作ると、記事URLが「例）example.com/news/1980」となり、日付別アーカイブと投稿ページとの判別できなくなるため、ア
【第4弾】少しのコードで実装可能な10のCSS小技集
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
CSS Gridでシンプルなカレンダー表示 | かちびと.net
Result CSS Gridを使ってカレンダーを作ろう、みたいなやつです。需要はあるのか分かりませんが個人的にちょっと必要になったのでメモ。 以前書いた凝ったものではなく、非常にシンプルなコードで作るシンプルなカレンダーです。 css .calendar {/*css gridで7列レイアウトを作る*/ display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-wrapper {/*カレンダーの幅*/ width: 280px; } .weekday {/*曜日部分*/ background: #eee; } ul {/*全体*/ list-style: none; margin: 0; padding: 0; text-align: center; } .first-day {/*月の最初の日の始まり。日曜なら1
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際のデモをご覧ください。 See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen. 1つ目の「DOM構造」と2つ目の「サイトマップ」の実装は、基本的には同じです。順番に見てましょう。 DOM構造のツリービュー HTML 1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は「DOM構造」では<code>、「サイトマップ」で
Did You Know the Ordered List Element Has Start and Reversed Attributes? | CSS-Tricks
And the start attribute can be added to begin the list at a number other than one, like this: <ol start="2"> <li>Apple</li> <li>Banana</li> <li>Pear</li> </ol> I’m not sure how I never knew about these properties! I guess I can see how they might come in handy in the future. There are plenty of times when we need to break up ordered lists here on CSS-Tricks with things like code blocks and having
WordPress 記事一覧から非公開記事を除外する方法 - by Takumi Hirashima
WordPress で記事一覧から非公開記事を除外（非表示）する方法を紹介します。 例えば、クライアント運用時「非公開記事の表示が紛らわしい」場合に便利な方法です。 サイト全体で非公開記事を除外する方法 メインループやサブループから非公開記事を除外する方法 サイト全体で非公開記事を除外する方法 投稿に「非公開記事」がある場合、管理画面へログイン中の時には記事一覧に「非公開記事」が表示されてしまいます。 非公開記事を非表示にするにはクエリをカスタマイズして、公開済みの記事のみを表示するようにすることができます。 例えば、アーカイブページ一覧から非公開記事を除外するには、function.php に次のコードを追加します。 /*【出力カスタマイズ】クエリーカスタマイズ、ループから非公開記事を除外 */ function custom_posts() { global $wp_query; if
YouTube Data API v3を使用して、YouTubeページと同じリストモジュールを作ってみた【LIGアドベントカレンダー20日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 こちらはLIGアドベントカレンダーの20日目の記事です。 LIGアドベントカレンダー2019は こちら！ 今回は、YouTube Data API v3を使って、YouTubeページと同じリストモジュールを再現してみたいと思います。 YouTube Data APIとは YouTubeが提供しているAPIで、動画やチャンネル、再生リストに関わる情報を取得して、自分のWebサイトやアプリケーションで使用することができます。 公式のドキュメントが用意されているので、詳しくはこちらをご覧ください。 https://developers.google.com/youtube/v3/getting-started?hl=ja 今回やること 動画URLの取得 サムネイルの取得 タイトルの取得 チャンネル名の取得 チャンネルURLの取得 再生回数の
フローチャート式のサイトマップ
Result フローチャート式のサイトマップというか、サイトマップにフローチャートを利用しただけです 横向きのフローチャートと同様に疑似要素で罫線を作って繋いでいきます ある程度少なめのコードでリストの数が増えたりモニタサイズが異なっても対応できるので汎用的な印象です 内容としては今更感満載のネタですが必要になった機会があったのでおさらい css.tree, .tree ul, .tree li { list-style: none; margin: 0; padding: 0; position: relative; } .tree { margin: 0 0 1em; text-align: center; } .tree, .tree ul { display: table; } .tree ul { width: 100%; } .tree li { display: table-
Filterizr - CSS3を使ったデータのフィルタリング、ソートライブラリ MOONGIFT
Web上で情報を並べて表示する機会はとても多いです。そんな時、常に発生するのが並び替えや絞り込みのニーズです。データを消したり、並び替えて表示したりするのは意外と大変です。 そこで使ってみたいのがFilterizrです。データのソート、フィルタリングに特化したライブラリです。 Filterizrの使い方 利用例です。カテゴリごとにデータが絞り込まれて表示されています。 カテゴリを変更するとデータが変わったり、並び順を変更できます。 ツリーデータにも使えます。 Filterizrはアニメーション部分にCSS3を用いているのでスムーズにアニメーションされます。jQueryとの連携もできるので、手軽に使えそうです。情報の絞り込み表示などで役立つことでしょう。 FilterizrはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 Filterizr | Crea
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする
Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css/* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } /* カウンター表示 */ li::before { content: counters(index, ".", decimal-leading-zero);/*先頭に0を付けて桁数を一定にする*/ text-align: right; font-weight: bold; min-width: 50px; padding-right: 12px; align-self
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」
Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシンプルなライブラリです。タッチデバイスにも対応可能となっています。機能もいたってシンプルで、並べ替え、並べ替えの禁止、スワイプの禁止などをオプションで設定可能です。導入も楽で良いですね。ライセンスファイルはありませんでしたが、スクリプトファイル内を見る限りはBSDっぽいです。 Slip.js
ラジオボタンとCSSを使ってソート機能を実装する - NxWorld
ラジオボタンとCSSを使って、特定の規則に従ってデータを並び替えるソート機能を実装するサンプルです。 ソート機能を実装しようと思ったらとりあえずJSを利用するのを考える人も多いと思いますが、本当に簡易的なものであればCSSでもそれっぽい動きが実装できます。 デモのようにページ上部にある「Reset」「Red」「Blue」「Yellow」をそれぞれ選択することによって、その下に並んでいる赤や青の要素が並び替えられる動きを実装していきます。 以前にもラジオボタンとCSSを組み合わせてちょっとした動きを実装するものとして「ラジオボタンとCSSを使ってレイアウトを切り替える」を紹介したのですが、今回も同様でラジオボタンの:checkedと間接セレクタ（~）を利用します。 まず、HTMLでソートの切り替えやリセットに利用するラジオボタン（<input type="radio">）とソートの対象となる
CSSだけでスマホ等ではアコーディオンになるレスポンシブな疑似テーブル
Result PCではテーブル、スマホやタブレットではアコーディオンになるやつ。もう少し使いやすくできそうですが・・ テーブルに見えますが実際はtableタグは使われておらず、display:table;で実装されていますのでタイトルには疑似と付けています css#table { display: table; width: 100%; background: #fff; margin: 0; box-sizing: border-box; } .row { display: table-row; } .cell { display: table-cell; padding: 6px; border-bottom: 1px solid #e5e5e5; text-align: center; } input[type="radio"], input[type="checkbox"] { d
CSSだけで簡易的なリストのソート
Result 選択したグループに該当するアイテムだけが上位にソートされる、という簡易的なもの Flexboxで並べて、radioボタンで作られたボタンにチェックが入るとorder:-1;が有効化され、上位に表示されます css.products__sort { display: flex; flex-flow: wrap; } .products__wrap { display: flex; flex-flow: wrap; margin: 25px 0 0; } .products .sort-radio { display: none; } .products .sort-radio[id="app"]:checked ~ .products__wrap .product[data-product-type="app"] { order: -1; background-color: #
WordPress 年別アーカイブリストの表示に年を追加する方法 - by Takumi Hirashima
WordPress で年別アーカイブリストの表示に年を追加する方法を紹介します。 例えば、年別アーカイブと月別アーカイブを両方表示する時に便利な方法です。 年別アーカイブリストの表示方法 アーカイブリストに「年」を表示する 月別アーカイブリストの併記にも対応した正規表現での対処方法 年別アーカイブリストの表示方法 まずは wp_get_archives を使って年別アーカイブリストの表示方法を紹介します。 例えば、投稿タイプ blog に投稿数を表示した年別アーカイブリストを表示する時は、 次のコードをテンプレートに追加します。 <ul> <?php wp_get_archives( 'post_type=blog&type=yearly&show_post_count=1' ); ?> </ul> リストは次のように表示されます。 2019(1) 2018(2) 2017(3) アーカイ
CSSのみでMasonryライクな段組レイアウト
Result 過去はJSで何とか実装していたPinterestのようなMasonryレイアウトは、column-widthを使ったCSSのみで簡単に実装可能となりました。 column-countも併用すればカラム数の指定も出来ますね。 cssarticle {/*CSSカラムのセッティング*/ column-width: 7em; column-gap: 1em; } section {/*各ボックスのスタイル*/ display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #efefef; }html<article> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>Lor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-forを使ってリストの中身とリンク先を個々に出力したい
12 CSS Lists Styling - csshint - A designer hub