CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う
Webクリエイター 小林さんのCSS TIPS集
小林 I Webデザイナー @pulpxstyle 現場で使用してきたHTMLやCSSのTipsをモーメントにまとめました。フリーランスの私がこれまでの制作で実際に使用してきたもののみ紹介してます。 あなたの現場でも使えるものがあると思いますので、ぜひご利用ください！ ⚡️ "現場で使えるHTML&CSS Tips ①" twitter.com/i/moments/7819… 2020-04-09 09:35:06 小林 I Webデザイナー @pulpxstyle ダークモードを適用する時は『prefers-color-scheme:dark』とメディアクエリで指定する。 アプリのダークモード化が進み利用者は多い。サイトのニーズも増える可能性があるので是非おさえておきたい。 実際にコーディングしてみましたが予想より工数が多いので、予算は別途必要になりそうですね。 pic.twitter.
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。 バグが発生するブラウザ ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
折り返し位置を word-break: keep-all で制御する - Qiita
細かい条件について Breaking is forbidden within “words”: implicit soft wrap opportunities between typographic letter units (or other typographic character units belonging to the NU, AL, AI, or ID Unicode line breaking classes [UAX14]) are suppressed, i.e. breaks are prohibited between pairs of such characters (regardless of line-break settings other than anywhere) except where opportunities exist due to di
CSSの治安を取り戻す – 最初の30分
Gaji-Labo では稼働中のウェブサービスやウェブアプリケーションの CSS の改善するお仕事をいただくことがちょいちょいあります。 その際「CSSのリファクタリングなんて請けてくれる会社聞いたことない」というような趣旨のお話をぽろっといただきます。（実際にはほかにもやってる会社さん沢山あると思いますが、たしかにあまり聞かないですね） 今回は初めて入るプロジェクトで CSS の改善をする際、最初に CSS のどこを見るかまとめてみました。 CSS の得意な方が参加していないチーム向けの軽い内容です。ここに上げているような箇所に思い当たりがある場合、少しずつ CSS の実装にストレスを感じはじめているかもしれません。 真っ先に見極めることプロジェクトに参加して CSS が見られるようになり、手元の開発環境も無事整ったとき、僕が最初に気にする点です。 CSS はこうなってると大変というポイ
他のCSS本とはかなり異なる！現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド
私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。 本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。 本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。
PRECSS - Manage your CSS with prefixes.
Manage your CSS with prefixes. <header class="ly_header">...</header> <!-- layout --> <main class="ly_cont"> <div class="bl_jumbotron"> <!-- block module --> <h2 class="bl_jumbotron_ttl">PRECSS</h2> <p class="bl_jumbotron_txt hp_mb20">CSS with prefixes.</p> <!-- helper --> </div> </main> <aside class="ly_side"> <a href="#" class="el_btn">Try PRECSS</a> <!-- element module --> <a href="#" class
CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水
css hacks 2022 ( IE11 / Edge / Chrome / Safari / Firefox ) - Qiita
css hacks for IE11 の続きです。 ブラウザ全般も検討しました。 2022年01月01日時点のhackです。 2020年01月20日時点のhackです。 2019年06月01日時点のhackです。 2018年01月01日時点のhackです。 2017年07月30日時点のhackです。 ご利用は自己責任の上でお願い致します。 demo code /* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */ :not(:is(*)), .selector {} /* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */ :not(:where(*)), .selector {} /* Edge(Chromi
CSSを書く前にスクロールバーを表示しよう
これを読むあなたはCSSを書く方だと思いますので、お尋ねします。 あなたは普段、幅と高さを持つ、クラシカルなスクロールバーを表示していますか？ していないのだとしら、それはどうしてなのでしょう。 OSの初期設定から変えていないだけかもしれません。スクロールバーを醜いものだと考えていて、スクロールするときだけに出現する控えめなスクロールバーを好んでいるからかもしれません。 あなたがどう考えていようと、現実にはそのような、ユーザーの操作に応じてオーバーレイで表示されるスクロールバーが選択できない環境も存在します。 そういった環境では、スクロールバーはウェブページ上で幅と高さを持ち、レイアウトに影響を与えます。 それを忘れて書かれたCSSは、オーバーレイ・スクロールバー前提のレイアウトであったり、不必要なスクロールバーの存在を生み出してしまうことがあります。 スクロールバーを表示、つまり、ウェブ
CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック
WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for more than just CSS transitions by Kilian Valkhof 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アニメーションとトランジションに組み込まれているイージング グラデーションをCSSでより美しく実装するテクニック シャドウをCSSでより美しく実装するテクニック 見栄えのよいWebサイトを制作する はじめに アニメーションの実装にイージング曲線を使用して、より繊細
意外と知らないvisibilityの活用方法！ | フロントエンドBlog | ミツエーリンクス
※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる（値がhiddenやcollapaseになる）と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla
CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方
Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F
CSSの継承〜親から子へ受け継がれる意志〜 - Qiita
アドベントカレンダー初挑戦！21日目（プラコレ的には10日目） こんにちは！横田です。 不適切なところがありましたらご指摘いただけると幸いです。 よろしくお願いします！ 今一度見直したい「継承」 フロントをやっていて、そこまで日は浅くないのですが、これまであまりcssプロパティの「継承」について深く考えたことがありませんでした。 親要素からプロパティを指定していって、子要素で効いていなかったらまた指定しよう、ぐらいでした。 しかしたびたび思うのです。「またcolor: #555;って書くのか...」と。 そこで、継承についておさらいしてみました。 Sassなどでスマートに書ける今、変数や関数をつかってかっこよく書けるようになりましょう！ 継承とは 親要素のプロパティの値が、子要素に引き継がれることです。 プロパティによって継承されるものとされないものに分かれます。 継承されるプロパティ 使
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイト…
z-index との安全な付き合い方 | Basicinc Enjoy Hacking!
z-index と聞いてヴェェー！！って思うみなさん、こんにちは。 ベーシック アドベントカレンダー 9日目（大遅刻）です。 今回は z-index と安全に付き合うおはなしをします。 z-index: 9999; というラノベ主人公みたいな値があまりよくないと感じつつも、予期せぬ要素同士で起こる z-index バトルをどう回避すればいいのか、もにょもにょしますよね これを解決していきます。 私の脳内で運用しているだけなので、提案として「ふーん」程度に受け止めていただければと思います。 結論は『 z-index を設定した親要素（近い先祖要素）に isolation: isolate; をする』です。 z-index の苦しみ 『この要素を前面に出したい』 .tuyoi { z-index: 1; } 『この要素を必ず最前面に出したい！』 .motto-tuyoi { z-index:
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540
MindBEMding と近代 Component 設計の共通点 - Qiita
