ぼくの理想のボタンの padding 設定
初めての Zenn 記事です！ 先日ふと思い立ってこんなことをツイートしました。 ツイートした後、calc() 使えば？というリプライをいただいて、あ、できるかも、と思って試してみたらできた。という記事です。 CodePen のリンクを貼ります！ おわり？ お…終わっちゃった！（4行しか文章書いてない😅） これで終わっちゃうのも寂しいので一応ちょっとだけ解説してみます！ padding 部分の解説 CodePen みてもらえればと思いますが、最終的にこんな感じになっています。 .c-button { padding: max(calc(1em + (1rem - 1em)), 0.2em) max(calc(1em + (1rem - 1em) * 0.2), 0.4em); } やりたかったこととしては、こんな感じです。 基本、font-size に基づいて padding が決まる（
javascriptでスタイルシートを自在に操る(styleSheetsオブジェクト)入門基本編 | Unskilled?
スタイルシートに到達するには生javascriptを使用する必要があります(もしかしたらライブラリがあるのかもしれないが)。あまり需要のない事柄なのかこの手の日本語情報はwebでもあまり見つからない気がします。 jQuery全盛の時代スタイルシートを書き換える必要などどこにあるのか。@MINOにはあまりわからないです。 一つ懸念なのはstyle属性でのcss指定は「デザインを分離する」理念に反するのではないかと思うのです。SEO的にはどうなんでしょうか？ そこらへんの疑問もアリながらですが、生javascriptでゴリゴリするのも知識がついていいのではないかと思います。 javascriptでスタイルシートに到達する スタイルシートの種類 スタイルシートは大きくわけて2つあります。一つは<style></style>で囲まれた以下の様なインラインスタイルシートです。 //インラインスタイル
CSSのフォント指定と谷崎潤一郎｜yosh.ash｜note
CSS の font-family プロパティで「いろいろなサイトはどんなフォントを指定しているのかな？」を調べた際に感じたφ(..)メモメモの備忘録だ。最後に、今日時点での font-family 決定版を記しておいた。 前提 ・指定するのはゴシック体のみ ・明朝体は「さようなら」 ・できるだけ多くの人が読みやすいフォントを選ぶ 谷崎潤一郎とフォント谷崎潤一郎の「文章読本」にこのような文章がある。 我が国で一般に用いられている活字の大きさが小型に過ぎることは、前にも申し上げた通りであります。（前略）、我が国の如く美術的な文字を有し、楷、行、草、隷、篆、変態仮名、片仮名等、各種の字体を有する国が、それらの変化を視覚的効果に利用しないのは、間違っております。谷崎潤一郎は文章に対して、さまざまなコダワリがあったことで知られている。例えば、文章の頭で1マスあけない、など。「文章読本」も、これに則
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
CSS element() function - Vincent De Oliveira
CSS element() function published 8 years, 11 months ago (August 2015) In July, I wrote about advanced CSS filters techniques, such as backdrop-filter and filter(). Today, I want to share a much more awesome CSS feature. But before starting, let me warn you: the feature I’ll show is only supported in Firefox for now and no other browser vendor has shown interest with. Maybe, this could change in a
rel=subresourceを併用したCSSの遅延読み込み
クリティカルなんとかの関係やウェブ・フォントにおいて、CSSの遅延読み込みを行う気運は高まっている。様々なアイディアがあって、普通にCSSの内容を読み込んでhead要素に追加するものや、link要素を動的に追加するもの、予めlink要素をrel=stylesheetなしで書いておいて後で追加するものなどがその主なものだ。最後の手法ではrel=subresourceを追加して書いておくと、一部ブラウザーでダウンロードが速く始まるんじゃないかというアイディアを持った。 サポートが広いのでprefetchかなと思ったけど、書いたそのページ内で使うリソースの先読みに使うものではないような印象で、すぐさま使う場合はsubresourceの方が適切なようだ。Chromeがそういうイメージで実装してるという話で、ウェブ標準では特に細かく規定はないようではある。 <html> <head> <style>
なんでCSSすぐ死んでしまうん
The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
2013年度 今年流行する！7つのUI、Webデザイント レンドまとめ | Goodpatch Blog
こんにちは、だいきです。 2013年になってからもう二週間以上過ぎてしまいました。 新年になって海外の多くのブログで「2013年のWebデザインのトレンド！」 のような記事が出ていたので、UIデザイン会社であるGoodpatchのブログでは 「2013年に流行るであろうUIデザインのトレンドまとめ」をしてみたいと思います！ 1. アニメーション (参照: The Good Man http://thegoodman.cc/ ) このサイト「The Good Man」はブラジルのデザイナーさんが学校の卒業制作として作ったサイトだそうです。 一切画像を使わずHTMLとcss3で作られたのにも関わらず、一つのムービーを見ているかのようです！ このようなアニメーションがWebサイトで使われることで、コンテンツやサービスをよりユーザーに理解してもらえたり、Webサイトにおもしろい効果をつけられそうで
Retina Images
Retina Images serves different images based on the device being used by the viewer, all you have to do is create a high-res version of each image.Automatically serve high-res images, to those who'll appreciate them. View project on GitHub Download Retina Images (v1.0) Mouse-over to see the effect of Retina Images This demo actually replicates what happens on retina devices Back to top About Retin
CSS Sprite | デザイン事務所 流楽 ブログ
CSS Spriteは、画像が背景になってしまうので、 印刷した時に（標準設定では）印刷されないから使いにくい。 と、思っていたら、最近では色々な方法があって、 画像が印刷されるものもあることを、先日知りました。 最初の好き嫌いで判断して、中身を見ずに居たら、駄目ですね。 CSS Spriteの方法は色々ありますが、検索エンジンスパム的扱いを受けると怖いので、 Googleで使われているものなら大丈夫だろうと、 現在Google検索結果の左上ロゴで使われているものについて調べてみました。 以下は、忘れそうな自分の為のメモです。 ■ HTML ==================== <a href="index.html">テキスト<img src="images/aaa.jpg" alt="" width="200" height="100" /></a> ■ CSS =========
Sencha Touch での Sass 利用事例
開発部の川野です。今回も Sencha Touch をテーマに、記事を書かせて頂きます。 Sencha Touch と言えば、「綺麗な UI」が特徴ですよね （JavaScript だけで画面を構築する独特のスタイルも特徴ですが）。 本記事では、その綺麗な UI を支えている「Sass」「Compass」というツールについて、また、Sencha Touch で、それらをどのように利用しているかについて、少し覗いてみたいと思います。 Sass makes CSS fun again. Sass は、CSS の冗長性や、保守性・生産性の悪さを解決するために生まれた CSS の拡張言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。 Sass の具体的な説明は本記事では割愛させて頂きますが、一言で言うと、CSS の「プログラミング」を可能にしてくれます。押さえておきたい特
TABLEIZER! | Spreadsheets to HTML Tables Tool
Paste your cells from Excel, Google Docs or another spreadsheet here: Table Style Options
最近の案件でのSassの運用 - あと味
今進めている案件で、Sass + YUIを使っています。 どんな感じに運用しているかを紹介するとともに、自分用のメモとしてまとめておきます。 SCSSファイルの全容 _yui-reset.scss _yui-reset.scss は、YUI 3 CSS Resetをファイル名と拡張子だけ変更したファイル。 _yui-customized-fonts.scss _yui-customized-fonts.scss は、YUI 3 CSS Fontsを日本語フォントを考慮してカスタマイズしたファイル。 _yui-fonts-map.scss _yui-fonts-map.scss は、YUI 3 CSS Fontsのパーセントとpx数の対応を変数にしたファイル。 _utility.scss _utility.scss は、clearfixなどのサイト共通で使用するユーティリティスタイルをまとめ
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
個人サイトに Sass を導入してみた
_clearfix.scss �Qbe�U @mixin clearfix { clear: both; zoom: 1; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } } _grid.scss ���e�U � fc�U /*! Variable Grid System. Learn more ~ http://www.spry-soft.com/grids/ Based on 960 Grid System - http://960.gs/ Licensed under GPL and MIT. */ // Containers //----------------------------------------
Selectors Level 4
Selectors Level 4 W3C Working Draft, 11 November 2022 More details about this document This version: https://www.w3.org/TR/2022/WD-selectors-4-20221111/ Latest published version: https://www.w3.org/TR/selectors-4/ Editor's Draft: https://drafts.csswg.org/selectors/ Previous Versions: https://www.w3.org/TR/2022/WD-selectors-4-20220507/ https://www.w3.org/TR/2018/WD-selectors-4-20181121/ https://www
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンCSS設計の解説サイトまとめ - Qiita
kanapple.net - KANAPPLE.NET
