CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の
Flexboxのjustify-contentで最後の行を左寄せにする方法
Flexboxのjustify-contentで最後の行を左寄せにする方法 Flexboxのjustify-contentではflexアイテムの配置方法が指定できます。 justify-contentに「center」と指定すればflexアイテムを中央寄せに、「space-between」と指定すれば両サイドを端に配置し中のflexアイテムを均等に、「space-around」と指定すればすべてのflexアイテムを均等に配置します。 以下は、justify-contentにspace-betweenを指定したサンプルです。flex-wrapにはwrapを指定してflexコンテナより溢れたflexアイテムは改行されるようにしています。 See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen. 一見、
総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
[ jQuery ]select要素（プルダウン・セレクトボックス）を装飾する – 東京のホームページ制作 / WEB制作会社 BRISK
[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する easyselectboxの使い方 更新日：2018/06/26 デザインされたフォームを設置したいとき、select要素（プルダウン・セレクトボックス）の装飾はcssだけではなかなかうまくいきません。 背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。 select要素の装飾用に作成されたjQueryのプラグインはいくつかありますが、 その中で使いやすかった「easyselectbox」を紹介します。 例えば、次のようなデザインのプルダウンを作りたいと思います。 まず、通常のプルダウンです。 これをcssで装飾してみましょう。 例えばこんな感じです。 .select-box { background: #FFFDF4; border: 2px solid #D2B
![[ jQuery ]select要素（プルダウン・セレクトボックス）を装飾する – 東京のホームページ制作 / WEB制作会社 BRISK](https://cdn-ak-scissors.b.st-hatena.com/image/square/31973cb09d723b2971c35ea9519ec57d8a5695f1/height=288;version=1;width=512/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F04%2Fselect.png)
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
今話題（？）の CSS 設計のメモ。 この「ある程度の規模」というのは、肌感覚としてテンプレートの枚数( ≠ Webサイトのページ総数)が 20P〜50P くらいのイメージ。 また、コーディング完了後に自分以外の人間による断続的な更新が入るという前提。 そして一番重要なのは「更新する人のスキルは定義しない。」ということ。つまり HTML の知識が乏しい人が更新する可能性があることを前提とする。 きっと1ヶ月くらいすれば変わると思うけど、自分の思想のログとして残しておく。 今ぼくは以下のことに気をつけながら CSS を書いている。 コードが長くなることを気にしない セレクタが長くなることを気にしない セマンティクスの実現の難しさを理解し、妥協する 再利用性より保守性 拡張しやすい設計 最初から最適化しようとしない ゴールは目先のパフォーマンス向上ではなく誰が触っても問題が起きにくい設計 ひと
CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
CSSの変態向き - ID, classを顔文字でコーディングする方法 - kojika17
HTMLのIDとclassに顔文字記述しても、CSSではスタイルが適用されません。 ただCSSをごにょごにょするだけで、ID, classを顔文字、日本語でもコーディングすることができます。 誰が得をするのか全くわからないけど、紹介します。 HTMLのID, classを顔文字にする HTMLのID, classを顔文字、または日本語で書きます。 下準備はこれでおｋ。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body ID="（( ◉౪≡౪◉ )）≡౪◉ )）"> <div class="(」・ω・)」うー！"> <h1 ID="(／・ω・)／にゃー！">にゃー！</h1> </div> </body> </html> CSSでごにょご
[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster
CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。 パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。 他のパネルも移動可能です。 対応ブラウザ Internet Explorer 9+ Firefox Chrome Safari Opera Gridsterの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></scri
[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookの左メニューのカウントを非表示にする方法 - tonobashi.net
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報