WordPressとWebに関するkooltのブックマーク (3)

  • 日本語を用いて海外無料写真サイトを横断検索できる「O-DAN」CC0写真探しに

    O-DANとは O-DAN(オーダン)は、世界中の無料写真素材の中から理想の一枚を探すための写真検索サービスです。 写真の検索 例えば、O-DANで「cat()」と検索すると、以下のような検索結果が表示されます。 「検索キーワードにヒットした写真サイト」は、画面左側に以下のように表示されます。 あとは、左メニューに表示された、サイトをひとつひとつチェックすれば、自分のイメージしている写真を手軽に探すことができるようになっています。 一度チェックした写真サイトは、以下のように打ち消し線が表示されるので、見た目的にもわかりやすいです。 日語で検索すると英語に翻訳して検索してくれる O-DANは、簡単な単語キーワードなら日語で検索しても、勝手に英語に自動翻訳して、写真サイトを横断検索してくれます。 例えば、「カメラ」と日語で検索したとしても、 一括検索は「Camera」で行ってくれるので

    日本語を用いて海外無料写真サイトを横断検索できる「O-DAN」CC0写真探しに
  • margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話

    CSSで指定するwidth/heightは、特別な指定(後述)が無い限り赤の内容領域の大きさを指定することになります。 また青のboaderまでを含み要素とみなされるので、背景色を指定した場合はboader/padding/content areaの3つに色がつきます。 margin/border/paddingはそれぞれtop/right/bottom/leftの属性を持っているので、個々に指定することもまとめて指定することもできます。 このように要素が展開する領域の考え方をボックスモデルと呼びます。 marginとpaddingを使い分ける 同じように見える余白にも、明確に違いがあることがボックスモデルからわかるかと思います。 余白の表現に迷った時には、私は下のような基準で考えてmarginとpaddingを使い分けています。 boaderの内側の余白はpadding 背景色を含んでい

    margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話
  • 今さら聞けない、marginとpaddingの違い | たねっぱ!

    今回論理プロパティ(margin-startとか)は説明に入れません。(IE8以前は未対応だし。。。またおまえかIEたん;) これは後日「【CSS】marginについてちょっと気出して説明してみた」にて詳しく説明いたします。 ではまず、ボックスモデルを確認してみましょう。 このように、marginとは要素の外に対するものなのです。 なので、たとえばdivに背景色を付けていても、marginは外の間隔のことなので、marginの領域にそのdivの背景色は付きません。 なんのこっちゃ抹茶に紅茶な方は、borderやbackgroundを付けてみましょう。 実際にやって見るとよくわかります。百聞は一見に如かずです( ー`дー´)キリッ ではもっとわかりやすくするため、divを並べてみましょう。 <style> .contBox { width: 480px; padding: 25px 0;

    今さら聞けない、marginとpaddingの違い | たねっぱ!
  • 1