[B! css] tohokuaikiのブックマーク

【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

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

tohokuaiki 2022/07/15

へー。

css

リンク

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

tohokuaiki 2021/11/18

あぁ、calcが出た時﹁こんなんなんでもいけるやん﹂とは思った。でも、変数使ったらそれこそスパゲッティsass の出来上がりで軽く死ねるな、とも。 ●css

リンク

JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）

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

tohokuaiki 2021/03/02

css

リンク

★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス

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

tohokuaiki 2020/09/28

これいいいじゃんって思ったけど、IE11で崩れた…“html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;}”

css

リンク

「(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 でテーブルに行番号を振る - QiitaCSSで見出しタグに連番をつけ

tohokuaiki 2020/07/15

ふふっ( *´艸｀)てなる。

css

リンク

Flexbox Cheat Site

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

tohokuaiki 2020/05/26

いつの間に主要ブラウザでサポートされている状況になったんだ…知らんかった…

css

リンク

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しか説明してくれません。解決方法があるにはあるのですが、透

tohokuaiki 2020/05/08

背景画像をボヤっとさせる。すごいな。

css

リンク

デバイスで見かける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

tohokuaiki 2019/09/23

css

リンク

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

tohokuaiki 2019/08/21

かなｃ“kana and katakana for Japanese input but they were never implemented by any browser ”

css

リンク

モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック

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

tohokuaiki 2019/06/18

リンク

TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ

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

tohokuaiki 2019/05/08

そもそも最近のUIってなんぞや？ってことも押さえておきたい。

css
ui

リンク

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

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

tohokuaiki 2019/03/13

﹁とりあえずBootstrapを入れてもらって使わない﹂をよくやる。デザイナーはグリッドシステムだけ使って、あとは自前で良いと思う。まぁこの筆者はそのグリッドが嫌っぽいが。にしても、SCSSは欲しいだろうと思うが。 ●css

リンク

CSSセレクタのチートシート｜37パターンを一覧で解説

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

tohokuaiki 2019/02/08

css

リンク

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-transf orm: translateY(4px); transf orm: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

tohokuaiki 2019/01/25

リンク

スマートフォン表示で、はみ出したtableをスクロールさせるCSS

このようにtableを横スクロールさせるには、HTMLとCSSを編集すれば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>

tohokuaiki 2018/07/20

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の内容</

tohokuaiki 2018/07/20

テーブルをレスポンシブに。

css

リンク

[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

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

tohokuaiki 2018/03/02

いつもの中央寄せ

css

リンク

Web制作で気になることのアンケート結果（2017年版）

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

tohokuaiki 2018/01/24

へー、LESSってあんまり使われてないのか？ってこのアンケートの母数の偏りが大きい雰囲気もするので。

CSS

リンク

SVGでリアルな湯気を作ってみる｜ Tips Note by TAM

もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。それが﹃湯気﹄です。イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える﹃SVGで作るリアルな湯気﹄を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書くまずはSVGで湯気の形を自由に書いてみてください。難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動すよりリアルな動きに見せるため、SVGで書いた湯気を動かします。ここも動き