[B! CSS] chu-son2のブックマーク

ブラウザにやさしいHTML/CSS

1. HTML/CSS 〜「お・も・て・な・し」をブラウザにも〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロントエンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──

chu-son2 2014/06/24

html
CSS

リンク

動くCSSのためのメモ。

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

chu-son2 2014/06/06

CSS

リンク

[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation

Vibrant Villages サークルのアニメーションは、ここではjQueryとちょっと複雑なHTMLが使用されています。 HTML: 参考 <div class="big-circle"> <div class="text-block"> <h6>Welcome to</h6> <h4>Vibrant Villages</h4> <h6>New Hampshire</h6> <h1>inform<br/>inspire<br/>implement</h1> </div> <ul class="circle"> <li><span class="orange"><span class="blue"></span></span></li> </ul> </div> CSS3 Circle Animationでは、HTMLをシンプルし、さらにCSSのみで実装してみようとしたソリューションで

chu-son2 2013/11/22

CSS

リンク

[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート

下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-it em">1</li> <li class="flex-it em">2</li> <li class="flex-it em">3</li> <li class="flex-it em">4</li> <li class="flex-it em">5</li> <li cla

chu-son2 2013/11/12

CSS

リンク

cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口

プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。では、cssとはいったいどういうものなのでしょうか。簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.

chu-son2 2013/11/05

CSS

リンク

新しいCSSの仕様を色々調べてみた

第3回HTML5ビギナーズ！（http://atnd.org/events/44530）の「新しいCSSの仕様を色々調べてみた」の資料です。『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』以下のCSS3の新しい機能の初心者向け資料です。・Flexbox ・Regions ・Shapes ・Multi-column Layout ・Grid Layout ・Exclusions Read less