【2020年版→2021年版】游ゴシックを使ったおすすめfont-family指定
【結論】font-family、おすすめの指定方法はこれ！ まずは結論から。わたしの設定しているfont-familyは、下記のとおりです。 全体にはこれ。 body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; } Cocooｎを使っているかたは、これを追加 .ff-yu-gothic { font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif; } そして太字の箇所には以下の指定。 b, str
font-sizeはclamp()関数で指定するのが良さそう | WEB制作の備忘録めも ミフネWEB
調べてみると、当サイトの全アクセスの約1%がInternet Explorerユーザーなのですが、Office365のIE 11サポートが本年8月17日に切れることを受け、Internet Explorerをサポート外とするサービスが大多数となってきました。 これにより、IEだけに配慮したあれこれが無くなって楽になるのですが、個人的に一番嬉しいのはmin()、max()、 clamp() などのCSS関数を気兼ねなく使えるようになることです。 もうmedia queryでスクリーンサイズ別にwidthやfont-sizeを書く必要も無くなります。 今記事では、CSS関数の使い方と便利さについて説明します。 サイズの最小値・最大値・推奨値を自動的に算出するcss関数 文字に書くと少し混乱しそうですが、min()は最大値を指定するための関数。 max()は最小値を指定するための関数。 clam
CSS関数のclamp()・max()・min()についてまとめてみる | 株式会社 エヴォワークス -EVOWORX-
こんにちは。4回目の登場です。エンジニアのuchimuroです。 存在は知っているけれども実はまだ使用したことのないCSSのプロパティや関数って結構あるんですよね…。 そんな中でも今まで食わず嫌いしていたCSS関数のclamp()・max()・min()をそろそろ実案件でも使ってみようと思っているので、今回はそれらについてまとめてみようと思います。 clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中で条件に合致する1つの値が適用されます。 推奨値：最小値と最大値の間である限り推奨値が適用されます。最小値：許容される最も小さい値で、推奨値がこの値よりも小さくなる場合は最小値が適用されます。最大値：許容される最も大きな値で、推奨値がこの値よりも大きくなる場合は最大値が適用されます。 // プロパティ: clamp(最小値, 推奨値, 最大値); width: c
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の
コピペOK！CSSで作るtableのレスポンシブ対応【用途別】 ｜untenna（アンテナ）
tableタグで表を作成した場合、PCでは見やすく実装ができても、スマホでは見えにくくなってしまうケースがあります。 今回はWeb制作会社が現場で使っているCSSだけで実装した、レスポンシブ対応のtableレイアウトをご紹介します。より実際の現場で役立てて貰えるように、料金表やプラン比較表を題材に掲載しています。 「会社概要」で使えるtableレイアウト デモサイトで確認する コーポレイトサイトを制作する際、会社概要ページではtableタグを仕様する機会が多くあります。2列表の場合、スマホ時は縦に整列したレイアウトの方が、情報が整理され見やすい印象を与えます。 「会社概要」で使えるtableレイアウト → デモサイトを見る <table id="table01"> <tr> <th>社名</th> <td>UNIONNET Inc.（株式会社ユニオンネット）</td> </tr> <tr>
固定ヘッダーにmix-blend-modeを使うときの３つの注意点 | 教えて！おねだーりん
どうも上かるびです。 案件でmix-blend-modeを使ったのですが、わりと時間を溶かした＆参考記事があまりなかったので共有しておきます。 デモ：固定ヘッダーのmix-blend-mode ヘッダーは透過。ロゴとハンバーガーメニューをmix-blend-mode（プロパティは反転のdifference）かけたい、という想定です。 とりあえずデモをご覧ください。（デザインや画像などは簡単に済ませました） DEMO デモで使用したコード 続いて解説、といきたいところですが、 「こちとら急いでるんや！いいからコードだけコピペさせてくれ！」という方もいると思いますので、まずはデモのコードを載せておきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compati
2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends
IE11は注意が必要！ 何かと話題になりやすいInternet Explorerですが、最新のIE 11でもFlexboxに関するバグがいくつか報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方がいいでしょう。 ただし、IEのサポートも2022年6月に終了することが発表されており、これから制作するWebサイトであればIEを最初からサポート外にしてしまう方がいいと思います。 Flexboxのベンダープレフィックス一覧 下記にFlexboxに関連するCSSのプロパティのベンダープレフィックスの記述方法をご紹介しておきます。 すでに、ベンダープレフィックスが必要なバージョンのブラウザはシェアがかなり少なくなってきており、基本的にはベンダープレフィックス無しでもほぼ100％に近いシェアをカバーできるものの、古いブラウザでの動作保証もしっかりケアしたいという場合は、ベンダー
ツールチップ(tooltip)をおしゃれにするCSSスニペット9選。バルーンだけじゃない！ | KodoCode
フォーム項目の注釈説明をわかりやすくするツールチップ(tooltip)/ヘルプのCSSサンプルをまとめました。趣向を凝らしたデザインが素敵なウェブサイト・ブログが増えています。ただし、サイトは利用者が快適に操作するためのものであり、ユーザビリティが悪いサイトや項目説明が不足しているサイトは使いにくいです。 サイトの使い方を補足説明する方法として「ツールチップ(tooltip)」が挙げられるでしょう。 本記事ではフォームの中でも「ツールチップ(tooltip)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルにバルーンがポップアップするタイプのツールチップ(tooltip)CSSデザイン例。基本形のシンプルなバルーンツールチップ。Pure CSSで実装できる。See the Pen CSS Tooltip Magic by Envato Tuts+ (@tutsplu
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CSS で項目間の点線を表現する - Qiita
この記事で作るもの こんなやつ。 HTML をどう書くか HTML は、文法エラーを出さない。そのためか、適切な HTML 要素の検討、選択は、軽んじられているところがある。 しかしアクセシビリティや、開発の容易さを考えると、適切な HTML を書くことは非常に重要だと思う。 そんなわけで、今回作るものにはどの HTML 要素が適切かを検討していきたい。 今回作るものは、上の画像からもわかるように、複数の項目が列挙されている。つまり、リスト形式になるということだ。 HTML でリストを表現にする際には、リスト要素(ul, ol, dl要素)を使用する。 次に、この記事で作るものでは「各項目と、それに対する値段」を書く必要がある。 これを表現することに適しているリスト要素は、一連の用語と説明をリスト化できるdl要素だ。 dl要素で骨組みを作ってみる。ついでにクラスも割り当てる。また、dt,
コンテナからの解放。
今年もCSSには大変お世話になりました。なかでも今年になってとくにお世話になる頻度が増えたのが「calc（キャルク）()関数」。プロパティの値に、計算式を使わせてくれるスゴいやつです。ここでは、そんなcalc()関数を使った便利ワザについて書いてゆきます。 この記事は「今年お世話になったCSS Advent Calendar 2016」の23日めの記事です:)。 ※2023年の11月に加筆・修正しています。 calc()関数を使った便利なスタイル 例えば下図みたいな、「サイト全体のコンテンツは横幅800pxで画面中央にレイアウトされていて、その中のあるセクションだけウィンドウ全幅まで広がってる」なんてデザインの場合。以前は、「サイト全体を包括するコンテナには横幅を指定しないで、セクションごとに横幅を指定」していたと思うんです。 HTMLとCSSは以下みたいな感じ。 main要素には何もスタ
【CSS】img画像の縦横比を保ったままボックス内に収める方法 | Freelance Journal フリーランス ジャーナル
要件概要: ボックスのサイズは固定 横長の画像が来たらボックスの横幅に合わせる 縦長の画像が来たらボックスの縦幅に合わせる 画像サイズがボックスサイズより小さい場合はそのまま 縦横中央揃え 結論からいうと、「縦横中央揃え」以外の要件は下記のCSSで実現できます。 img { width:auto; height:auto; max-width:100%; max-height:100%; } ボックス内で画像を縦横に中央揃えさせたい場合も多いと思います。デモを用意しましたので、ご参考下さい。 See the Pen 4 way to keep image ratio inside a box by wang (@yaquawa) on CodePen. 全部で5通りの方法です。ボックスの端をドラッグしてリサイズしてみてください。ボックスのサイズに応じて収まり方も変わってくることが確認できる
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
良く使ったな〜・・・と思うSassのmixin | バシャログ。
Oculus Quest、やってます？自分はメチャメチャはまってます。 おはこんばんちわ、kouraku です。今回で最後の投稿となります。 近々、Web業界を引退することとなりました。 ということで、最後に何を書こうか・・・と色々と考えてみた結果、 これまでお世話になったSassのmixinを紹介することに至りました。 「あー、あるよねー」とか、「え？そんなの必要？？？」なんて感じで見ていただければ幸いです（笑） inline-blockでの隙間を削除 // ---- // * ex) @include remove-letterspace(); // ---- @mixin remove-letterspace { letter-spacing: -0.4em; > * { letter-spacing: normal; } } どうせなら子供にdisplay: inline-bloc
（自分用めも）背景画像の無限スクロールをCSSアニメーションでつくる - がらくたツールボックスのウェブログ
この手の話題はいろいろなところで既出だとは思いますが、自分用にメモをば。 CSSアニメーションをつかって背景画像の無限スクロールをする方法です。画像の横スクロールをしたくなったのですが、以下のようにしてみました。 CSSアニメーションのキーフレームに background-position （背景画像のオフセット量）を設定して、背景画像を3秒で画像1枚分だけ横スクロールさせます。 .toppage-header__bg { width: 100%; height: 1000px; background-image: url('images/top_bg.png'); animation-name: scroll-header-bg; animation-duration: 3s; /*3秒で画像1枚分スクロールする*/ animation-timing-function: linear;
MT7 スタイルガイド : MT7 Styleguide
MT7 スタイルガイドは、一貫性のあるデザイン、アクセシビリティ、汎用性・拡張性を考慮した最低限の品質を保つためのガイドラインです。 コードのダウンロード ダウンロード CSS ファイル 最終更新: 2022-06-06 11:17:40 ファイル構造 mt7/ ├── html/ │ ├── _includes/ │ ├── _layouts/ │ ├── bootstrap/ │ ├── components/ │ ├── dist/ │ └── images/ ├── scss/ ├── dist/ │ ├── css/ └── docs/ /html/ 本スタイルガイドの開発用ファイル /scss/ CSS ファイル一式 /dist/ プロダクトで利用する CSS ファイル /docs/ 本スタイルガイドの観覧環境 CSSファイルについて MT7 の CSS は Bootstrap
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NES.css - NES-style CSS Framework
