[B! レスポンシブ] lavitaebellaのブックマーク

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができるサポートブラウザ minmax()の基本的な使い方

lavitaebella 2017/06/14

リンク

なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログで、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。まずは推奨の記述方法からレスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです：とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブしておいて、使う時にもう一度見な

lavitaebella 2014/10/07

リンク

mrova.com - このウェブサイトは販売用です！ - mrova リソースおよび情報

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

lavitaebella 2014/02/18

リンク

MovableTypeでレスポンシブWEBデザインでSEOに強いテーマを無料配布します

一時期は絶大な人気を博していた MovableType も、今となっては完全に WordPress 一人勝ち状態。今導入するならどっち？と聞かれれば迷わず WP をおすすめするところ。しかしながら10年近く MT でブログを運営してきて、いろいろ独自patchを当てて運用しているので、今更MT以外に乗り換えがきかないところまで来てるのが、当ブログの実態。自分のブログのアクセスも PC 以外のアクセスがほぼ半数になってる状況もあり、そろそろモバイル対応でもするかなと思い立ったのが 2013年12月ほど。年末年始の空き時間を見つけて一気に作りこんでレスポンシブWEBデザイン対応させました。モバイルデバイス対応も WP なら豊富に見つかるのですが、MT は全然イケてるテーマが見当たりません。一言で言うと『MT にも STINGER3 みたいなテーマが欲しいんです！』そう思って探しまくってみ