![CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e9ec23891e667d3057315bb0b4d1df2f5077461/height=288;version=1;width=512/https%3A%2F%2Fwebmist.info%2Fwp-content%2Fuploads%2F2015%2F10%2Fcss3.jpg)
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
最初 :first-child 最初の要素(親要素から見て、子要素すべての最初) デモ :first-of-type ある要素の最初(親要素から見て、ある子要素の最初) デモ 最後 :last-child 最後の要素(親要素から見て、子要素すべての最後) デモ :last-of-type ある要素の最後(親要素から見て、ある子要素の最後) デモ 1個だけ :only-child 1個だけ子要素がある(親要素から見て、子要素が1個だけある) デモ :only-of-type 1個だけある子要素がある(親要素から見て、ある子要素が1個だけある) デモ X番目 :nth-child(X) X番目 デモ:5番目 :nth-of-type(X) ある要素のX番目 デモ:5番目 :nth-child(Xn) Xの倍数 デモ:2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ:2の倍数
Webサイト制作の時に必ず使用するちょっとしたスタイルシートの小技が紹介されているサイトをまとめてみました。 どのサイトも「なるほど!」というような非常に便利な小技がたくさん紹介されていますのでブクマ必須です! 地味に使えるCSS小技のメモ&サンプル集 http://kachibito.net/web-design/css-tips-and-tricks-sample.html 「あるある!」と言いたくなるようなシチュエーションばかりで、今までどうしていいかわからず妥協したり、複雑に処理していたものが簡単に解決しそうです。 このページで紹介されている小技一覧 1.floatで並べたリストのセンタリング 2.min-heightをクロスブラウザにする 3.floatとネガティブマージンのやつ 4.liに付けたborder-topの最初だけ消す 5.cssのみでツールチップ 6.cs
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します! ↑私が10年以上利用している会計ソフト! CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ!ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く