CSSで作るシンプルな吹き出し(通常、枠線のみ、下線のみ)パターン
コーディングのヘルプに入った際、デザインに吹き出しがあったのでcssで対応したわけですが、その時に作成した枠線のみの吹き出しと下線のみの吹き出しのコーディングメモ。
> 詳しく見る- category:codingtag:css
opacityの親要素に背景色をつけてカッコよく透過させよう
CSS3から、要素を透過できるopacityが使用できるようになり、画像リンクにもhoverでopacityを付けることにより、画像がリンクだとわかるようにすることが簡単にできるようになりました。この透過を応用すれば、黒い画像をhoverで明るい画像にすることも可能です。
> 詳しく見る- category:codingtag:css, css3
display:noneとvisibility:hiddenの違いを確認しよう
display:noneとvisibility:hiddenはどちらも要素を非表示にするプロパティですが、実際に中で起こっていることは異なっています。似ているようで似ていない2つのcssをサンプルを見ながら確認しましょう。
> 詳しく見る- category:codingtag:css
inline-blockで並べたときに発生する隙間を消すためのいろいろな小技のまとめ
floatを使わずに要素を横に並べる方法として用いられる事の多いinline-block。自分も結構な頻度で使用しています。ですが、普通に使うとなぜか数ピクセルの隙間が発生してしまいます。
この隙間の対処として、htmlのみで対処する方法とcssのみで対処する方法をまとめてみました。
> 詳しく見る- category:codingtag:css, html
iOS6のinputタグにバグ – 幅のパーセントとplaceholderには要注意
iPhoneでinputにwidthにパーセント指定とplaceholderを同時に使用すると横幅が画面サイズに調整されずにハミでてしまうバグのお話。調べてみると、どうやらiOS6特有で特定条件下におけるバグのようで…まぁやっかい。
> 詳しく見る- category:smartphonetag:css, html5, iOS, バグ