HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
box-shadow vs filter: drop-shadow
This post is the first topic I discussed in my jam session presentation at Fronteers 2012. It’s about the drop-shadow filter. You may have looked at it and thought “this is pretty much the same thing as a box-shadow” right? Well, not exactly. The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element. Have you ever wanted a box-shadow that follow
Foundationよりcool! 軽量フレームワークPureを紹介 - Qiita
CSS Advent Calendar 2014 四日目です。二日連続ではありますが、YuZakuroが担当します。 さて昨日はFoundationを紹介しましたが、これはbootstrapと同じく重量級のフレームワークでした。今日は、少し志向を変えて軽量級のフレームワークであるPureを紹介したいと思います。 特徴 なんといっても軽量! zipファイルをダウンロードすると76KBでした(bootstrapは226KB, Foundationは160KB) 機能は十分。軽量と言っても、グリッドシステム、フォーム、ボタンなど、基本的なものは全部揃っています カスタマイズが容易。Skin Builderが公式から提供されています。 導入 公式サイトからzipファイルでダウンロードするか、YahooのCDNを使用して以下のように記述します。
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
【小ネタ】CSS だけで Table 要素をレスポンシブ対応させる方法 | PSYENCE:MEDIA
display－スタイルシートリファレンス display - CSS | MDN このように table は関連する各要素に対して固有の display 属性がデフォルトで設定されています。決して table という HTML タグ自体がテーブルレイアウトを実現しているのではありません。ならばこの dispaly 属性を CSS 側でどうにか制御すれば、モバイル端末といった表示領域が狭い環境にも適したレイアウトが組めるということになります。 DEMO See the Pen Blocked table - Demo of Responsive table by wakamsha (@wakamsha) on CodePen. こちらのデモをベースにしていきます。 とりあえず全部ブロック要素にしとけ 何も考えずに全てのtable 関連要素をブロック要素にしてみました。当然ですが、全てのセル
The Gooey Effect | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist blogging about them myself several times. Much better this time: we got the man himself to explain how SVG filters work
Menu to cross icon
One idea, possibilities Scroll down to discover different ways to do it <span id="x"></span> span { display: block; width: 30px; height: 30px; cursor: pointer; border-radius: 0px; margin: 15% auto; -webkit-transition: all .3s ease, -webkit-transform .2s ease; transition: all .3s ease, transform .2s ease; background: -webkit-linear-gradient(top, transparent 0%, transparent 20%, #2E313C 20%, #2E313C
CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita
新規JekyllプロジェクトにBourbon, Neat, Bittersをインストールして作業したら、とても快適だった。 Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. – Bitters という説明の通り、新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。 Bootstrapではスタートダッシュできるけど使い捨てのコードになりがち。ところが、Bittersのコードは長期的なメンテナンスにも耐えうる（はずだと筆者は判断している）。 コンテンツファースト アクセシビリティファースト モバイルファースト インブラウザーデザイン といった考え方や手
コーディング中はブラウザにガイドを引こう - Qiita
PSD上でどんなに1px単位でこだわってもマークアップ時に再現されなければPSDは「絵に描いた餅」ですし、 むしろPSD上でのゴネゴネの時間をCSSの微調整に当てるべきと思っています。 そんな時、ブラウザ上で任意のガイド線を得るために自分は下記のようなやり方をしています。 body:target { //ガイド線 .area-main { &::before { //水平方向の中心線を引く display: block; position: absolute; width: 1px; height: 100%; background: cyan; left: 50%; top: 0; z-index: 10000; content: ""; margin-left: -1px; box-shadow: -493px 0 0 0 cyan, 493px 0 0 0 cyan; //中心からの
フロントエンドパフォーマンス向上ルール - Speaker Deck
Transcript Leading Edge Development 勉強会 フロントエンドパフォーマンス向上ルール はじめに ▪Webサイト⾼高速化 / パフォーマンス改善の重要性 【Aberdeen Group Report】 ・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。 ・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。 ・⼀一般的に表⽰示スピードが1秒遅くなると、 PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。 【Jakob Nielsen】 ３つの重要限界 ・⼼心理理的・感情的な違和感を感じないのは0.1秒まで ・思考の流流れが妨げられないのは1秒まで ・注意⼒力力を維持する限界の時間は10秒まで はじめに ▪パフォーマンス改善の⼿手段 【改善箇所】 ・パフォーマ
なんでCSSすぐ死んでしまうん
The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer
脱カオスなCSSのために実践している7つの事 - Toro_Unit
突然ですが、CSSってカオスですよね。 CSSはすべてを命名で統制をとる紳士協定 #frontrend — (╯°□°）╯︵ uɐʇoɔod (@pocotan001) 2014, 6月 21 まぁそうですよねー。紳士協定とはうまいこと言ったもんです。言語仕様としてどうしようもない。全部グローバル。JavaScriptとかでやったらまずクソコードって言われるやつです。 そうはいっても、レスポンシブだとかでどんどん肥大化していく一方なので、何とかしないと身の破滅です。 とりあえず結論として、FLOCSSやれば良いんじゃないですかね。と言ってしまうのもあれなので、とりあえず実行している事を箇条書きで。 とりあえず何かしら公開されているCSS設計思想を取り入れる。 何かしら入れましょう。SMACSSでもMCSSでもFLOCSSでもモジュール組みでも、とりあえずなんでも良いかと思います。大事なのは
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
counter-incrementプロパティを使って自動連番を実現する – mororeco
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやolタグで実現可能ですが、「第1章」や「Q1.」などのように数字と文字を合わせて挿入することは出来ません。そういった際にcontentプロパティを使用します。 カウンタの制御は、counter()、またはcounters()の形式で、()内に「カウンタ名やスタイル（list-style-type）、区切り文字をcontentプロパティに指定します。通常のカウンタはcounter()を用いて、同じカウンタ名のリストがネストされた入れ子構造のリスト等の場合には、counters()で一括指定が可能です。
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css2scss - from css to scss
https://qiita.com/debiru/items/28d54b5c1e295d880cd3
Pleeease Casino ▷ N°1 en France des jeux d'argent en ligne 🏅
culture27.com