[B! cording] go_uetsuharaのブックマーク

スマートフォンサイトの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; を適宜指定する。フォ

go_uetsuhara 2013/06/25

リンク

34のフリーで綺麗なXHTML/CSSテンプレート:phpspot開発日誌

34 Free & Beautiful xHTML/CSS Templates PSDFan 34のフリーで綺麗なXHTML/CSSテンプレート。実際にデザイナーさんに依頼したらいくらかかるんだろうというテンプレート集が惜しみもなく公開されてます。こうしたフリーのテンプレートの検索エンジンがあったら便利そうですね。関連エントリハイクオリティでフリーなXHTMLテンプレート61 XHTMLで書かれた汎用的に使える管理画面のテンプレートクールなデザイン満載のXHTML/CSSテンプレート４０種ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０

go_uetsuhara 2011/01/13

リンク

MdN Design｜総合情報サイト

作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 07] CSS Spriteを手軽に作成する文＝東孝之（（株）ゼネラル・プレス） Tool CSS Sprite Generator URL http://ja.spritegen.website-performance.org/ CSS Spriteは、読み込みのリクエスト数を減らすことができるので、ページ最適化に有効な手段だが、実装するのに手間がかかる。そんなときは「CSS Sprite Generator」を使うといい。「CSS Sprite Generator」は、複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレータである。これを使えば、複数の画像をひとまとめにして連結画像とCSSを作成し

go_uetsuhara 2010/05/25

リンク

複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」:phpspot開発日誌

The 1Kb CSS Grid by Tyler Tate :: A simple, lightweight approach 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」列数、列の幅、グリッド間の感覚を指定して「DOWNLOAD」ボタンを押すと、HTMLとCSSがセットになったアーカイブがダウンロードできます。開いてみると、次のようなレイアウトの基本になるようなHTMLが手に入ります。 CSSフレームワークを使っているものですが、ウェブ上でパラメータ調節できて簡単にジェネレートできるのはいいですね。関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」フリーで使えるCSSレイアウトのテンプレート配布サイト 42個のフリーCSSレイア