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

訳も知らないで

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

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…

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

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

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

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