モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
Ink - Interface Kit
Download 3.1.10 This file contains CSS, JavaScript and their minified versions, images, fonts and the cookbook. Download with source This file contains SASS and JavaScript source code, distribution versions and the build tools config files. Github If you prefer, head on to our github repository, fork the project and help us create an even better Ink. Responsive from the ground up Our grid system i
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
[Bootstrap]チェックボックスでトグルボタン | tech.sinayaka.com
Bootstrap(ver.3)でのトグルボタンは下記のようにカンタンに表現できます。 ※iframeのsrcdoc属性を使用しているので見えないヒトもいるかもしれません＞＜ ご注文メニュー しかしながら、iPhoneでの利用の際、タップすると「:hover」にあたるcssが発動してしまい、トグルの状態がなんか変になります。※しつこくiOS5を使っているからなのでしょうか？ ※ラーメンとギョーザを選んだ後、ギョーザを解除した瞬間の衝撃画像 仕方が無いのでその項目だけ、:hover時に背景色を透過にするスタイルを適用する必要がありそうです。 <style> #menu label.btn:hover:not(.active) { background-color: transparent; } </style> ※:not(.active)指定の意味は、ボタンを押し込んだ(.activeクラ
CSSだけで作られたToggleボタン5つのデザイン 『Pure CSS toggle buttons』 | 9ineBB
javascriptを使わずCSSだけで実現したtoggleボタンと5つのデザイン checkboxを使ってtoggleボタンを実現しています デザインはLight、IOS 7、Skewed、Flat、Flipの5種あります、スマートフォン向けのボタンとして利用出来そうです ボタンのデザインの参考にも、チェックボックスを使ったtoggleボタンの参考にもGood コードをダウンロードする DOWNLOAD
CSSでトグルボタンを作ってみた。（CSS おれおれ Advent Calendar 2012 – 18日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 18日目 チェックボックスと同じ機能を持つボタンです。押すと引っ込んだ状態になり、もう一度押すと出っ張った状態になります。 なんか現実世界のスイッチで使われてたりしますね。あれです。 押すと引っ込むトグルボタン。 デモ 直接隣接接合子+を利用しています。A+Bで「A直後のB」を指す事ができます。 +は隣接兄弟接合子とか言ったりする事もあるみたいです。どういう日本語を充てるべきかわかりませんが、英語だと “Adjacent sibling combinator” です。 そこで:checkedと組み合わせて、「チェックの付いたチェックボックスの直後の<span>」のスタイルを操作しています。 チェックボックス本体はdisplay:noneで非表示にしています。画面には表示されていませんが、先の<span>が<label>の下に配
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/b65c96070203c58280a8cc237c7c66212a6dccb6/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2019%2F01%2F569359.jpg)
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
Accordion with CSS3
A simple content accordion using the adjacent and general sibling combinator and the :checked pseudo-class Checkboxes Radio Buttons Default Open (Checkboxes) About us Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. How we wor
スマートフォン用ページでリンク色の指定をする
Web制作に携わる社員が仕事中わからなくて調べたことやTips。 あんま厳しい突っ込みはなしにしてください。m(_*_)m 最近、スマートフォン用サイトを作成していて、リンク色でいろいろ悩んだので備忘録的に。 一般的にHTMLでリンク色を指定するときはCSSで a:link a:visited a:hover a:active で指定します。それぞれの意味とか、某ブラウザでは順番間違えるとうまく効かないとかありますが、それはまた別なハナシ。 スマホの場合、リンクというよりもタップしたときの反応色を指定します。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); ＊CSS3 RGBとalpha値を、それぞれ0～255、0～100で指定するわけです。 alphaが0ですので、上記の指定方法は色を見せない、タップしても色が変化しない記述です。 このあたり
iPhoneサイト向けCSSサンプル（CSS3）｜ConneLog｜ConneCre
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540
Bulma: Free, open source, and modern CSS framework based on Flexbox
