[B! css][web] ytskのブックマーク

javascript-best-2016-may.html

最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。

ytsk 2016/05/17

リンク

React.jsとCSS3で長女のためにWEB絵本を作った話 - Qiita

まずはこちらの動画をご覧ください。こちらは娘が２歳半の頃に児童館で撮影したものです。かわいい・・・生後1000日近くともなると、子どもは自分で絵本を読むようになります。並行してひらがな覚え始めるので、親としてはガンガン絵本を読んでほしいのですが、実際には挿絵に合わせて適当な話を創をして遊んだり、まじめにひらがなを音読し始めたかと思えば数ページも読まないうちに次の絵本を引っ張り出してきては読んで、飽きてまた違う絵本に手を出すだけで、一向にちゃんと読んでくれません。ちゃんと読まない原因として、もしかして絵本に動きがないから飽きてしまうのでは、と思った自分はもしもパパが作った動く絵本があったら、娘は大喜びして本を読むようになり、どんどん集中力が身について、あいうえおもマスターしてパパ大満足！なんてことになるんじゃないだろうか。なんてことを考え、実際にWEB絵本を作成して娘に見せるま

ytsk 2016/04/13

良い

リンク

初心者向けリセットCSSを自作する手順まとめ

スタイルシートに記述したコードを読み込ませる前にブラウザがデフォルトで持つCSSをリセットする用途でリセットCSSは用いられています。今回はリセットCSSの基本的なことから自作する手順まで説明します。リセットCSSでリセットされているセレクタが「なぜ・どのように」リセットあるいは再定義されているか知ることによって、スタイルシートの理解をより深めてみましょう。リセットCSSとはリセットCSSとは、冒頭でも述べたとおり各ブラウザがデフォルトで持つCSSをリセットするために用いるCSSのことです。リセットCSSが必要になる理由なぜリセットCSSが必要になるかというと、ユーザーがChrome・FireFox・IEといったブラウザのどれを使ってもこちらが意図した表示を提供するためです。「リセットCSSを使うと制作が楽になるから」という理由ももちろんありますが、ブラウザ配慮はユーザー配慮であ

ytsk 2016/04/13

css
web

リンク

CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス

CSS Shapesでテキストを回り込ませるレイアウトを表現Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ CSS Shapes とはCSS Shapes を使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これが Web でも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロパティ

ytsk 2016/04/12

[

web
css

リンク

はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog

こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。アジェンダどんなものがあるか導入の背景と目的はてなでの選択何がやれるかどう使うか事例・実演運用ルール今後の展望どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs

ytsk 2015/08/26

css
web

リンク

【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。

ytsk 2015/08/18

リンク

Googleが推薦するHTMLとCSSのコーディング方法

2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ