タグ

2017年2月14日のブックマーク (3件)

  • レスポンシブ対応!CSSで画像を中央トリミングする方法 - Design Color

    追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…!というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう! CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1:object-fit版 「object-fit」というプロ

    レスポンシブ対応!CSSで画像を中央トリミングする方法 - Design Color
  • デザインする上で大切にしていること - デザイナーのイラストノート

    デザインしてますか?spicagraphです。ふだんツールに関する記事を書いたり、Twitterでつぶやいたりしていると「こいつ見た目のことばっかりやな」と思われそうで、めずらしくデザインするとき大切にしていることについて書きます。わたしの仕事は主にEC、LP、プロモーション、コーポレートサイトなので、UI/UXみたいなかっこいい話でないことは前置きしておきます(でもだいじなおしごとだよ!) デザインは誰のため? 大前提として、わたしは誰に向かってデザインしているのか。 わたしはフリーランス仕事をしているため「お客さん」がたくさんいます。仕事をくれた制作会社のディレクターさん、クライアント、ユーザーです。webサイトの「お客さん」はユーザーですが、ユーザーだけがいいと思うものだけが良いデザインだとは思いません。 webサイトは更新されていくものです、多くの場合はクライアントによって。とい

    デザインする上で大切にしていること - デザイナーのイラストノート
  • jQueryのIEが使えるバージョンとバージョンアップしても使えるようにする方法

    jQueryもこの記事を書いている現在では3.1.1まで新しいバージョンがでています。 しかし新しいバージョンをすぐ使用しようとすると使えないプラグインが出てきたり、既存のコードが使えないこともあるので、なかなか変更するタイミングがなかったりします。 またブラウザの対応もバージョンによっては使えなかったりもしますよね。 そこで今回はjQueryのバージョンはどのIEのバージョンに対応しているのかと、jQueryのバージョンを上げたいけど既存のコードはどうすればいいのかというのを調べました。 それぞれのjQueryはどのIEまで対応しているか 現在は大きく分けると1系・2系・3系があります、ChromeやFirefoxなどのブラウザはあまり気にせずとも大丈夫なことが多いですが、肝心のIEの対応バージョンは以下になります。 1.X系はIE8以前 2.X系はIE9~ 3.X系もIE9~、性能向上

    jQueryのIEが使えるバージョンとバージョンアップしても使えるようにする方法