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

あなたが教わってるそのCSSテクニックはもう古い｜ TAKLOG

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

shunt_i 2024/03/16

CSS

リンク

Mamba UI

Kickstart your next website in minutes Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Make the web your playground Easy to use UI elements based on Tailwind CSS Mamba UI is a toolkit for developers and designers to make creating interfaces easier. We have some of the most popularly used components to help you get started. Everything is modular and

shunt_i 2024/01/16

リンク

古いリセットCSSからはもう卒業！モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにモダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説

shunt_i 2023/10/05

リンク

CSS Stock｜Web制作を楽にするCSSコピペサイト

HTML・CSSの知識は不要。全222種類のパーツからお好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。掲載しているコードについて当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。また掲載している

shunt_i 2023/05/28

CSS

リンク

ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）

2023/05/03: 下部にさらにズボラな案を追加、FAQも追加しました。デモサイトを作りました。リポジトリはこちら。 favicon（ファビコン）てなに？みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。ところでファビコン、こんなにいる？つらつらと…長い…全部いるのこれ？ <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-tou

shunt_i 2023/05/04

開発
CSS

リンク

2022年のモダンCSS改

7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy

shunt_i 2022/07/28

CSS

リンク

IEのサポートが終了した現在、古いCSSリセットからもう卒業！最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css

*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing

shunt_i 2022/07/04

CSS

リンク

7 Practical CSS Tips

shunt_i 2022/06/17

CSS

リンク

いざという時に使える13のHTML&CSS Tips集 | BUILD Journal

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するいざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。CS

shunt_i 2022/05/10

CSS

リンク

いちばんやさしい webpack 入門

webpackis何?webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。複数の JavaScript モジュールを一つ︵またはいくつか︶のファイルへバンドル︵=bundle: 束にする、包む︶してくれます。複数のJSモジュールを︵場合によっては CSS や画像などのアセット類も︶一つにまとめるすでに新規開発の終了も伝えられる webpack ですが、﹁STATE OF JS 2022﹂ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。使うメリットは何？モジュールを1つ︵もしくは少数︶にまとめることでブラウ

shunt_i 2022/05/04

リンク

フッターを最下部固定にするCSS設定方法全6選｜ホームページ｜Shopifyブログ｜ネットショップ開設ならShopify専門のショップアイズへ｜大阪のホームページ制作会社アイズオブシー運営のShopify（ショッピファイ）専門の構築サービス

こんにちは、とらりんです。さてさて、今回はCSSのテクニック、コンテンツが少ないページでも常にフッターを一番下に配置する方法です。ページの内容が少ない場合、次のような状況に陥ることがあります。

shunt_i 2022/05/03

リンク

【CSS】animation・keyframesを徹底解説

︻CSS︼animation・keyframesを徹底解説公開日:2019/01/20 /最終更新日:2019/07/05 CSS Technique 今回は﹁animation﹂、﹁keyframes﹂について、細かく徹底的に解説していきます。﹁animation﹂、﹁keyframes﹂については知ってはいましたが、アニメーションさせるなら﹁transition﹂でいいんじゃない？と思って使っていませんでした。しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで﹁animation﹂、﹁keyframes﹂が使われておりました。そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。

shunt_i 2022/05/03

CSS

リンク

https://flowbite.com/

shunt_i 2022/04/29

tailwindで書かれたコンポーネント

Tailwind
CSS

リンク

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

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

shunt_i 2022/04/27

フロントコーディング

リンク

よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

Webエンジニアを始めて丸2年が経ちました。複数プロジェクトを進める中で、CSSコーディングを行うときの﹁こうしておくと便利﹂﹁このほうが管理しやすい﹂といった知見が溜まってきたのでまとめます。はじめに長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。これらは﹁自分がよく取り入れている手法﹂であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。各項目について、自分がその判断に至った﹁理由﹂を説明していますので、理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような初学者向けではないことご了承ください。一般的と思われるキ

shunt_i 2022/04/18

CSS

リンク

よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選

この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。早く知っておけばよかったと思う、あまり知られていないCSSの実用的なテクニックが中心で、実際の問題ケースや参考サンプル用ソースコードを一緒に確認できます。前回のお役立ちCSSテクニック集と合わせて確認してみてはいかがでしょう。よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめコンテンツ目次 1. 画像の質感をアップしたい 2. グラスモーフィズム効果を表現したい 3. 入力フォームの使いやすさを改善したい 4. CSS Transf ormをつかった最新テクニック 5. 2022年に知っておきたい新しいCSSプロパティ 6. position: stickyの正しい使い方 7. レスポンシブ対応の区切り線のつくり方 8. するするとカーテンが降りてくるエ

shunt_i 2022/03/30

リンク

Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal

CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。正方形の写真をCSSで変形させました上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa

shunt_i 2021/05/14

リンク

Google HTML/CSS Style Guide

Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained. General General Style Rules Protocol Use HTTPS for embe

shunt_i 2021/04/27

html
CSS

リンク

無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」

ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。NES.cssはさくらインターネットのダーシノ氏が開発を行っており、ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。 NES.css - NES-style CSS Framework https://nostalgic-css.github.io/NES.css/# nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク https://github.com/nostalgic-css/NES.css ファミコン風CSSフレームワーク「NES.css」をリリースしました | Black Everyday Company https://kuroeveryday.blo

shunt_i 2021/02/04

リンク

Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる

Chromeに新しく実装された﹁CSS Overview﹂が非常に便利なので、紹介します。表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能﹁CSS Overview﹂ Fyi: New in Chrome: CSS Overview Chromeの新機能﹁CSS Overview﹂の準備 Chromeの新機能﹁CSS Overview﹂の使い方 Chromeの新機能﹁CSS Overview﹂の準備まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン︵Settings︶をクリックします。

shunt_i 2020/07/06

CSS
chrome

リンク

はてなブックマーク

タグ

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

CSSに関するshunt_iのブックマーク (34)

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス