[B! css] adstyのブックマーク

CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説

CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric functions in CSS by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの三角関数が主要ブラウザにサポートされました CSSの三角関数とは: sin(), cos(), tan() CSSの三角関数とは: asin(), acos(), atan(), atan2() CSSの三

adsty 2023/03/23

CSSの三角関数の面白い活用法を知りたい。

css
数学

リンク

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにボタンの実装にdivを使用したときの問題点ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法フォーム内のbuttonの動作を修正する他のページへのリンクに使用する場合はaタグでボタンの実装をコンポーネントにする終わりにはじめにクリックで

adsty 2023/02/10

ボタンをbuttonで実装するのは当然か。

リンク

2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記

adsty 2023/01/25

丁寧に記述すると量が多く管理も大変だ。

リンク

モバイル幅で作成されたWebサイトの特徴と作例

2022年7月20日 CSS, Webデザイン, スマートフォンモバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト！モバイル幅Webサイトの特徴デスクトップで見ても狭いコンテンツの幅よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示

adsty 2022/07/20

デスクトップで見てもモバイル幅のまま表示させているWebサイトが出てきている。

リンク

IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-em phasisプロパティ 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で

adsty 2022/06/14

IEサポートの制限から解き放たれる。

css

リンク

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でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじ

adsty 2022/05/26

iOSのSafariの100vh問題を解決できる。

リンク

無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】

﹃無料コーディング練習所﹄では、完全無料のコーディング教材を提供しています。入門編から上級編まで6サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。デザインカンプと完成版コーディングデータ付きです。この教材は制作会社の新人コーダーの教育にも使用されています。さぁ、楽しみながら一緒に勉強していきましょう♪

adsty 2022/04/27

HTML・CSS・jQueryの基礎スキルが身に付くカリキュラム。

リンク

CSSは確実に進化している！変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック

一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの制御構造 CSSの実装テクニック終わりにはじめに CSSは、スタイルのシステムに特化

adsty 2022/03/17

CSSのブログラミング言語的な実装例。

リンク

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

グラデーションを作成した時に、中央がグレーに濁ってしまうこと︵グレーデッドゾーン︶があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSグラデーションが算出される仕組みおすすめのカラーモードこれらの知識を活用する美しいグラデーションを生成できるツール終わりにはじめにさっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

adsty 2022/01/27

美しいグラデーションを考えていきたい。

リンク

head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS

Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。一致しないmedia

adsty 2021/10/02

headタグ内の修正点を教えてくれるCSSのスニペット。

リンク

モダンCSSによる絶対配置（position: absolute;）の削減

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置︵position: absolute;︶を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめにケース1: カードのオーバーレイケース2: カードのタグケース3: ヒーローセクションケース4: display: contents; ケース5: カードアイテムの並べ替えケース6: 中央寄せケース7: 画像のアス

adsty 2021/09/28

絶対配置を使用しなくても実装できるモダンCSSのテクニック。

リンク

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにノイズを加えたグラデーションを生成できるオンラインツール実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する明るさとコントラストを高めるノイズのカラーが均一でない CSSのブレンド機能粒子の粗いグラデーションの使用例さらに詳しくブラウザのサポー

adsty 2021/09/23

CSSとSVGでグラデーションに質感を与えるノイズを実装する方法。

リンク

HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ﹁TablesNG﹂で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにTablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック

adsty 2021/07/09

テーブルの不整合の修正を目的とした再アーキテクチャの取り組み。

リンク

CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック

文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。仕組みは、CSSのblurとcontrastで文字をぼかして変化の間をつなげています。実際の動作は、下記でお楽しみください。﹁Run Pen﹂をクリックすると動作します。﹁0.5x﹂にするとちょうどいいかも。 See the Pen CSS morphing by Amit Sheen (@amit_sheen) on CodePen. 実装コードは、下記の通りです。デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。 <div class="morphing"> <div class="word">Pure CS

adsty 2021/06/07

CSSで文字をぼかして変化の間をつなげる仕組み。

リンク

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無しフレームワークは必要無しピュアCSSで実装、CSS

adsty 2021/02/18

それだけを実装するためコードやカスタマイズは簡易的。

リンク

CSSの中央揃えで、最も万能で信頼できる実装テクニック

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニックはじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー

adsty 2021/01/14

中央揃えのテクニックの長所と短所。

リンク

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番リソースはじめにこの記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに

adsty 2019/04/14

CSSの本質的なパフォーマンスに関する知識。

リンク

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。ブラウザで簡単に利用できるブックマークレットも用意されています。ブックマークレット Construct.cssのブックマークレットブックマークレットを使用すると、以下のCSS

adsty 2018/09/20

Webページに実装されているHTML要素の構造を可視化して確認できる。

リンク

ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。イラスト: Girls Design Materials ﹁Web Launch Checklist﹂は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。パフォーマンスで確認したい項目 SEOで

adsty 2017/07/24

サイト公開時の確認事項をまとめたチェックリスト。

リンク

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

CSSの関数には便利なものがたくさんあります。例えば、div要素に﹁width: calc(100% - 50px);﹂と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができるサポートブラウザ minmax()の基本的な使い方

adsty 2017/06/14

簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できる。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (36)

cssに関するadstyのブックマーク (311)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス