[B! CSS] asonasのブックマーク

Grid 日本語版

なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。モバイルファースト最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは

asonas 2014/04/06

html5
CSS

リンク

CSSサンプル集

.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transf orm: skew(-25deg) rotate(5deg); -ms-transf orm: skew(-25deg) rotate(5deg); -webkit-transf orm: skew(-25deg) rotate(5deg); transf orm: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79

asonas 2013/09/03

リンク

今必要なCSSアーキテクチャ

下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる！フロントエンド勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------Read less

asonas 2013/08/26

リンク

Effeckt.css

Modals # Source: Codrops From Below From Above Slide In (right) Slide In (bottom) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Just Me 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Bottom From Top to Top

asonas 2013/07/19

css

リンク

なぜリセットではなく Normalize.css を使うのか | Yomotsu net

まずは、歴史をみてみよう。初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで

asonas 2013/04/15

リンク

CSS Flexible Box Layout Module Level 1 (W3C Last Call Working Draft, 25 March 2014)

CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 19 November 2018 This version: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/ Latest published version: https://www.w3.org/TR/css-flexbox-1/ Editor's Draft: https://drafts.csswg.org/css-flexbox-1/ Previous Versions: https://www.w3.org/TR/2018/CR-css-flexbox-1-20181108/ https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/

asonas 2013/04/02

css

リンク

09 | 8月 | 2009 | PAOLOG

モコモコつうしんスコティッシュフォールド「モコ」の日々の様子を写真と動画で紹介してます。もうメロメロ♡ ねこと赤ちゃんの初めての遭遇 2015.02.23(Mon.)

asonas 2013/03/28

css

リンク

Loading...

asonas 2013/03/27

css

リンク

csscomb.com

Click here to enter

asonas 2013/03/06

CSS

リンク

CSSだけで幅を超えた文字列を...で省略する - Qiita

ある幅に合わせて文字列を省略したいときがありますが、レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。 p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }

asonas 2013/02/24

リンク

Adobeアカデミックストア

Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, A

asonas 2013/02/15

css

リンク

Pixate - naoyaのはてなダイアリー

数日前に Pixate という iOS 向けミドルウェアがリリースされました。なんとiOSアプリの見た目を css で書けるという、全ウェブ開発者感涙のライブラリ。こりゃすげえ。ただし無料というわけにはいかず、18,000円くらいでこざいます。 2月9日追記トライアル版と、個人利用のための無料版が出たようです。 RubyMotion の teacupのように css チックな DSL で書ける、というものはありましたが Pixate はその辺とは次元が違ってて、普通に css ファイルに css を書くことができる。 button.blue { position: 60, 100; size: 200, 40; border-radius: 7px; font-family: 'Courier New'; font-size: 18pt; font-weight: bold; bord

asonas 2013/01/23

css
iOS

リンク

知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ

調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。

asonas 2013/01/23

html
css

リンク

Estelle Weyl :: Projects and Presentations

asonas 2012/12/13

リンク

GitHub's CSS Performance

A talk on some probl ems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012. I recorded the presentation from my laptop and posted it here https://vimeo.com/54990931

asonas 2012/12/11

リンク

2カラムスタイルのテスト - latest log

以下のスタイルを追加し div.box { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: flexbox; } div.boxLeft { min-width: 50%; } div.boxRight { min-width: 50%; } pre.code { min-height: 50px; } コードブロックの上下に、box, boxLeft, boxRightを追加することで、左にコードを書き、右で説明する的な記事が書けます。 <div class="box"> <div class="boxLeft"> ＞|javascript| function fn() { } ||＜ </div> <div class="boxRight

asonas 2012/08/13

べんり

CSS
display

リンク

ご存知、ないのですか？CSSの優先順位

Cssのセレクタ要素に点数つけて優先順位きめるお話。specificityの。 256個の.classを並べると#idを上書きの件について調べてみました。 http://tech.uni-q.net/design/2012/08/17/class/

asonas 2012/08/10

リンク

パララックスサイトの作り方の初歩

最近パララックス（視差効果）を取り入れたサイトが増えてきました。仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないのでそちらを使ったほうが楽かもしれません。パララックス効果のjQueryプラグインまとめあと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。スクロール量を取得するまずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー