usako1124のブックマーク - はてなブックマーク

レスポンシブ対応！CSSで画像を中央トリミングする方法 - Design Color
追記この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。サムネイルの画像サイズがみんなバラバラ・・・サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。方法1：object-fit版「object-fit」というプロ
usako1124 2017/02/15
css
リンク
SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得するオリジナルSNSボタンを設置するシェア数取得〜SNSボタン設置までの流れおまけ：cssでフキダシの作り方仕上がりイメージ仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。今回もサンプルを作ってみましたよ〜。サンプルお世話になった記事今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
usako1124 2016/06/08
facebook
リンク
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ幅をデバイスサイズに合わせるスマホを横にしたときに文字が大きくならないようにする電話番号に自動的にリンクが付かないようにするリンクを押したら電話をかけられるようにするリンクを押したらGoogleマップアプリを起動させるリンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせるまずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにするスマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
usako1124 2014/06/10
css

html
リンク
1