css
Atomic Designというコンポーネントを組み合わせてシステムを構築していく手法がイメージしやすそうだったので、実際にWebサービスのフロントエンドデザインに当てはめるとどんな感じになるのか考えた。 Atomic Designについてはこの辺を参照 Atomic Design …
擬似要素のcontentについてそういえば調べたこと無かったのを反省。 擬似要素はJSから操作できない ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、 調べた感じ、JSで擬似要素は変更できないぽい。 （CSS…
HTMLで要素を横並びにした場合(float,inline-block)、高さをそろえる方法。 css3のFlexible Boxを利用する場合 古いブラウザを考慮しなくて良いのならこれで。〜参考にさせていただきました！〜 CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LI…
Webデザインにおいて、CSSでちょっとした装飾を行う場合 擬似要素の:afterや:beforeを使うことがありますよね。 例えばこんなの↓ 〜参考にさせていただきました！〜 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートの…
HTMLメール作成で困るのが、 メールクライアント(サービス)毎に対応しているCSSが違うこと… スタイルはインラインで指定するとかtableレイアウトじゃなきゃダメとかいろいろあるんですが、 先日HTMLメールを作成した時に「これもダメなの？」という細かい問…
compass(-rails)のスプライト機能を使っていた時のこと… photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 記すに足らず。 (Retina用の)画像を、以下のように3つのディレクトリに分けてapp/assets/images/spr…
RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた＆CSS設計について初めて…
RailsでSassを書いていた時(sass-rails使用)、なんかsass内で定義しているはずの変数が見つからないとか言われたりして うまく読み込まれず困っていました。 その時のapplication.css.scss /* *= require_tree . *= require_self */ @import "scss_file1"; @…
とあるWebサービスを作った時に初めてCSSの設計(SMACSS)を考え、Sass(Compass)も使ってみたのでちょっとした感想を。 CSSの設計をSMACSSを元にして考えてみた。 今まで関わってきたプロジェクトのCSSというのが、 ・共通部品用css一つ ・あと機能(ページ)ご…
よくaタグやinputタグのbackground-imageに画像を設定してボタンを作ることがあると思うのですが、 何かテキストを書いてしまうと画像の上にテキストが表示されて邪魔な時が。で、よく用いられるのがtext-indentでテキストを見えない位置まで持っていく方法…
最近HTMLメール、増えてきましたよね。 ただ作るとなると、各メールクライアントで表示が微妙に異なるため チェックが大変。。今回画像なしでボタンを配置しようと思ってあれやこれやしてみました。 HTMLメールについて 普通のHTMLページ？を作るのと違う部…
