たかもそ
@takamosoo
Followers
5,428
Following
204
Media
1,099
Statuses
7,056
半年から一年先に差がつく｢Web制作の知って得する小技｣を発信（ポストは実験的なアイデア段階の内容で完全版はZennにまとめていきます）
ハイライト欄をチェック ↓
Joined September 2016
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Ohio
• 377158 Tweets
Springfield
• 269130 Tweets
Haitians
• 221061 Tweets
#JACKANDJOKEREP1
• 190910 Tweets
EP1 U STEAL MY HEART
• 160650 Tweets
#AppleEvent
• 62420 Tweets
Draghi
• 33047 Tweets
Namaz
• 32198 Tweets
PIERROT
• 16677 Tweets
海ちゃん
• 14264 Tweets
Princess of Wales
• 13188 Tweets
Culiacán
• 12502 Tweets
LISA SOLO 3RD ANNIV
• 11984 Tweets
Big Lots
• 11834 Tweets
Dreamcast
• 10924 Tweets
対象作品
• 10915 Tweets
Cowboy Carter
• 10470 Tweets
$INSDR
• 10218 Tweets
Pinned Tweet
CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。
6
60
326
📌JavaScriptでIEを判定するのにユーザーエージェントを使っていませんか？ユーザーエージェントのパースだと将来的な仕様変更により壊れる可能性があります。
そこでオススメしたいのが、Feature Detection（機能による判定）です。
1
168
800
✍ CSS Tips
12. 等幅の数字
13. :read-onlyの落とし穴
14. 文字サイズ拡大の防止
15. 新しいビューポート単位
↓ 続きます
2
66
732
Web制作の知って得する小技
#056
CSSでテキストが1行のときは中央寄せで複数行のときは左寄せにしてみた！
fit-contentで要素の幅を内容量と同じにして、marginプロパティで左右中央寄せしている。
幅が親要素いっぱいになったら左右の余白がなくなるので自然と左寄せになる。
2
75
739
Web制作の知って得する小技
#040
CSSでTwitchのようにカード部分にマウスホバーするとタイトルが長い場合はスクロールアニメーションさせて表示させるようにしてみた！
こういう動き実装できるときが一番楽しい。
↓ リプに続きあります。
2
54
602
TILTIPS
#3
CSSで数字を等幅にする。
・font-variant-numericプロパティにtabular-numsを指定する。
・古いブラウザにも対応するときはfont-feature-settingsプロパティを使う。
・カウントアップアニメーションなどのときに荒ぶらなくなる。
1
48
484
✍ CSS Tips
22. アスペクト比の固定
23. 形の沿ったテキスト配置
24. 属性セレクタのフラグ構文
25. calc()が必要ない関数
↓ 続きます
1
40
462
📌CSSのメディアクエリで未満を表すときはnot演算子を使いましょう。
780px未満だから1px引いた(max-width: 779px)とするのは間違いです。
0
55
453
TIL:TIPS
#037
遂にCSSだけでスクロールバーの幅を含まない画面幅とスクロールバーの幅を使いまわせるように！
従来の100vwだとスクロールバーの幅を含むため、親要素にoverflow: hidden;を指定する必要があったりで不便だった。
1
51
464
📌 HTML / CSS / JavaScript Tips
／
CSSやJavaScriptを読み込むときにCDNは使わない方がいい！？その理由と解決策！
＼
0
50
434
📌 CSS Tip
「CSSで手前にスクロール可能なエリアがあるときに背面のスクロールをさせないようにする方法」
overscroll-behaviorプロパティにcontainを指定することで、手前の領域がスクロール可能なときには背面のスクロールをさせないようにできます。
1
57
410
Web制作の知って得する小技
#064
M番目からN個の要素を選択するセレクタ
<ol>
<li></li>
<li></li>
<li></li>
...
</ol>
li {
&:nth-child(-n + 5 of :nth-child(3) ~ *) {
// 3番目の要素以降の5個を選択する
}
}
1
33
386
📌 今すぐ使える CSS テクニック
／
指定すると数字を等幅にできる！！
＼
「人」の部分に注目してみると指定なしでは荒ぶっていますが、指定ありでは等幅になっているおかげで自然になります。ただし、OpenType 拡張機能なのでフォント自体に等幅にできる指定が実装されていないとダメです。
0
40
364
TILTIPS
#021
CSSだけでスクロール量に連動したプログレスバー
↓リプ欄にデモ動画あります。
❶ animation-timelineプロパティにscroll(root)を指定して、ルート要素をスクロール連動の対象とする。
❷ keyframesで水平方向に0から100%に拡大するアニメーションprogressを定義する。
❸
2
39
356
Web制作の知って得する小技
#050
CSSで少しスクロールしたらふわっと表示されるページトップへ戻るボタンを作ってみた！
ポイントはanimation-rangeで、10dvbから20dvbの範囲でフェードインさせる。画面の高さを基準としているので、どのデバイスでもちゃんと動く。
1
28
320
✍ CSS Tips
5. 珍しいショートハンドプロパティ
6. Data URIの可読性を向上
7. 未満のメディアクエリ
8. スラッシュつきのゼロ
↓ 続きます
3
36
298
Web制作の知って得する小技
#038
<select>内に<hr>で区切り線をつけられるように！
デスクトップアプリケーションのメニューバーなどで使われている区切り線をWebでも表現できるようになる。
現時点ではSafari 17が一番早く実装済み。
1
33
285
📌CSSでスムーズスクロール実装するにはscroll-behavior: smooth;を使いますが、普通に指定するだけだと色んな問題が起きます。
なので、少しトリッキーな指定が必要になってきます。
2
34
284
✍ CSS Tips
1. :is()でセレクタの簡略化
2. 条件付きの:first-child
3. 特定のクラスの中で:nth-child
4. :focus-visibleでキーボード判定
↓ 続きます
1
30
286
✍ CSS Tips
9. たった1行でリストの連番
10. ドーナツセレクタ
11. image-set()関数とPolyfill
↓ 続きます
1
26
273
次なる最新のCSSはなんとWebページでJavaScriptが使えるかどうかを判定できるみたい。
@media (scripting: enabled) {
/* JSが使えるページ */
}
@media (scripting: none) {
/* JSが使えないページ */
}
2
63
252
📌 CSS Tips
CSSでスクロールバーの幅を取得する方法
100vwはスクロールバーを含んだ幅で、100%はスクロールバーを含まない幅なので引くとスクロールバーの幅を取得できます。CSS変数で定義しておくことで、どこでも使いまわせるようになります。
2
25
241
CSSだけで文字の改行のバランスを自動調整できる時代になる！！
text-wrap: pretty;とword-break: auto-phrase;が追加実装されたので、それぞれの組み合わせを比較してみました。
▼ word-break: auto-phrase;
文節の途中で分割されないように自然な位置で改行してくれる。GoogleのBudouXライブラリのCSS版。Chrome
0
33
189
0
26
235
✍ HTML Tips
1. translate属性
2. hidden属性のuntil-found
3. 複数のinput[type=email]
↓ 続きます
1
24
225
✍ HTML Tips
4. インラインSVGでファビコン
5. download属性
6. enterkeyhint属性
7. inputmode属性
↓ 続きます
1
27
228
▼ tailwind-ui-components
Tailwind CSSベースのWebサイトパーツ集。アコーディオンやボタンなどの基本的な要素をはじめ、お問い合わせフォームやメインビジュアルなどの大きなUIパーツも揃っている。
0
20
214
📌JavaScriptで特定の要素以外がクリックされたときを判定するなら、Element.closest()が便利！
モーダルの外側をクリックしたら閉じる処理とか、ドロップダウンメニューの外側をクリックしたら閉じるとか、色々応用できます。
1
28
199
✍ HTML Tips
8. 一括指定のdisabled属性
9. Google Fontsのサブセット
10. 見出しタグと改行
11. 簡易アコーディオン
↓ 続きます
1
19
200
TILTIPS
#022
CSSで見出しの改行位置のバランスを調整
❶ text-wrap: balance;を指定すると改行位置が自動調整される。
❷ パフォーマンスのためにbody要素に指定するのではなく、使用する箇所にだけ指定する。
❸ 6行以下の文章に対してのみ有効なので、基本的には見出しに使う。
1
27
186
text-wrap: pretty;とword-break: auto-phrase;が追加実装されたので、それぞれの組み合わせを比較してみました。
▼ word-break: auto-phrase;
文節の途中で分割されないように自然な位置で改行してくれる。GoogleのBudouXライブラリのCSS版。Chrome
0
33
189
CSSでスクロール進捗率のプログレスバー、論理プロパティに書き換えて少し最適化した。
0
10
181
📌 HTML Tips
『SVGファイルをHTMLで読み込む方法まとめ』
・<img>要素だと制限がある
・<iframe>要素を使う方法
・<object>要素を使う方法
2
17
168
📌装飾目的で見出しタグ内に<br>タグを使うのはやめましょう！
スクリーンリーダーで読み上げられるときに<br>タグを使うと、その前後で途切れた読み方になってしまいます。
white-space: pre-line;を使えばそのまま改行が反映されます。
または
で改行させることもできます。
1
18
173
touch-actionにmanipulationを���定すると、iOSなどのブラウザでダブルタップしたときに自動でズームされるのを防げます！
連打されるボタンなどに指定しておくとよいです。他にも色々な値がありスクロールを禁止したりできます。
0
21
164
Web制作の知って得する小技
#060
いつの間にか、Google Fontsで可変フォント（バリアブルフォント）が使えるようになってた！
ポイントはwght@の後ろで、100..900で100から900までの範囲の可変フォントとして読み込まれる。
容量が軽いまま、複数のウェイトを利用できるので便利。
1
26
167
Web制作の知って得する小技
#055
JavaScriptでフォームからフォーカスが外れたときを正確に判定してみた！
フォーカスが外れたときにはfocusoutイベントが発火するが、フォーム全体にイベントリスナーを指定すると中身の<input>要素のフォーカスが外れる度にfocusoutイベントが発火してしまう。
0
13
156
📌 JavaScript Tips
『正規表現のパターン処理の脆弱性を着いたReDoS攻撃について』
・ReDoS攻撃とは...
・ReDoS攻撃を防ぐには
・繰り返し表現を避ける
・OSSライブラリを用いる
・正規表現のチェックをする
・正規表現エンジンを変える
0
25
157
Web制作の知って得する小技
#045
内容が少ないときは下に固定して、多いときはそのまま押し出されるフッター作ってみた！
フッター部分だけタグで囲めばよく、短いコードで実装できる。
フッターに指定しているwill-change: transform;は、MacのChrome
0
12
148
📚拙著『今すぐ使えるCSSレシピブック』を抽選で3名様にプレゼントします！
応募方法はフォロー&リツイートです。
期限は9/25(金)迄です。
当選した場合、発送は版元のC&R研究所さんからとなるため、住所と氏名を伝える必要があります。（書籍の発送以外の目的で個人情報を使うことはありません）
14
243
139
📌JavaScriptでお手軽スムーススクロールするには、scrollIntoView()を使います。
behaviorオプションに'smooth'を指定すると、スムーススクロールします。
blockオプションに'center'を指定することで、スクロール先の要素が画面の中央に表示されるようにしています。
1
17
143
Web制作の知って得する小技
#051
CSSでIntersection Observerを完全実現！これは便利！
Scroll-driven Animationsではスクロール量によって要素がアニメーションする。そうではなく、CSSでも要素が画面内に入ったら一定のスピードでアニメーションさせたい。
2
15
140
📌横スクロールのレスポンシブテーブルを実装したときに同時にやっておきたいアクセシビリティ対策！
何もしないとテーブルが読み上げられません。。。
1
10
134
▼ Epic Easing
CSSのcubic-bezier()を生���できるオンラインジェネレーター。プレビューで実際のアニメーションを見ながら調整できる。
0
13
133
📌addEventListener()でAbortController()が使えるように！
これにより、ドラッグ&ドロップ実装のときのようなremoveEventListener()を複数書く必要がなくなり、見やすくなります！
0
18
126
▼ Google Indexing Script
このスクリプトを使えば、48時間以内にサイト全体がGoogleにインデックスされます。トリックもハックもなく、シンプルなスクリプトとGoogle APIだけです。
0
13
127
📌CSS Individual Transform Propertiesという便利な仕様が少しずつ実装され始めました！
Firefoxではすでに使えます！！
0
19
122
✍ CSS Tips
29. :hasで要素を含む親要素を選択
30. :hasで直前の要素を選択
31. :hasと:notの組み合わせ
32. :hasでホバーした要素の前の要素を選択
今回は:hasセレクタ特集です！:hasは子要素に特定の要素をもつという条件だけでなく、色々な使い道が考えられて楽しいですね！
↓ 続きます
1
14
123
CSS変数についてすべてまとめた本をzennで書くかも。2~3万字で500円くらい。多分、基本的な使い方しか知られてないと思うので...
1
6
122
これ、iOS Safariとかの話だと思うけど、16.4未満だとCSSのメディアクエリで範囲構文が使えないからdesktop-onlyのメニューがdisplay: none;になってないやつだ。
デジタル庁がiOS Safariのバージョンをどこまで対応しているか明記されていないからわからないけど最新版しか対応しないなら問題ない！
一部の環境下で表示が崩れる事象が発生しています。現在、原因の調査と修正を進めております。事象が発生されている方にはご不便をおかけしますが、復旧まで今しばらくお待ちください。
5
9
43
1
13
122
Web制作の知って得する小技
#069
CSSで隙間のある3分割のグリッドレイアウト
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
HTMLは共通となる。まずは、簡単なCSS
0
10
118
📌JavaScriptでネストされた配列を展開するには、Array.prototype.flat()が便利です。
引数には展開する階層数を指定しますが、完全にすべてのネストを展開したい場合にはInfinityを指定します。
0
10
118
Astro×MasterCSSの環境できた！Tailwind CSSよりもMasterCSSの方がそのまま直感的に書けるのでめちゃいい！
2
16
114
Web制作の知って得する小技
#039
カード型のデザインをCSS Gridで作ってみた！
サムネイルとタイトルをorderプロパティを使って入れ替えて、タイトル部分のaタグに擬似要素を使ってカード全体がリンクになるようにする。
2
10
115
1
12
109
📌色んな画面幅での表示を1つの画面上で確認できる開発者専用ブラウザ | Responsively
これは便利!!
・スクロールなどの動作が同期
・配置などもカスタマイズ可能
・Chrome DevTools搭載
・好きなデバイスを追加可能
・ボタン1つでスクリーンショット
・ホットリロード対応
0
15
107
CSSの進化が早すぎるのでインプットの速度を上げた方がいいかも。
0
8
105