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

これは簡単で便利！レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴流体タイポグラフィ︵Fluid Typography︶は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ

ene0kcal 2024/06/13

リンク

【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita

はじめにみなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？この記事では、CSSで三角形をつくるベストプラクティスを紹介します。今までの三角形の作り方 See the Pen CSS Masking - Fade out UIbyでぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。理想は、widht と

ene0kcal 2023/06/18

リンク

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内に記

ene0kcal 2023/01/25

リンク

任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」

CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality

ene0kcal 2022/11/28

リンク

ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。 Tailwind CSS Masonry Layout by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Tailwind CSSのみを使用してMasonryレイアウトを実装する方法終わりにはじめに Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力

ene0kcal 2022/07/06

リンク

Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説

CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSにおけるレイアウトのアルゴリズムレイアウトアルゴリズムの確認インライン要素の不思議なスペース終わりにはじめに数年

ene0kcal 2022/04/14

css

リンク

CSSの難しさが分かるようになった人にお勧めの解説書、さまざまなレイアウトを実装する再利用性を向上させるCSSの設計方法 -Every Layout

CSSって面白いと思い始めた人、CSSの難しさが分かるようになった人、そしてCSSが大好物な人にお勧めの解説書を紹介します。本書は、CSSの経験を積んでいるデベロッパー向けの解説書です。レスポンシブデザインを実現するレイアウトについて実装だけでなく、設計・管理・考え方について詳しく解説されています。本書の元になっているのは、Relearn CSS layoutです。公開されたのは2019年ですが、現在でも人気が高いサイトで、さまざまなレイアウトを実装するCSSの設計方法について解説されています。その日本語版ともいえるのが本書です。本書は来週発売！一足先に中身を紹介します。

ene0kcal 2021/11/21

開発
css

リンク

SVGでレイティングに使用するスター（星形）を実装するテクニックを解説

Webページやスマホアプリで見かけるレイティングに使用するスター（星形）を実装するSVGのテクニックを紹介します。一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに実装の要件スターを実装する基本のHTML アクセシビリティ SVGを再利用する方法スターのスタイル部分的なスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装アウトラインスタイルのスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装スタ

ene0kcal 2021/08/31

リンク

実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック

Webページやアプリで見かける、通知や注目の役割を担うカットアウト︵画像の一部を切り取る︶を実装するCSSとSVGのテクニックを紹介します。画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSSorSVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。カットアウトとはアバター画像で見かけるカットアウトカットアウトの実装 1: clip-pathを使用するカットアウトの実装 2: CSSのマスクカットアウトの実装 3: SVGのマスクアバター画像を重ねるカットアウトカットアウトの実装 1: clip-pathでマスクカットアウ

ene0kcal 2021/08/17

リンク

これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか

ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにデザインのディテールは脇に置いておく配下ページのレイアウトを実装する時に考えることディテールを掘り

ene0kcal 2020/12/08

リンク

2023年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku

こんにちは、実は久しぶりの投稿の、どうもしばおです。さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。︵2023年7月3日更新︶僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有しています。そもそも、VSCode︵Visual Studio Code︶って？ VSCode︵Visual Studio Code︶はMicrosoft社が開発したオープンソースのテキストエディタです。最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。

ene0kcal 2019/11/03

リンク

PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法

PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに PurgeCSSとはビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。未使用のCSSを削減しよう私はしばらくの間、CSSファイ

ene0kcal 2019/09/26

リンク

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS︵CSS4までサポート︶を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます

ene0kcal 2019/03/28

リンク

[CSS]これは知らなかった！セレクタを使った条件分岐のテクニック | コリス

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか？ CSSのセレクタだけを使用して、古いブラウザ用とモダンブラウザ用にスタイルシートを条件分岐させるテクニックを紹介します。 Using Feature Detection, Conditionals, and Groups with Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい機能を使用する時新しい機能の検出が必要な時条件セレクタのサポート @supportsに対応するセレクタセレクタの基本的なプロパティのグループセレクタによる条件分岐の効果的な使い方このテクニックを使用するポイントと注意点 CSSの新しい機能を使用する時 CSSは、新しい機能をスムーズに追加できるよう設計されてい

ene0kcal 2018/11/02

リンク

CSSでビックリマンシール風の背景を作る - Qiita

Chrome69から CSS conic-gradient が使えるようになります ※2018年8月3日時点ではバージョンが68なので、以下のソースは Chrome Canary でご確認ください。今までグラデーションといえば、線形グラデーションの linear-gradient と放射状グラデーションの radial-gradient の2つだけでしたが、conic-gradient で円錐状グラデーションを表現することができますこれを利用しビックリマンシール風の背景を作成してみました。*1 実際に描画されたものを見たい場合はこちら。名前のところは太字にして枠をつけただけなので、もう少し何とかしたいところですが、主旨のキラキラはいい感じにできました。キラキラソース HTML .kirakira { position: relative; width: 240px;

ene0kcal 2018/08/04

リンク

CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets

結果ページどのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。リンクを記述するHTMLは、要素を特定できるようにidを与えます。

ene0kcal 2018/01/20

CSS
CSS3

リンク

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web

︵2016年7月26日‥フォロー記事を書きました。﹁Windowsで游ゴシックが汚いのは、結局誰が悪いのか？﹂︶︵2016年7月11日追記‥Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました︶︵2016年6月29日追記‥Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました︶︵2017年3月27日追記‥当サイトでの使用CSSについて追記しました︶︵2020年9月13日追記‥当サイトでの使用フォントについて追記しました︶タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント﹁游ゴシック﹂・﹁游明朝﹂が搭載され、CSSのfont-familyに﹁游ゴシック﹂を指定すれば、Webデザイナーの長年の悲願であっ

ene0kcal 2016/06/29

リンク

コーディングガイド by @mdo

HTMLシンタックスインデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </

ene0kcal 2014/09/07

リンク

CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ

CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版︵2014年8月リリース︶。大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。

ene0kcal 2014/08/26

リンク

はてなブックマーク

タグ

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

cssに関するene0kcalのブックマーク (19)

お知らせ

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

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス