今年もCSSの進化がすごいです！ 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。 まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます（全部をコードにしたらページが重すぎました）。
Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement. All posters were recreated and animated with CSS by Jon Yablonski. Special thanks to Jordan O'Leary for dropping the Javascript wisdom. Share this Project on Twitter
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。 もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。 FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。 FOX CSS FOX CSS -GitHub Flexboxの各プロパティの使い方は、以前の記事を参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 FOX CSSの特徴 FOX CSSの使い方 FOX CSSのリセット FOX CSSのFlexbox FOX CSSの特徴 FOX CSSはモバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークで構成されています。 ライセンスはCC BY 3.0で、個人でも
floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の配置の優先順位 6. フロート要素で親要素を広げない フロートのクリア clearfix floatのルール floatプロパティには、4つの値があります。 .foo { float: left | right | inherit | none } この4つの値はそれぞれ、要素を親要素の中でどの
1:1 や 2:1 など比率を維持したままグリッド配置するときに重宝する CSS の小ネタです。 JS を使ってわざわざ height の値を計算する必要がなくなります。 1. padding の特性を理解する CSS のみで比率を固定する場合 padding の値を利用します。 padding は % で値を指定した場合、width の数値を基準 (100%) とします。 この単純な仕組みを理解しておけば好きな比率の要素を作ることができます。 2. コードを書いてみる 実際にコードを書いてみます。 まず、 :before 擬似要素に padding-top で要素の比率を指定します。 要素内が padding-top で埋まってしまうのは absolute 属性の .inner を配置することで回避します。基本はこれだけです。 <div class="box ratio-1_1"> <d
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
※ほとんどメモレベルです。気にしないでください。 ●ちゃんと動きます。 ●もっとイイ表記があるかも知れません。 ●変な所はご指摘頂けると嬉しいです。 ●一応operaで分けちゃってます。（意味ない？） ブラウザで分ける PC、スマホ、タブレットを判別。 スマホの場合はbrowser,chrome,firefox,旧opera,iphoneで分ける。 そもそも何故、分けたのか。 ●スマホで見た場合、表示差異がかなりあった。 ●AQUOSフォンがそもそもの発端。 AQUOSフォンだけ、なぜか全体的に小さく表示される。 viewportで【 target-densitydpi=220 】を指定すると表示が統一された。 ●その他の機種はそんなに問題はなかった。 やっかいになった… こうした事で、androidのデフォルトブラウザとchrome、fox、またiphoneとの間で大きな差異が生まれてし
スマートフォンやタブレットでのアクセス時に異なるcssを読み込ませるシーンはよくありますが、 異なるjavascriptを読み込ませることもあると思います。 UA判別でjavascriptファイルを変えようとサクッと下記を記述したところ、 <script> (function(){ var _UA = navigator.userAgent; if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) { document.write('<script type="text/javascript" src="/js/sp.js"></script>'); }else{ document.write('<script type="text/javascript" src="/j
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
ただ、この現状だと幅が768ピクセル未満は全て同じと見なされるので、iPhoneの縦と横で同じレイアウトになってしまいます。 そのため現状だと、@media only screen and (min-device-width: 320px) and (orientation: portrait) { /* CSS Here */ }など、メディアクエリで対応するしかないのですが、もっと簡単にレイアウトできればということで調べたところ、もちろんBootstrap側でカスタマイズ出来るオンラインルーツが用意されていました。 ※ Customize and downloadのページから自由なブレイクポイントでカスタムしたCSSが作れます。 でも、これをパッと見て理解できる人は多くはないハズ。ですよね。 ということで、簡単に実現する方法として、480pxでもう一つブレイクポイントを作ることができる
oocss 参考 知っておきたいHTMLテンプレート設計法 - OOCSSの基本 ルール 場所に依存した指定方法をしない レゴのように考える スキン 装飾など。smacssでいうモジュールの部分。 構造 骨格。 smacss 参考 SMACSSによるCSSの設計 ベースとレイアウト つくってるプロジェクトでは、oocssだけで十分で、smacssはガチで取り入れなくてもいい気がした。理由↓ レイアウト>>使う機会が少ない。gridなどを使う機会があまりない。あるとしても、oocssでいう骨格を作るのと同等（な気がしている）。 テーマルール>>使わなそう モジュール>>oocssのスキン的な考えで十分 状態>>これは普段からやっている気がする。 ベース 要素そのもののデフォルトスタイル レイアウト ページをエリアごとに分割 モジュール 再利用可能なパーツ 状態（ステート） レイアウトやモジュ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
