タグ

テクニックに関するsuslovmikhailのブックマーク (2)

  • スマートフォンサイト制作時に覚えておきたいCSS 15

    スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

    スマートフォンサイト制作時に覚えておきたいCSS 15
  • CSS3 の border-radius を使って円形のサムネイルを作る方法2つ

    今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を2種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像(background-image)にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合

    CSS3 の border-radius を使って円形のサムネイルを作る方法2つ
  • 1