[B! CSS][WEB制作] sbtqeのブックマーク

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

sbtqe 2024/11/22

リンク

鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック

2024/06/19 Findy主催イベント「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://ton…

sbtqe 2024/06/19

鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック

リンク

便利なのが登場！フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator

HTMLやCSSをはじめとする、フロントエンドの開発に役立つ最新ツールがひとまとめに利用できるHTML & CSS code generatorを紹介します。いろいろなツールをどこだっけなと探すときもあると思うので、ブックマークしておくと便利です。 HTML & CSS code generator HTML & CSS code generatorは、フロントエンドのデベロッパー向けに最新ツールがオールインワンで利用できるサイトです。ツールはすべて無料で利用でき、登録など面倒なことは一切不要です。

sbtqe 2023/06/20

リンク

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

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

sbtqe 2023/06/19

リンク

覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal

覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するこれまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい

sbtqe 2023/05/19

リンク

次世代のCSSグラデーションツールが美しすぎる！すべての新しい色空間を完全にサポート -CSS HD Gradients

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@ar

sbtqe 2023/05/12

リンク

2023年モダンCSSの最新トレンド

鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/

sbtqe 2023/04/14

リンク

JIT.codes

You need an OpenAI API Key to use Site. Your API Key is stored locally on your browser and never sent anywhere else.

sbtqe 2023/04/04

テキスト入力でUIを生成

リンク

MDN Web Docs

Resources for Developers, by DevelopersDocumenting web techno logies, including CSS, HTML, and JavaScript, since 2005. //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../..

sbtqe 2023/02/23

リンク

便利なのが登場！最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

sbtqe 2023/01/18

リンク

Webデザイン制作における課題！コーディング実装を考慮したデザイン制作の一幕をご紹介 | ブログ | 東京青山のWebサイト制作会社・ホームページ制作会社 | 株式会社デパート

フォーカスしたいもの株式会社デパートは、基本的にデザインと実装（コーディング）は分業制です。だからこそ、日頃からデザイナーとエンジニアが協力し、スムーズに実装を進めていけるようなデザイン連携の仕組みづくりに取り組んでいます。また、デザイナーは常にコーディングを考慮したデザイン制作を心がけています。今回は実装を意識しながらデザインを行う中で、表現をどうデータへ具現化しようか行き詰まってしまった際のエピソードをご紹介します。デザイナーが実際にエンジニアに実装を相談し、検討、可能にするまでの制作現場の一幕をお楽しみください。「この背景って実装できるかな？」：デザイナーの疑問とある子ども園のサイトをデザイン中のこと。子ども園なので背景にも楽しげな柄を入れたくなり、ドット柄を敷くことにしましたが「あれ、この背景って実装できるかな？」とふとギモンが。デザインはこんな感じコンテンツの背景

sbtqe 2023/01/08

リンク

2022年にWebブラウザに実装された気になる機能を実装例とともに紹介

気付けば、もう年末ということで、2022 年に主要な Web ブラウザで実装された機能から個人的に気になったものをいくつか紹介します。本記事は、11 月 26 日に行われた JSConf.jp のサイボウズのセッションの中で紹介した内容の詳細版になります。このセッションでは、フロントエンドエキスパートチームのメンバーが 2022 年の印象に残ったフロントエンドトピックについて話していますので、興味のある方は是非ご覧ください！ (4:51:50 あたりから始まります) 主要ブラウザ全てで実装された機能ダイアログ要素 <dialog> Chrome Edge Firefox Safari

sbtqe 2022/12/17

リンク

CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon

この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで

sbtqe 2022/12/09

リンク

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の数学関数

sbtqe 2022/12/04

リンク

[CSS アニメーション] CSSのみで作るスライドショー

.hero-slide__img { animation-duration: 15s; // 長さ15秒 animation-iteration-count: infinite; // 無限に再生を繰り返す animation-name: slideAnime; // アニメーション名 animation-timing-function: ease; // 開始と完了を滑らかにする opacity: 0; // 透過設定 }

sbtqe 2022/12/01

リンク

【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita

こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。普段はCSSアニメーションで遊んだりしています。（頑張って作ったのでよかったら見てね！！！！！）何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！まえがきこの記事では各実例を独自の指標で評価して示しています。長い記事になる予定なので、部分的に読まれる場合の参考になさってください。実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。よく見る度：コーディングしていて出てくる頻度(n=1)。お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの

sbtqe 2022/10/14

リンク

webサイトで使えるオシャレなスライドショー20選【コピペOK】

今回の記事では、webサイトのメインビジュアルに設置することが多い、超オシャレなスライドショーのサンプルを厳選して紹介していきます。スライドショーといえば、slickslideやswiperなどが定番のプラグインですよね。オプションが豊富で汎用性が高いので、普段からお世話になっている人も多いはず。僕もコーディングを担当するときは大体ここら辺のプラグインを使うことが多いです。ですが、webサイトの花形であるスライドショーにいつも同じプラグインを使っていて良いんだろうか？ふとそんな疑問を抱いてしまう人もいるのではないでしょうか。今回はメジャーなプラグインに囚われず、柔軟な発想でオシャレな動きを実装しているスライドショーをまとめてみました。コピペで使うもよし、動きのアイディアだけ拝借するも良しです。中にはブッ飛んだ動きを実装しているものもあるので、いつものスライドショーに飽きてし

sbtqe 2022/09/20

リンク

【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ（会社）です。

<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head

sbtqe 2022/09/20

リンク

【CSSだけ】画像が横に流れ続ける無限ループの作り方 - IE11対応済み

CSSだけで実装できるので難しいことはありません。画像のサイズだけではすべて揃えておきましょう。画像が左方向に流れる無限ループについて説明していきます。 MTMLに書くこと <div class="d-demo"> <div class="d-demo__wrap"> <ul class="d-demo__list d-demo__list--left"> <li class="d-demo__it em"><img src="./images/test01.jpg" alt></li> <li class="d-demo__it em"><img src="./images/test02.jpg" alt></li> <li class="d-demo__it em"><img src="./images/test03.jpg" alt></li> <li class="d-demo__it

sbtqe 2022/09/17

スクロール

リンク

CSSで最後の要素にだけスタイルを適用させない、疑似クラス「:not()」と「:last-of-type」の組み合わせは便利

疑似クラスを使いなせるようになると、CSSはより楽しくなります。リストなど複数の兄弟要素を配置した時に、最後の要素にだけスタイルを適用しないようにするには、:not()と:last-of-typeを組み合わせると便利です。下記のように最後だけラインをつけないとか、marginやpaddingを変えるという時によく使用されるCSSのテクニックです。

sbtqe 2022/09/13

リンク

はてなブックマーク

タグ

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

CSSとWEB制作に関するsbtqeのブックマーク (167)

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス