ここに掲載の記事は備忘録的内容です。詳細な説明に欠ける部分が多々あります。ご了承ください。
Panel Openをcssのみで実行する例
以前は自サイトのaboutページでリーガル関係の文言の表示に使っていたもの。 Read(label)部分をクリックでパネルがオープンする。これをjavascriptを使わずにcssのみで実行する方法。 cssは以下。
css指定した画像がchromeでぼやける解決策
以下のタグをcssに追加するだけ。 参考にさせてもらったサイト 【メモ】縮小表示した画像のレンダリングとimage-rendering:crisp-edgesの使用結果まとめ
aタグが反応しない！
aタグが記述はあっているのに反応しない場合に確認すること。 ・親要素がabslute設定されている。 クライアントサイトの言語スイッチでハマってしまったので。 初歩的なことでも、知らないことだってあるさ！
Retina対応画像サイズ指定方法
iPhoneの高解像度のモニターに対応するためのcssの指定方法は以下 ・背景画像の場合のcss 2倍サイズの画像を用意した上で HTMLでの指定は ちょっとめんどいが仕方ないので、最低限の画像で対応するしかない、 参考 […]
画像をボックスサイズに合わせる（何回も忘れているのでメモ）
要件は以下 ・大きさが一定のボックスに画像をはめ込む ・横長の画像が来たらボックスの横幅に合わせる ・縦長の画像が来たらボックスの縦幅に合わせる ・画像サイズがボックスサイズより小さい場合はそのまま ・縦横中央揃え ボッ […]
webフォント使用時のちらつきを解消する
adobeのtypekit webフォント利用時に、ダウンロードが未完了の場合、、一瞬デフォルトのフォントで表示されるてしまうためにチラついて見える事がある。 解消方法は以下のスタイルをcssに追加する。 googleの […]
flex-boxで高さを合わせる
flexboxで横並びのボックスの高さを合わせる方法。 まず高さを合わせるだけなら flex-wrap: wrap; で良いのだが、例のように左ボックス内の文字を上下左右ともに中央に揃える場合は子要素の方に displa […]
formのinput checkboxの装飾
アート・コア川口サイトにて使用。 input checkboxを装飾する場合のCSS. 同サイトのcommon.css1388行目からを参照。
form input checkboxの装飾
アート・コア川口サイトので使用。 html 参考にさせもらったサイト
見出しアイコンはcssで作ろう！
〇や矢印などの見出し用アイコンなどは画像を使用せず、cssのみで実装しましょ！！ クライアントさんサイトでも実装済み。 参考サイトはたくさんあるのと、新しいものが出てくると思うので都度検索で探してみよう！ 「cssで見出 […]