タグ

cssに関するtohokuaikiのブックマーク (80)

  • ChatGPT - CSS 隣接兄弟コンビネータ | SCSSでネストを逆にするやつ

    tohokuaiki
    tohokuaiki 2024/12/04
    変更例: scss コードをコピーする .bar { @at-root .foo#{&} { font-size: 10px; } } 出力されるCSS: css コードをコピーする .foo.bar { font-size: 10px; }
  • display:contents;って何?どんな時に使うと便利なの? - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents;

    display:contents;って何?どんな時に使うと便利なの? - Qiita
    tohokuaiki
    tohokuaiki 2024/08/30
    button要素以外ならもうどのブラウザも使えるのか。https://caniuse.com/?search=display%3Acontents
  • 【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

    概要 みなさんは、このドロップシャドウを見てどう思いますか? ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね? この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう! ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは2次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。

    【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
    tohokuaiki
    tohokuaiki 2022/07/15
    へー。
  • 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数学関数

    CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
    tohokuaiki
    tohokuaiki 2021/11/18
    あぁ、calcが出た時「こんなんなんでもいけるやん」とは思った。でも、変数使ったらそれこそスパゲッティsass の出来上がりで軽く死ねるな、とも。
  • JavaScript不要!CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報(株式会社アーティス)

    スマートフォンサイトでよく使われるメニューに三線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三線のアイコンがハンバーガーに見えるためそう名付けられました。この三線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ

    JavaScript不要!CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報(株式会社アーティス)
  • ★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス

    高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1

    ★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
    tohokuaiki
    tohokuaiki 2020/09/28
    これいいいじゃんって思ったけど、IE11で崩れた…“html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;}”
  • 「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita

    続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ

    「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita
    tohokuaiki
    tohokuaiki 2020/07/15
    ふふっ( *´艸`)てなる。
  • Flexbox Cheat Site

    Webエンジニアとデザイナーのための CSS Flexbox チートシート

    Flexbox Cheat Site
    tohokuaiki
    tohokuaiki 2020/05/26
    いつの間に主要ブラウザでサポートされている状況になったんだ…知らんかった…
  • Background-image(背景画像)を透過させるCSS|おがわ

    マーケティングトレースを行った次の日は、CSSの初歩的でもないお話です。 CSSのBackground-imageを透過させたい、というのは、Webページ作ってりゃ誰しも思うことです。 img要素やdiv要素であればopacityを設計すればおわりです。 しかしこれがbackground-imageを使うときは、若干話が変わってきます。 というのも、background-imageにはOpacityが適用されません。 まあ、当然と言えば当然です。background-imageは要素じゃないもん。 透過したいからと言って「opacity」でググっても、img要素やdiv要素を投下させる方法ばっか。そりゃそうですよ。background-imageにはopacityが効かないのですから。 サルワカくんもdivとimgのopacityしか説明してくれません。 解決方法があるにはあるのですが、透

    Background-image(背景画像)を透過させるCSS|おがわ
    tohokuaiki
    tohokuaiki 2020/05/08
    背景画像をボヤっとさせる。すごいな。
  • デバイスで見かけるON,OFFのボタンをhtmlとcssで実装してみる | スターフィールド株式会社

    /*** iOS ***/ .switch__label { width: 50px; position: relative; display: inline-block; } .switch__content { display: block; cursor: pointer; position: relative; border-radius: 30px; height: 31px; overflow: hidden; } .switch__content:before { content: ""; display: block; position: absolute; width: calc(100% - 3px); height: calc(100% - 3px); top: 0; left: 0; border: 1.5px solid #E5E5EA; border-radiu

  • Everything You Ever Wanted to Know About inputmode | CSS-Tricks

    Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid

    Everything You Ever Wanted to Know About inputmode | CSS-Tricks
    tohokuaiki
    tohokuaiki 2019/08/21
    かなc“kana and katakana for Japanese input but they were never implemented by any browser ”
  • モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック

    ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール

    モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
  • TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ

    デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをTailwindCSSで実装するテクニックを紹介します。

    TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
    tohokuaiki
    tohokuaiki 2019/05/08
    そもそも最近のUIってなんぞや?ってことも押さえておきたい。
  • CSS フレームワークを使いたくない - ジンジャー研究室

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

    CSS フレームワークを使いたくない - ジンジャー研究室
    tohokuaiki
    tohokuaiki 2019/03/13
    「とりあえずBootstrapを入れてもらって使わない」をよくやる。デザイナーはグリッドシステムだけ使って、あとは自前で良いと思う。まぁこの筆者はそのグリッドが嫌っぽいが。にしても、SCSSは欲しいだろうと思うが。
  • CSSセレクタのチートシート|37パターンを一覧で解説

    CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

    CSSセレクタのチートシート|37パターンを一覧で解説
  • CSSで作る!押したくなるボタンデザイン100(Web用)

    .btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

    CSSで作る!押したくなるボタンデザイン100(Web用)
  • スマートフォン表示で、はみ出したtableをスクロールさせるCSS

    このようにtableを横スクロールさせるには、HTMLCSSを編集すればOKです。 1、HTMLの編集 まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。 <div class="scroll"> <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">インターネット回線</td> </tr> <tr> <th>初期費用</th> <td colspan="5">事務手数料3000円 + 標準工事費0円</td> </tr> <tr> <th>プラン</th> <td>30Mコース</td> <td>50Mコース</td> <td>100Mコース</td> <td>200Mコース</td>

    スマートフォン表示で、はみ出したtableをスクロールさせるCSS
  • コピペ可!CSSだけでレスポンシブテーブルをつくろう

    こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html <table class="table01"> <thead> <tr> <th></th> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <th>項目1</th> <td label="ヘッダー1"><p>項目1の内容<br /> これで長くなった時に対応できます。</p></td> <td label="ヘッダー2"><p>項目1の内容</

    コピペ可!CSSだけでレスポンシブテーブルをつくろう
    tohokuaiki
    tohokuaiki 2018/07/20
    テーブルをレスポンシブに。
  • [CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

    子要素を親要素の左右の中央寄せに配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置 単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置 「position

    [CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス
    tohokuaiki
    tohokuaiki 2018/03/02
    いつもの中央寄せ
  • Web制作で気になることのアンケート結果(2017年版)

    Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。 アンケートの実施期間は2017年1月〜8月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100〜300件前後で、私のフォロワーの方が多いと思われます。 (ご回答いただき、ありがとうございます。) 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日全国様々な地域の方がいます。 98% が日在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジーWebデザイン、コンピュータープログラミングなどとなっています。 性別(推定)は 73% が男性、27% が女性となっています。 IE対応について Web制作

    Web制作で気になることのアンケート結果(2017年版)
    tohokuaiki
    tohokuaiki 2018/01/24
    へー、LESSってあんまり使われてないのか?ってこのアンケートの母数の偏りが大きい雰囲気もするので。