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

最近よく使用されているCSSの実装テクニック！レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(

edward 2023/02/07

css

リンク

任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」

CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality

edward 2022/11/28

css

リンク

【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK

もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ横並びを縦並びにするテーブルレスポンシブ疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブスクロールで表示させるテーブルレスポンシブ縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。ソース上は上から順番に要素が並んでいるので

edward 2022/06/17

css

リンク

【CSS3】で写真に色々装飾を加えてみた border-imageなど (枠・写真加工編【IE9以前は非推奨】 | たねっぱ！

どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー今回はお役立ち記事が [...] どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー今回はお役立ち記事が思い浮かばないので、装飾つくって遊んだだけです。こういうのお好きな方は参考にしたり、もっとこうしたほうがいいよね…など考える材料にしたりしていただけると幸いです。なお、今回IE9～6は無視してます。border-imageなどがIE10以降実装になってるからですね。 IEでも表示したい！って方はCSS3 PIEやcssSandpaperを使って対応させると良いですよ(´・ω・｀)ｂ今回写真は「ぱくたそ」さんから拝借いたしました。写真のチョイスは僕の趣味ですｗ包まる娘っていいよね♪(´・ω・｀) それではちょこちょこやっていきましょう！まずは、bor

edward 2017/12/15

リンク

[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog

こんにちは。Supership デザイナーのハガです。今回はcssのお話です。皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>

edward 2017/03/24

リンク

CSSで左に画像・右に文字列を配置するレイアウト - Webのあいラボ

左に画像・右に文字列のレイアウトを実現する方法を書いてみます。PCで見ないと表示が崩れる実現方法ばかりです（笑）レスポンシブデザインでスマホも適応させるならメディアクエリで表示を分けましょう。単純に画像を左側、文字を右側に回り込ませるなら画像に対して、floatをかけただけ。この方法だと画像が左、文字が右側に配置されます。文字が画像の高さより高くなった時、画像の下に文字が入り込みます。画像にfloat:left;がかかっているので、このあとも画像を配置するたびに文字が右に回り込みます。文字の回りこみを解除したい場合は、<div style="clear:left;"></div>などでfloatを終わらせる必要があります。 See the Pen EGBod by akiueo (@akiueo) on CodePen. 文字の高さが画像を超えても、文字列が崩れないように絶対値で指

edward 2016/10/25

CSS

リンク

アフィリエイト商品リンクをそれっぽく貼れるデザインスタイルを作ったので公開 - プログラミングとデザイン、スタートアップの話

Amazonや楽天などはカエレバのようなアフィリエイト商品リンクをお洒落に見やすくするツールが存在するのですが、 A8やアクセストレードのようなアフィリエイトASPや、アフィリエイトじゃない普通の公式サイトへの紹介リンクなどのスタイルを綺麗にしてくれるものがあまりなかったため、自分で作ったので公開します。 HTML CSS 今後もアイテムパーツ公開してきます ■これからWordpressでサイトを作るなら ▽レンタルサーバー ▽ドメイン取得 ■あなたにオススメの記事大したものではないのですが、もし私と同じように「商品リンクをそれっぽくはりたい」と思っている方がいれば使ってください。こんな感じで貼れるようになります（下のやつはスクショです。育毛系のアフィをやってることがバレますね）。 ■PCの場合 ■スマホの場合カード型のデザインで、どんなアフィリエイトサイトでも問題なく溶け込めるよう

edward 2016/08/21

リンク

CSSだけで作る動きのあるドロップダウンメニュー

では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ

edward 2015/03/09

リンク

CSSの制作・検証に役立つChromeの機能拡張のまとめ

CSSの制作時や検証時に役立つGoogle Chromeの機能拡張を紹介します。いくつか機能がかぶっているので、お好みのものをご利用ください。

edward 2012/11/04

リンク

もうfont-familyで悩まないための2行 « CSS « Snippet-Editor.com

body, textarea { font-family: "メイリオ", "ＭＳＰゴシック", sans-serif; } input, select { font-family: Arial, "ＭＳＰゴシック", sans-serif; } この2行のスタイルシートで、Windowsではメイリオフォント（なければMS Pゴシック）、Macではヒラギノ角ゴシック（Firefoxのみ例外時あり）で表示することができます。実際に適応すると、 Windows 7、またはVistaではメイリオで表示され Windows XPではMS Pゴシックに Windows XPで、且つメイリオを自分でインストールした人はメイリオに Mac OS Xではヒラギノ角ゴに（Firefox以外のMac用ブラウザでは日本語で書かれたフォント指定が無効になるため）と、なります。なお例外として、 MacにMS