[B! *あとで読む][css3] uraraiのブックマーク

html/css 参考サイト総まとめ

作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。エンジニア速報は Twitter の@commteで配信しています。もくじ定番まとめ１．勉強になるテクニック／サンプルまとめ基本知識２．セレクタ３．メディアクエリ４．コーディング規約５．フォント６．CSSスプライト７．アニメーション８．正確なHTML使用方法９．CSSハック１０．書き方／読み方定番まとめ

urarai 2013/10/22

あとでよむ

リンク

スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

display:table-cell; を活用するリキッドレイアウトのコーディングにすごく便利。親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。均等に横並びにしたいときに。タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。フォ

urarai 2013/06/26

リンク

レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net

いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法それぞれをコードで表すなら以下の書き方が該当します。方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">

urarai 2012/10/06

リンク

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

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.

urarai 2012/03/09

リンク

CSS3を使ってできる画像まわりのエフェクトやスタイリング18

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレームまとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません