HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
AnimXYZ
AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life. Composable Making an animation is as simple as describing it in
A Table With Both A Sticky Header And A Sticky First Column | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this demo). But stickiness isn’t just for the top of the screen, you can stick thing
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック
記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。 記事の固定幅は自由自在、画像の幅いっぱいも最大値を制限するなども簡単にでき、いろいろな応用も効く実装テクニックです。 Full-Bleed Layout Using CSS Grid by Josh Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのレイアウトにおける問題 解決策 CSS Grid 子カラムの割り当て方 子をフルブリードにする まとめ はじめに 以前、誰もが実装しようと努力したゴールドスタンダードのレイアウトがありましたが、そのレイアウトを正しく実装するのは非常に困難でした。 そのレイアウトとは、聖杯レイア
flexプロパティの実践的な使い方を徹底解説
Webページやスマホアプリのレイアウト・コンポーネントを実装する際に知っておくと便利なflexプロパティの基礎知識と実践的な使い方を紹介します。 スペースいっぱいにアイテムを伸縮させて配置したり、画像・アイコンとテキストを並べて配置したり、フォームの入力欄とボタン、複数カラムの垂直方向の揃えなど、実践的な使い方を徹底解説です。 Digging Into the Flex Property by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに flex-growプロパティとは flex-shrinkプロパティとは flex-basisプロパティとは flexのショートハンドプロパティ flexプロパティの便利な使い方 flexのショートハンドを勧める理由 flexプロパティの使用例 flexプ
CSS Section Separator Generator
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
CSSのプロパティの値に「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど
CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便利なautoの使い方、overflowにおけるautoなど、実用的なテクニックが満載です。 Everything About Auto in CSS by Ahmad Shadeed はじめに widthプロパティにおけるauto width:auto; の使いどころ heightプロパティにおけるauto marginプロパティにおけるauto 絶対配置された要素におけるmarginのauto Flexboxにおけるauto Flexboxのプロパテ
Background Scale Hover Effect with CSS Clip-path | Codrops
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path. Today I’d like to share a simple hover effect with you. It’s a recreation of the hover effect seen in the menu on the DDD Hotel website by Garden Eight. The idea is to scale down the background image and “fitting” it to a clip shape which contains the same background image. The shape is visi
ビューポート単位「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ
CSSのビューポートを基準にした単位「vw, vh, vmin, vmax」は、ここ数年で多く使用されるようになりました。利点はJavaScriptなしで、レスポンシブ対応のレイアウトや要素のサイズを動的に実装できるからです。vw, vh, vmin, vmaxの知っておくと便利なCSSのテクニックを紹介します。 フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど、実用的なテクニックが満載です。 CSS Viewport Units by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートを基準にした単位 vw: ビューポートの幅 vh: ビューポートの高さ vmin: ビューポートの幅または高さの最小値 v
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な使い方を紹介します。 Min and Max Width/Height in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに widthプロパティにおけるminとmax heightプロパティにおけるminとmax minとmaxプロパティの効果的な使い方 メモ リソース はじめに 要素の幅をその親に対して相対的にすると同時に、
UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Gradient Animator | Fuze
Get Waves – Create SVG waves for your next design
News, Resources and Articles, Templates about Web-Development
css.gg
https://csslayout.io/
Keyframes.app
