どもです。

CSSで影を付けるといえばbox-shadowですが、近年、透明pngに影をつけたい、疑似要素も含めて影を付けたいなどのニーズに応えるfilter:drop-shadow()が登場しました。

で、以前に書きましたが、影を付ける機能を利用して... 全文を読む »

どもです。
些細なことですが、ハマったので備忘。

hankaku全角全角... 全文を読む »

どもです。

中身が数字のプルダウン。できれば右揃えにしたいところです。
しかし、select要素はtext-alignが効きません。

HTMLやCSSを駆使して無理やり作る方法はggると色々紹介されていますが、本件はそこまで頑張りたくない。
できれば、くらいの心持ち案件なのです。... 全文を読む »

どもです。

CSSで台形を作るのは、borderを使えば簡単です。
原理は以前に書きましたCSSで三角形を作るのと同じで、borderの一辺のみを表示させればOK。... 全文を読む »

どもです。
所用でツールを作っていたときに、コインが裏返るようなアニメーションが欲しかった。

というわけで実装してみました。

シンプルに裏返す

<div 

どもです。
フォームのCSSは永遠の課題感あります。

インラインブロック要素であるボタンが2つ以上並んでいて、サイズが違うものがある。... 全文を読む »

どもです。

テーブル要素を使うとき、多くはcolgroupを使用して、セル幅を指定します。

例：

<table>
	<colgroup>
		

どもです。
ちょっと:nth-of-typeが思った挙動と違うことになったので、
:nth-of-typeとクラス等の属性の関係について、検証です。

div#box0-1 

どもです。

レスポンシブサイトをコーディングするとき、
PCとiPadとスマホでそれぞれブレイクポイントを用意するのが理想です。
が、予算やデザインの関係でiPadはPCサイトを表示にすることも多くあります。

このとき、... 全文を読む »

どもです。

お客から貰ったデザインにて、文字にマーカーが引いてあるところがありました。
擬似要素使って色をずらし敷く必要があるかな？と思いましたが、
調べてみると、background:linear-gradient を使ってマーカー風に背景を引く技術が紹介されていました。... 全文を読む »

どもです。

Windows10から「游」フォントがデフォルトに追加されたそうですね。

メイリオと游ゴシックの比較をしてくださっているサイト様がありました。
個人の所感としては、小さいフォントは不便そう。標準サイズ以降なら軍配が上がる感じですね。... 全文を読む »

どもです。

PC優先のメディアクエリでレスポンシブサイトのコーディングをしていたのですが、
ChromeやFirefoxではスマホ状態にしても万全に表示されるのに、IEだけ画面を縮めてもPCの表示になってしまう事件がありました。

この原因ですが、メディアクエリの書き方ひとつだったので忘備録がてら。

 ... 全文を読む »

どもです。
今更感漂う、擬似要素で三角形まとめ。

そもそもどうして擬似要素で三角形が作れるのか

A. ... 全文を読む »

新年明けましてどもです。

最近ナゾノクサ系が愛しい餅。です。
キレイハナも慣れると可愛いなぁ。
但しクサイハナ、おめーはダメだ(´・ω・｀)

 ... 全文を読む »

どもです。
久々の連続更新(ﾟ∀ﾟ)

要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。
でも、display:table-cellはwidth:xx%が効かない罠。

親要素のwidthが決まっている場合、width:inherit;（親の数値を引き継ぐ）でイケる。... 全文を読む »

どもです。

この仕事始めて一年半弱。またコーディングで詰まりました。

従来の方法

さて、画像の上下中央揃えをしたいのですが、これにハマりました。... 全文を読む »

どもです。
ポケモンΩルビー、草タイプ縛り中の餅。です。

マグマ団も怖いけど、飛行タイプがこれまた怖い。

今回はコーディング中にちと蹴躓いた点をば。

どもです。
新規コーディングの際、取り敢えず設定するCSSは何でしょうか。

リセットCSSとかありますが、僕は使わない派。
いちいちアップしてリンク繋ぐのが面倒なのと、要素を虱潰しにリセットするせいで親子関係が殺されることがあるのが嫌なので。

とはいえ、リセットCSSを使わないなら自前でリセットしなければなりません。... 全文を読む »

どもです。
近頃めっきり肌寒い餅。です。

今日はCSSについて。

サイトトップのコーディングを依頼されたので、渡されたPSD通りに作りました。
ただ、サイト幅が1400pxって少々広すぎやしないかと思っていたのですが…... 全文を読む »

どもです。
今回は、文字に影をつけるCSS「text-shadow」について、ちょっと考えてみます。

まずは基本から。