[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ
サイトのパンくずやフォームのステップでよく見かける、ブロックに三角形の山形を隣接させたリンクの列をCSSで実装するテクニックを紹介します。 CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します。 Oh, the Many Ways to Make Triangular Breadcrumb Ribbons! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 三角形を使ったパンくずのナビゲーション HTMLの構造 CSS: ベースのスタイル CSS: 三角形の実装方法 オプションのバリエーション 他に検討すべき点 三角形を使ったパンくずのナビゲーション 階層を表示したパンくずのナビゲーションで見かける、各ブロックに三角形の山形を持つ隣接するリンクの列を作成する方法を見て
![[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8181f165a4130a8445a88ef3ac4f80ca8d234b15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019050901.png)
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する
Result いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで出来るところまでやってみた、的なもの :checkedや:notなどの疑似要素をふんだんに使って実装されていました これだけだと実用性はないけど単純に凄いなぁと感心したので備忘録 css/* smart-css todo boilerplate */ #smart-css:checked ~ #todos .dumb-thing { display: none } #smart-css:checked ~ #todos .smart-thing { display: block } #smart-css:checked ~ #todos .submit-unchanged { display: none } #smart-css:checked ~ #todos .todo-item { color:
フォームの内容を元に任意のUIに遷移
Result フォームの内容から別のUIに遷移する、みたいなの やってる事は割とシンプルで、作成ボタンをクリックするとレイアウト全体を包括する親ブロックのclassを別のclassと入れ替えてCSSで見た目を整えてるだけです サンプルはバッジっぽいUIですが他にも応用できますね 何かに使えそうかなぁと思ったので備忘録です 例えば非予約なイベント会場等で来場者カードを作る時に来場者にタブレットで入力してもらうと来場者カード発行の手続きプロセスを簡略できる、とか jQuery//ボタンクリックで全体のclassを入れ替えて、フォーム内容とカードUIをトグル $(".js-switch").click(function() { $(".main-content").toggleClass("as-card"); }); //画像を送信前にプレビューする var reader = new File
[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css
フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。 フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。 select-css -GitHub select-cssの特徴 select-cssのデモ select-cssの使い方 select-cssの特徴 select-cssは、デスクトップ・スマホの各ブラウザで一貫して美しく見せるスタイルシートを適用します。IE 9以前など、一部のブラウザでは、アイコンのデザインはサポートされていませんが、コントロール可能で通常の目的には十分に適しています。
![[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css](https://cdn-ak-scissors.b.st-hatena.com/image/square/508788eb3e05c0be3c6bd36e3b8c8bf9ea7c50ae/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019022101.png)
Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar
サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。 ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコンポーネントが揃っています。
その名の通りのfilter()で絞り込み。（配列とかおれおれAdvent Calendar2018 – 12日目） | Ginpen.com
const users = [ { id: 101, name: 'Alice', active: true }, { id: 102, name: 'Bob', active: false }, { id: 103, name: 'Charlie', active: true }, ]; const activeUsers = users.filter((v) => v.active); console.log(activeUsers); 仕様 配列のこれ系のメソッドと同じです。 Array.prototype.filter() – JavaScript | MDN newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) 引数 filter() は引数に、関数オブジェクト callback(element
CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
複数のsubmitボタンをonsubmitで判定する方法: 小粋空間
複数のsubmitボタンをonsubmitで判定する方法を紹介します。 １．問題点 下記のように、複数のsubmitボタンが実装されたフォームがあります。 <form name="test" method="post" action="./test.cgi"> : <input name="a" type="submit" value="aaa" /> <input name="b" type="submit" value="bbb" /> <input name="c" type="submit" value="ccc" /> </form> フォーム送信時にonsubmit属性などを使って、どのsubmitボタンが押されたかを判定したいのですが、方法がわかりません。 ということで、複数のsubmitボタンをonsubmitで判定する方法を紹介します。 ２．複数のsubmitボタンをon
便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
CSSスニペット：CSSでinputに入力したらlabelのスタイルが変更されるようにする | かちびと.net
Result :placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします css.input-label { color: blue; } .input :not(*):placeholder-shown, .input-label {/*入力されたとき*/ color: green; } .input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/ color: red; }html<div class="input"> <input class="input-control" id="input" placeholder="hogehoge" /> <label class="input-label" for="input">入力すると色が変わります</label> </div>
FreeFrontend
In the ever-evolving landscape of web development, the search box remains an integral element of user experience. A well-crafted search box can make navigating a website effortless and enjoyable. To help you stay at the forefront of web design trends, we're thrilled to present the latest edition of our collection. This collection represents the culmination of countless hours spent scouring the web
CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net
Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css/* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; text-align: center; padding: 9px 4px; background-color: #03A9F4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0
[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック
フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。 シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビジュアル化されています。 <ol class="progress-bar"> <li class="is-active"><span>Objective & Template</span></li> <li><span>Options</span></li> <li><span>Step</span></li> <li><span>In a Nutshell</span></li> <li><span>Step</span></li> <li><span>Step</span></li> <li><span>Launch Date</span></li> <li><
![[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/df461a26bab475edec4a0c05094f3ffa87cb2302/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018091701.gif)
Credit Card Payment Form
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
任意のテキストでチェックボックス
Result 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます css.text-checkbox { display: block; } .text-checkbox input { display: none; } .text-checkbox span { font-family: monospace; } .text-checkbox .checked { display: none; } .text-checkbox :checked ~ .checked { display: inline-block; } .text-checkbox :checked ~ .unchecked { display: none; }html<label class="text-checkbox"> <input type="checkbox" name="one"> <
なるべく強固なパスワードを入力して貰う為のフォームのサンプル
Better Password Form Codepenでパスワード設定の際のフォームで、より強固なパスワードをユーザーに入力してもらうよう促すUIが参考になったので備忘録。一定の条件を満たしたパスワードで設定完了ステップに進めるようにする、というもの。サンプルでは一定の文字数以上であり且つ、大文字、小文字、記号を含めたパスワードでないと次のステップに進めないようにしてあり、画面遷移後は入力したパスワードを再入力して設定完了プロセスが終了します。パスワードは強いものを期待出来るかもしれませんね。 現在でも同じプロセスは既に存在しますが、分かりやすくする事である程度ストレスを軽減できる気がします。とはいえ、それでもやはり面倒な入力フォームはユーザーにとってはストレスとなりやすいですね。認証システムは今後も進化していく事を求められているでしょうし、既に顔認証や指紋認証なども導入され始めているの
caretposition.js - テキストエリアの文字入力位置を取得 MOONGIFT
最近、テキストエリアを拡張するようなライブラリが増えています。その一つに入力補完機能が挙げられます。IDEではよく見られる機能ですが、入力箇所（キャレット）を正しく取得しないと、逆に文字入力を妨げることになるでしょう。 そこで使ってみたいのがcaretposition.jsです。テキストエリアにおけるキャレットの位置をXY座標で取得できます。 caretposition.jsの使い方 デモです。左下にキャレットの座標が表示されています。 こんな感じで入力中も変化しています。 別なデモです。キャレットの位置に入力補完用のラベルを表示しています。 入力した後に戻ってもちゃんと追従されます。 caretposition.jsを使うとキャレットの位置がXY座標で取れますので、後はそれを使ってCSSで情報を表示すればいいでしょう。日本語特有の文字変換にも追従するので様々な利用が考えられそうです。 c
複数inputに入力された数字の合計を表示する
Result jQuery$("#myTable").on('input', '.txtCal', function () { var calculated_total_sum = 0; $("#myTable .txtCal").each(function () { var get_textbox_value = $(this).val(); if ($.isNumeric(get_textbox_value)) { calculated_total_sum += parseFloat(get_textbox_value); } }); $("#total_sum_value").html(calculated_total_sum); });複数inputに入力された数値の合算を出します。 簡易的な見積もりとかデータを扱う時に使えそうでしょうか html<table id="myTabl
CSSだけでcheckboxのチェック数をカウントする
Result content: counter;を使ってチェック数をカウントする、というもの JSによるもののように応用は効きませんが、数えるだけなら css.languages {/*リセット*/ counter-reset: characters; } input:checked {/*チェックされたらカウント*/ counter-increment: characters; } .total:after {/*疑似要素で任意の場所にカウント結果を表示*/ content: counter(characters)"個の項目をチェックしています"; }html<div class="languages"> <div class="input-wrapper"> <input id="foo" type="checkbox"><label for="foo">foo</label> </d
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
