読者です 読者をやめる 読者になる 読者になる

ジンジャーエール買って

デザイン&プログラミングのことも書くし、それ以外のことも書く。

Atomic DesignでWebサービスのフロントエンドをイメージする

Atomic Designというコンポーネントを組み合わせてシステムを構築していく手法がイメージしやすそうだったので、実際にWebサービスのフロントエンドデザインに当てはめるとどんな感じになるのか考えた。 Atomic Designについてはこの辺を参照 Atomic Design …

【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。

擬似要素のcontentについてそういえば調べたこと無かったのを反省。 擬似要素はJSから操作できない ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、 調べた感じ、JSで擬似要素は変更できないぽい。 (CSS…

【css, js】横並びにした要素の高さをそろえる方法。

HTMLで要素を横並びにした場合(float,inline-block)、高さをそろえる方法。 css3のFlexible Boxを利用する場合 古いブラウザを考慮しなくて良いのならこれで。〜参考にさせていただきました!〜 CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LI…

【CSS】擬似要素を使って装飾を行う場合、ie8は::擬似要素というcssセレクタを理解しないことを利用する

css

Webデザインにおいて、CSSでちょっとした装飾を行う場合 擬似要素の:afterや:beforeを使うことがありますよね。 例えばこんなの↓ 〜参考にさせていただきました!〜 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートの…

HTMLメールコーディング(デザイン)でちょっと困ったこといくつか。

css

HTMLメール作成で困るのが、 メールクライアント(サービス)毎に対応しているCSSが違うこと… スタイルはインラインで指定するとかtableレイアウトじゃなきゃダメとかいろいろあるんですが、 先日HTMLメールを作成した時に「これもダメなの?」という細かい問…

【sass】インターポレーションがmixin名に使えたらいいのに…

compass(-rails)のスプライト機能を使っていた時のこと… photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 記すに足らず。 (Retina用の)画像を、以下のように3つのディレクトリに分けてapp/assets/images/spr…

photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ

RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた&CSS設計について初めて…

RailsでSassの読込させる時気をつけること。

RailsでSassを書いていた時(sass-rails使用)、なんかsass内で定義しているはずの変数が見つからないとか言われたりして うまく読み込まれず困っていました。 その時のapplication.css.scss /* *= require_tree . *= require_self */ @import "scss_file1"; @…

はじめてSass(Compass)を使ってみた&CSS設計について初めて考えてみた(SMACSS)時の感想

とあるWebサービスを作った時に初めてCSSの設計(SMACSS)を考え、Sass(Compass)も使ってみたのでちょっとした感想を。 CSSの設計をSMACSSを元にして考えてみた。 今まで関わってきたプロジェクトのCSSというのが、 ・共通部品用css一つ ・あと機能(ページ)ご…

【html/css】aタグやinputでボタンとか作るときに文字を消す方法 〜text-indent使わずに〜

よくaタグやinputタグのbackground-imageに画像を設定してボタンを作ることがあると思うのですが、 何かテキストを書いてしまうと画像の上にテキストが表示されて邪魔な時が。で、よく用いられるのがtext-indentでテキストを見えない位置まで持っていく方法…

HTMLメールを作る。 〜画像を使わずボタン、outlook2007(2010)との戦い、テスト配信〜

最近HTMLメール、増えてきましたよね。 ただ作るとなると、各メールクライアントで表示が微妙に異なるため チェックが大変。。今回画像なしでボタンを配置しようと思ってあれやこれやしてみました。 HTMLメールについて 普通のHTMLページ?を作るのと違う部…