クリックしやすいターゲットエリアを実装する #web_ui_devs
この記事は、「Web UI 実装勉強会 #1」での同タイトルの発表をもとにしたものです。 ターゲットエリアを広げる工夫 リンクやボタンなどのUI要素を押したときに反応する領域のことをターゲットエリアと呼びます。素朴に実装すれば、その要素の視覚的なサイズがそのままターゲットエリアになります。 しかし場合によっては、これではあまり使い勝手が良くならないことがあります。要素自体のサイズが小さいと押すことができる領域も狭くなるので、その分正確性が求められて押しづらくなります。 そういうときには、視覚的なサイズよりも余分にターゲットエリアを広げるテクニックを使います。paddingプロパティを使って要素自体のサイズを広げつつ、レイアウトが崩れないように同じ大きさのネガティブマージンを適用します。 a { margin: -4px; padding: 4px; } 一方、プレーンなテキストリンクと違っ
文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
リンクの下線の視覚的ノイズを軽減する
“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。 下線がディセンダーと重なることで文字の判読性や可読性が損なわれる コンテンツの邪魔になって読み手の気を散らす これは特にディスレクシアなど、認知機能に困難があるユーザーへの影響が大きい。 加えて、デフォルトの下線は美観としても好ましくないという評価を受けることが多い。視覚的に煩雑な印象を与えるからという、上記と類似する理由によるものだろう。 件の記事では、そうした問題を踏まえた改善案が紹介されている。これを参考に、このサイトでは次のような実装を採用した。 html { /* 下線と文字の距離を離す */ text-underline-offset:
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集 ｜ 向壁虚造
タイトルや見出しに視覚的な趣向を凝らしたいなら「グラデーション」がおすすめです。 例えば下図のような具合に、見出しにグラデーションをかけるだけで、ページ全体に華やかな印象が加わります。 HTML＆CSSで一工夫するだけで、彩り豊かなグラデーション文字を作ることができます。 今回は、HTML＆CSSで文字にグラデーションを付けるテクニックをご紹介したいと思います。 また、記事の後半ではコピペで実装できるサンプルデザインも掲載しているので、すぐにグラデーション文字を使いたい方はどうぞ。 １．CSSで文字にグラデーションを付ける手順 まず、CSSには一発で文字にグラデーションを付けるようなプロパティや値はありません。 グラデーション文字を作るには複数のコードを組み合わせる必要があります。 具体的には、以下の３つのプロパティ・値を使って、グラデーション文字を描画していきます。 background
CSSだけで作る超軽量ポップアップモーダルウインドウ（スマホ対応） - Qiita
<div class="popupModal1"> <input type="radio" name="modalPop" id="pop11" /> <label for="pop11">クリックでポップアップ</label> <input type="radio" name="modalPop" id="pop12" /> <label for="pop12">CLOSE</label> <input type="radio" name="modalPop" id="pop13" /> <label for="pop13">×</label> <div class="modalPopup2"> <div class="modalPopup3"> <h2 class="modalTitle">CSSだけのポップアップモーダル</h2> <div class="modalMain"> <p
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTMLピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"> <section class="area">1</section> <section class="area">2</section> <section class=
Get Started with the Google Fonts API | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy and paste the following HTML into a f
prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io
Intro macOS Mojave は OS レベルで Dark Mode に対応した。 しかし、Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。 Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。 これを用いた DarkMode 対応と、本ブログの DarkMode 対応、および策定中の User Preference Media Features について解説する。 Update 画像の対応について追記した Code Block の対応について追記した 2019/1 に Chrome の Intents が出された。 Intent to Implement: Media Queries: prefers-color-scheme feature In
[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita
この記事について CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。 タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`) See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen. カップとかストローとかもCSSで作ってみた。 せっかくなのでカップとかのところも解説するぞ。 (アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜) 全国のタピオカ好きのみんなに見てほしい・・・・ カップのCSS カップを構成している要素は大きく全部で5つ。 ・カップ ・カップの蓋 ・カップの中身 ・ストロー ・タピオカ こんな感じにパーツを分けて作ったよ。 パーツごとに作
![[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/906db1b90be9801bc25f75431bb2d98811c6b740/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQ1NTJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJTVEJUUyJTk3JThGJUUyJTk3JThGJUUyJTk3JThGQ1NTJUUzJTgxJUE3JUUzJTgyJUJGJUUzJTgzJTk0JUUzJTgyJUFBJUUzJTgyJUFCJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUI1JUUzJTgyJThGJUUzJTgxJUI1JUUzJTgyJThGJUU2JUI1JUFFJUUzJTgxJThCJUUzJTgxJTlCJUUzJTgyJThCJUUyJTk3JThGJUUyJTk3JThGJUUyJTk3JThGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zYTBiMjhmMGU0MDUyZDU5NGRkNGM3YzlkZmJjMDhiMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Decfadd57a3dd29570ae6092cea568f09)
CSSでドット柄（水玉）を作る方法 | コトダマウェブ
円形グラデーションというのはこんな感じのグラデーションです。 ここでは円形のグラデーションをスタイルシートで実装する方法について見ていきます。 線形グラデーションについて知りたい方は下記の記事もご参照ください。 radial-gr... radial-gradient関数を理解していないと、この先の話がよく分からないと思いますので、気をつけてくださいね。 それでは、最初にドットをひとつだけ作ってみます。 See the Pen dot01 by kenichi (@ken81) on CodePen. まずは、分かりやすくするために要素のサイズとbackground-sizeの値を同じにしました。radial-gradientを使って中心の色を黄色に、外側の色を青に指定してあります。 余談ですが、正方形の要素にぴったり収まる円を作るには、radial-gradientでグラデーションの終了
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
CSS Grid Layout を極める！（基礎編） - Qiita
CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS Grid Layout は現時点（2017年4月）ではまだ新しいモジュールのため、対応ブラウザが少ないです。 （Fx52～、GC57～、Safari10.1～、Opera44～ など） Can I use... CSS Grid Layout しかし、2017年3月にはFirefox, Google Chrome, Opera, Safari などが CSS Grid Layout 対応のバージョンをリリースしており、今後に対応ブラウザが急増するのは確実なので、ぜひともマスターしておきたいです。 この記事は4部構成の中の 基礎編 です。 CSS Grid Layout を極める！（基礎編） ←これ CSS Grid La
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3.CSS関連
🎃:_ko::_ha::_ku::_ni::_lya::_n:🎃 (@gckohaku)
CSSグラデーションで作った背景パターンのサンプル - NxWorld
CSSで複数の属性セレクタを指定する - Qiita
【CSS】input type=”text” に width 100% を指定するとはみ出る原因と対処方法 – 熊本のWEB制作SEO | poroaブログ
ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字【2017/7/28追記】 - Qiita
