【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
これがフロントエンドで話題になった記事！ ICS MEDIAの2022年 - ICS MEDIA
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から9年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2022年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : Vue 3 2022年の最新標準！Vue 3の新しい開発体験に触れよう 24,500PV Vue 3（開発コード：ワンピース）がリリースされたのは2020年9月。Vue 3のリリース以降は周辺ツールも進化しました。Vue 2の構成よりVue 3周辺ツールは型安全になったことが特徴です。ICSではVue 3
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単です。 Style a parent element based on its number of children using CSS :has() by Bramus :has()について詳しく知りたい人は、以前の記事をご覧ください。 CSSの:has()疑似クラスの便利な使い方を徹底解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has()を使用して、子の数に基づいて親要素のスタイルを設定 :has()
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三本線のアイコンがハンバーガーに見えるためそう名付けられました。この三本線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三本線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ
PCとSPで画像を切り替えかつ、画像の比率を保つ方法 | TipsWeb
今回はそのような要望に応えるためのコーディング方法をご紹介します。 結論（picuterタグとobject-fit） いくつか方法がありますが以下のやり方がおすすめです。 ※ポイントとなる部分を薄くハイライトしています <a href="" class="card"> <div class="card-inner"> <div class="card-img"> <picture> <source srcset="/img/card-img.jpg" media="(min-width: 768px)" /><!-- 幅768px以上なら表示 --> <img src="/img/card-img-sp.jpg" alt="" /> </picture> </div> <div class="card-body"> <time class="card-time" datetime="YYY
Flexboxを使って孫要素まで高さを揃える方法 - Qiita
cssで要素を横並びにするにはいくつか方法がありますが、 中でもflexboxは子要素の高さがデフォルトで揃ってくれるから好き！ 基本的な使い方は、親要素にdisplay:flexを指定するだけ。 子要素が横並びになり、高さも揃ってくれます。 See the Pen flexbox01 by kayukihashimoto (@kfunnytokyo) on CodePen. flex-wrap: wrapで折り返しを設定して、 justify-content: space-betweenで両端に合わせるだけで、 とっても簡単にキレイなレイアウトが組めちゃいます。 flexboxを知ってから、横並びレイアウトがスムーズに組めるようになりました。 Can I Useで確認すると、 IE11は部分的な対応となっていますが、主に古いver.のバグのようです。 バグに関しては、flexboxのバグ
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
WEBサイトのある要素に現在効いているcssだけを抽出・保存する｜プログラムメモ
VS CodeやSublimeTextなどWEB関連のソース（HTML,CSS,プログラム）を記述する時の環境についてのTipsをメモっていきます WEBサイトのある要素に現在効いているcssだけを抽出・保存するには次の拡張機能を使用します。 ● Google Chrome 拡張機能 CSS Used https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff ● CSS Used の使い方 1. 抽出したいWEBサイトを開く 2. 抽出したい要素を右クリックして「検証」 3. 右のパネルで「CSS Used」を選択する
ホームページの作り方｜さきちんWEB
初心者でも安心！ ホームページの作り方を学ぶことができる「さきちんWEB」です。 作って覚える形式なので、すぐに上達。基礎から応用まで、全部おまかせ！
コピペで作れる！おすすめのCSSジェネレーター・ツールまとめ | Web Design Trends
CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSSに慣れてくるとコードを書くだけでイメージ通りのデザインを作ることができますが、慣れるまではコードだけでなく、プレビューを見ながらツールを使って微調整する方が効率がいい場合があります。 また、知らないと実装できないようなテクニックが使われていたり、作業量を大きく削減できるようなジェネレーター・ツールもたくさんあるので、ぜひチェックしてみてください。なお、一部SVGなどCSS以外のジェネレーターも掲載しています。 多機能ジェネレーター The Ultimate CSS Generator | Web Code Tools アニメーションやFilter、レイアウト、テキストなど様々なCSSを生成できるジェネレーターです。初心者の方がCSSのプロパティや値を覚える際にも使ってみると良さそうです。
グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ
Glassmorphism（グラスモーフィズム）は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。 グラスモーフィズムって何？ 2020年末ごろより人気が高まっているスタイルで、静かな不発トレンドとなったニューモーフィズムのプラスチックな質感に対して、すりガラスを通して覗いたような背景のぼかしが特長です。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ グラスモーフィズム・スタイルで押さえておきたいのが、以下の4つのポイントです。 透明度（英: Transparency）: 背景のぼかしを使用したガラスのようなエフェクト 空間に浮遊するオブジェクトを用いた
コピペでOK！セクション間のおしゃれな仕切りをカスタマイズして実装できる便利なWebサイト3つ
2021年9月14日 CSS, SVG, Webサイト制作 上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう！ ↑私が10年以上利用している会計ソフト！ SVG Shape Dividers Generator Tool SVG Shape Dividers Generator Tool 画面右側にカーソルをあわせるとパネルが表示され、模様が選択できます。左側のパネルから表示位置や色、模様の大きさなどが調整可能。「Animate」をオンにすると、キーフレームアニメーションで動くコードが生成されますよ。「COPY CODE」をクリックでCSSコードをコピーできます。 個性的な模
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
Clippy — CSS clip-path maker
https://b-risk.jphttps//b-risk.jp/blog/2019/11/form-css/
Zeplin
CSS importantが非推奨と言われるワケ