[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス
「:before」で「pタグ」の前に文字を挿入 では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。 「before」で前に文字を挿入 ではCSSを見てみます。 p:before { content: "オレ的には" ; } こんな感じですね。 たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。 で、その中で「content:"ここに自由に文章を入れる"; 」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく! サンプル1 「:after」で「pタグ」の後ろに文字を挿入 では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。 「after」で後ろに文字を挿入 p:after { content:"……と言ってみる"; }
![[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae881a6d73c795de683729e28d02776cf2197309/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-before-after-300.png)
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
Retina対応怖くない / ホームページ制作 東京[グリッドネス] / WEBデザイン制作
以前、iPhone4から採用されたRetinaディスプレイに対応すべきかどうかというブログを書きましたが、 ついにスマホだけじゃなくMacbookにもRetinaディスプレイが採用されたようですね。 Retinaディスプレイは通常のディスプレイに比べ、倍以上の高解像度のため、 プレーンテキストがかなり鮮明に見えるが、通常サイズ（表示サイズと画像のサイズが同じ）の画像がぼんやり見えてしまうという難点が。 PCは正直まだ全く高解像度ディスプレイに対応する必要は無いと思いますが、 スマホに関しては無視できない割合が高解像度ディスプレイになっています。 というわけで、 そんなに気が進まなかったけど、現行のiPhone4Sの解像度に対応したスマホサイトを作ってみました。 http://www.smart-ness4.com/i/ ↓iPhone4Sでのキャプチャ画面 対応方法の仕方としては、 ・ht
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
