CSSだけで四角形の隅に三角マークを追加する方法
四角形の隅に三角マークが付いているWebデザインをたまに見かける。このようなデザインは昔は背景画像を書き出してCSSで表示させていたのだが現在ではCSSだけで実装できる。 現在だとスマートフォンなどの解像度の高い画面で見られることが多いのでマーク部分がぼやけて表示されないようにするためにも画像で表現するのは控えたほうが良い。 3つの実装方法 CSSだけで四角形の隅に三角マークを付けるには3つのやり方がある。 1つ目はborderプロパティで三角形を作成してposition: absoluteで配置する方法だ。 簡単なやり方だがデメリットが多いためおすすめできない。 デメリット 親要素にposition: relativeが必要 テキストと同じ位置にあると上に重なる ::after, ::beforeで指定する場合、配置は最大2つまで ::after, ::beforeがすでに使われている場
Android 4.3以下でSVGが正しく表示されない原因はIllustratorの書き出し仕様
Android 4.3以下で閲覧しているとSVGの画像が正しく表示されていないことがある。 Android 2.3以下であればSVG非対応なので表示されないのは当然だが、4.3以下で正しく表示されないことがあるのはなぜか？ それはAndroid 4.3以下の標準ブラウザはSVGタグにwidthとheightの指定がないと正しく表示できないバグがあるからだ。 以下の2つはそれぞれSVGタグにwidthとheightの指定をしたものと指定なしのものだ。(オレンジの方は指定なし) Android 4.0-4.3で見るとオレンジの方は正円になっていない(正しく表示されていない)はずだ。 それぞれのSVGファイル内のコードはこのようになっている。見ての通りオレンジ色のSVGのほうにはwidthとheightの指定がない。 青のSVGのコード <svg xmlns="http://www.w3.org
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
