[B! CSS] kiyo_hikoのブックマーク

やめよう、CSSのシステムデフォルトフォント指定 - Chienomi

序ウェブをブラウジングしていると、嫌というほど見る無意味にひたすらシステムフォントを列挙している同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定するという苦痛極まりないフォント指定をしているCSSをよく見かける。ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。起話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。それ以

kiyo_hiko 2023/12/14

リンク

CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack

当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終

kiyo_hiko 2023/09/28

CSS
怖い

リンク

【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

kiyo_hiko 2023/07/13

ついていけません！

CSS

リンク

よく見るスイッチ型のcheckboxを作る |

kiyo_hiko 2023/04/18

リンク

ゲーム感覚でプログラミング学べるサービス集 - Qiita

はじめに今回はゲーム感覚でプログラミングを学べるサービスを紹介します。ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を﹁使える技術﹂として自分のものにしていただければと思います。この記事の主な対象者プログラミング初心者~中級者基礎文法は学んだけどアウトプットができていない人フロントエンジニアを目指してる人楽しみながらプログラミングを学びたい人ぷよぷよプログラミングまずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる﹁ぷよぷよプログラミング﹂です。ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時

kiyo_hiko 2022/07/01

リンク

これは便利で簡単！モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース

kiyo_hiko 2022/05/25

css
素材

リンク

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

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

kiyo_hiko 2022/03/17

すごいなCSS。将来的に宣言型言語の雄になったりして

css

リンク

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

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

kiyo_hiko 2021/11/19

css
book

リンク

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに大局的なgridとflexbox 活躍するCSSのプロパティ完全に機能するCSSの数学関数

kiyo_hiko 2021/11/18

css

リンク

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はすべて進化し、素直にこれらのジョー

kiyo_hiko 2021/01/14

css

リンク

CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装この実装で学んだことはじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され

kiyo_hiko 2020/11/10

すごいな最近のCSS

css

リンク

CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 - スタイルシートTipsふぁくとりー

《2016年3月7日 11:02 公開/更新》 CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 [CSS3,ボックス] CSSのresizeプロパティを使えば、閲覧者がマウスなどを使って任意のボックスの描画面積を自由に増減させられるようになります。複数行のテキスト入力欄のサイズが可変になっていれば、たくさん入力したい場合などに便利かも知れません。 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできるボックスのサイズをユーザが変更できるようにするresizeプロパティ複数行のテキスト入力欄(textarea要素)の縦横サイズを可変にした例 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる CSS3で新たに追加されたresizeプロパティを使うと、ボックスの縦横サイズ(表示面積)をユーザが自由に拡大・縮小できるようになります。テキス

kiyo_hiko 2020/01/07

リンク

Amazon.co.jp: 1冊ですべて身につくHTML & CSSとWebデザイン入門講座: Mana: 本

kiyo_hiko 2019/12/26

特典期限は2020/01/31(金) 23:59まで

kindle
css

リンク

Full-[Watch]! Power Season 6 Episode 12 Online Free 123Movies

Creating consistent, concise, and effective CSS can be quite a lot of work. There are so many things to consider like responsiveness, accessibility, and structure. This is exactly why CSS Frameworks exist, to take that burden off of you! Let’s take a look at some of the top CSS Frameworks of 2019. Bulma Let’s kick this off with the CSS Framework used and **loved by Scotch **(Scotch.io is on Bulma

kiyo_hiko 2019/10/07

自鯖ではブルマ使ってるけどファンデーションもシンプルでよさげ。

リンク

CSS フレームワークを使いたくない - ジンジャー研究室

CSS フレームワークが辛い。ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも﹁それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう﹂と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。もちろん使いこなせる人には使いこなせるんだろうし﹁使うべきでない！﹂という主張をするつもりはない。頭のいい人には使えるんだろう。昔は﹁今すぐ〜すべき10の理由﹂みたいなことを適当に書いてたんだけど、どうせ自分がやってることは﹁ Web 系﹂のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ

kiyo_hiko 2019/03/13

css

リンク

CSS3のFlexboxでグリッドレイアウトしてみる

CSS3のFlexboxでグリッドレイアウトしてみる Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。投稿日2017年02月28日更新日2017年04月25日単純な横並び row というクラスの div の中に col というクラスの div を並べます。クラスの命名には行を表す row と、列を表す col がよく使われています。 HTML <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> CSSは row に display:flex を指定します。 col の width は 100% にします。 CSS .row { display: fle

kiyo_hiko 2018/12/28

リンク

Packery

What is Packery? Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries. Try it out! Instal

kiyo_hiko 2018/12/19

ゴイスー

リンク

[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス

去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！実装が簡単インタラクティブレスポンシブ対応カスタマイズが簡単拡張性も豊か実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。ちなみに、2017年4月11日にVistaのサポートも終了します。参考: Windows 製品のサポートライフサイクルについて drivewayのデモデモではdrivewayで実装され

kiyo_hiko 2018/12/19

css
masonry

リンク

CSSで要素を横に並べる主な3つのやり方（ブラウザ対応表のおまけつき） - Qiita

はじめに本記事では ul > li でリスト要素を作ったときによしなに横に並べてもらう方法について見ていきます。できるもの見た目的にはこんな感じ。タイトルではこんな風にいってますが、実は６つのやり方があります。この記事ではその中でも私がよく見てきたやり方に絞ってご紹介します。基本のhtml 基本となるhtmlのソースは以下のindex.htmlです。これをCSSで飾っていきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>ぐろーばるめにぅ〜</title> </head> <body> <h3></h3> <ul class = "foo"> <li><a href="#">HOME</a></li>

kiyo_hiko 2018/12/19

css

リンク

Masonry style layout with CSS Grid

A flexible, responsive Masonry-style layout using CSS Grid and a small amount of JavaScript I’ve been working on a way of using CSS Grid and a small amount of JavaScript to make Masonry style layouts. I reproduce all the functionality of Masonry whilst rem aining flexible and responsive thanks to CSS Grid. Before we dive in to the method, here is a CodePen with the complete solution. (Warning : The

kiyo_hiko 2018/12/16

css

リンク

はてなブックマーク

タグ

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

CSSに関するkiyo_hikoのブックマーク (191)

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス