IEの互換表示をさせないように、metaタグにX-UA-Compatibleの設定を使用しよう
制作会社に作ってもらったサイトをIEで見ると大きく崩れていたことがあり、どうやら勝手に互換表示がされ、IE7の表示になっていたことで思わぬ崩れが発生していた。ソースを見るとmetaタグのX-UA-Compatibleが設定されていなかったの原因でした。
> 詳しく見る- category:codingtag:html, html5
CSSで作るシンプルな吹き出し(通常、枠線のみ、下線のみ)パターン
コーディングのヘルプに入った際、デザインに吹き出しがあったのでcssで対応したわけですが、その時に作成した枠線のみの吹き出しと下線のみの吹き出しのコーディングメモ。
> 詳しく見る- category:codingtag:css
フォームの送信ボタンのvalueはFontAwesomeのアイコンフォントも設置できる
フォームの送信ボタンは、valueにテキストを入力して使用するのが一般的です。typeをimageにして、送信ボタンを画像にすることもあります。この部分をFontAwesomeを用いてアイコンフォントを設置することも可能です。
> 詳しく見る- category:codingtag:html
opacityの親要素に背景色をつけてカッコよく透過させよう
CSS3から、要素を透過できるopacityが使用できるようになり、画像リンクにもhoverでopacityを付けることにより、画像がリンクだとわかるようにすることが簡単にできるようになりました。この透過を応用すれば、黒い画像をhoverで明るい画像にすることも可能です。
> 詳しく見る- category:codingtag:css, css3
display:noneとvisibility:hiddenの違いを確認しよう
display:noneとvisibility:hiddenはどちらも要素を非表示にするプロパティですが、実際に中で起こっていることは異なっています。似ているようで似ていない2つのcssをサンプルを見ながら確認しましょう。
> 詳しく見る- category:codingtag:css
transformとanimationと@keyframeを利用してCSSで滑らかなマーキーを作る
一時代前に流行ったような気がする文字のスクロール。当時は、今は懐かしきmarqueeタグを使っていましたね。PCサイトというよりケータイサイトで使用していたと思います。あの狭い表示領域には最良の表示方法でした。懐かしきスクロール機能ですが、transformと@keyframeを利用することによってCSS3でも実装できます。
> 詳しく見る- category:codingtag:css3