Avocode – Preview and inspect designs without Photoshop or Sketch.
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Avocode” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to all products offered by the Avocode
media=printとHTTPリクエスト
スクリーン向けスタイルシートと印刷向けスタイルシートを分けるように戻そうかと考えてた。過去ログ検索すると何度か切り替えてることがわかる。最近印刷向けとかに注意を向けてなかったので忘れてたけど、media=printとしてもHTTPリクエストは常に書いたところで走る。ので、別ファイルにするとHTTPリクエストがほぼ無駄な形で増えてしまう。 HTTPリクエストを無駄に増やさず印刷向けスタイルシートを別にするには、印刷前にJavaScriptでスタイルシート読んでやれば良さそう。スタイルシートの読み込みを待ってからprint()するボタンを用意するみたいのなら簡単そうだけど、印刷はブラウザーの機能を使ってもらいたい。となるとbeforeprintイベントを使うのが王道のようだ。 <link id="print-css" media="only print" href="/css/print.cs
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
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
monoe's blog - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com
いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のところ、どちらもベンダープレフィクスが必要 頻繁に使われるのは前者でしょうか。 transitionでさくっとアニメーション リンクにカーソルを載せると文字色が変わる、という例。 transitionプロパティで設定します。 値は「変化させたいプロパティの名前」と「変化にかける時間」です。 時間の単位はsで、secondsつまり秒です。 （ちなみにCSSは0.1を.1と記述する事が出来ます。） 複数
IE8 z-index on before and after css selectors
This is very frustrating.... http://jsfiddle.net/RRnm8/ <div id="target"> <p>Text to appear in front</p> </div> #target { position: relative; background: red; width: 200px; height: 200px; padding: 45px; } #target:before { content: "content from before, should be behind #target"; position: absolute; top: 10%; left: 10%; width: 100%; height: 100%; background: cyan; z-index: -1; } works well on every
terkel.jp
このブログを始めた理由がどんなものだったか、もう忘れてしまった。これまでブログのおかげで知り合った人もいれば得られた仕事もあり、そのことをありがたく思ってもいるが、かといってそれが目的だったわけではない。誰かの役に立ちたいなどと殊勝なことを考えたわけでもないし、とりたてて世に問いたい主張があったわけでもない。そもそも何か月もなにも書かずに放っておくことも珍しくなく、熱心に取り組んでいるとはとても言えない。 それでも僕はこのブログを手放すつもりはない。ここで僕は誰にも指図されず自由にものを書ける。その自由が自分にはあるのだと思うと、なかなか悪くない気分になる。ここはそういう場所だ。 最新の投稿 rlh単位 2023/12/23 いまのところとてもいい 2023/04/29 千駄木から金沢へ 2023/02/02 ナンバー・ナイン 2022/12/25 2020年版テーマ 2022/12/19
Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
「text-indent: -9999px;」の代替となる画像置換テクニック
[CSS]画像置換「-9999px」のパフォーマ... / 画像置換のあれ - {u:b} / 画像置換のあれへの補足 – terkel.jp他...全3件 「text-indent: 100% ＋ white-space: nowrap」を使う。パフォーマンス改善にもなるとのことだが、最近のハードウェアだとパフォーマンス上の利点は見つからなかったとのこと。 [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
BEM スタートガイド ― これからのWEB フロントエンド開発に必要な方法論に触れてみる | zerokara web
今年ぐらいからか、BEM というキーワードが国内外のフロントエンドな人達の間で使われたり議論されているのをよく見かけるようになりました。 私自身も何度か調べたりbem-tools に触れてみたりとしていたのですが、最近になってようやくBEM が何なのかが少しずつ掴めてきたような気がします。 そこで今回はまず第一弾として、これまで私がBEM について調べてきたこと、実際に試してみた上で理解したこと等を分かりやすくまとめたいと思います。 BEM について聞き慣れない方、ゼロから始めてみようという方々のスタートガイドとなれば幸いです。 BEM とは？ BEM とは、WEB サイト・アプリケーション等の開発において… ・メンテナンス性の高いものを短期間で開発すること ・チームでの作業効率を上げ、メンバーの追加・変更による影響を最小限に抑えること ・UI の質を保ち、変更に労力をかけないこと な
jQueryのfilterとfindの違い
jQueryで要素を対象要素を絞ろうと思ったときに限って、idで抜き出すのが難しかったりする。 そんなとき便利なのが、findメソッドとfilterメソッド。 けど、この２つは一見非常に良く似ている。ここに違いをメモしておく。 次のようなHTMLがあったとします。 <div>hgoe1</div> <div>hgoe2</div> <div>hgoe3</div> <div class="hoge">hgoe4</div> <div> <span class="hoge">hgoe5</span> </div> そこからfilterメソッドとfindメソッドでそれぞれ要素を抽出し、 抽出された要素からclass="hoge"のものを抜き出して処理を行います。 $(function() { // filterメソッド $('div').filter(function (index) { re
max6.css
max6.css inline-boxになっているので文章中に書けます。 とりあえずwebkit/firefox?専用 download max6.css max object クラス名 .max_obj metro 100 HTML <span class="max_obj">オブジェクト名</span> message box クラス名 .max_message hoge $1 HTML <span class="max_message">message</span> bang クラス名 .max_bang HTML <span class="max_bang"></span> inlet クラス名 .max_inlet 1 HTML <span class="max_inlet">数字</span> outlet クラス名 .max_outlet 1 HTML <span class
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress › Error
IE8 Bug with pseudo elements
ProCSSor - Advanced CSS Prettifier