タグ

ブックマーク / www.otchy.net (2)

  • 右下または左下においた画像に文字列を回り込ませるHTML/CSS

    普通、HTML で画像の回り込みというと、右上か左上に画像があって、そこに文字列が回り込むという感じです。これは簡単です。画像に対して float: left; すれば OK です。 しかし、右下か左下に画像を固定して、文字列がそこにたどり着いたら回り込むという動作は一筋縄ではいきません。 画像をブロックの左下に配置してテキストを回り込ませる方法を考える というページで色々と考察されていて、ふむふむと思ったのですが、この方法では、テキストの量が変わるたびに調整が必要になってしまうので、テキストの量が動的に変わる場合には対応しにくいです。 何より、文章をぶった切って画像を入れるというのはどうもスマートではありません。 色々と試行錯誤してみたところ、以下の方法で実現できそうだったので、公開してみます。 <html> <head> <style> #block { width: 200px; h

    右下または左下においた画像に文字列を回り込ませるHTML/CSS
    AmaiSaeta
    AmaiSaeta 2018/10/25
    今だと CSS Shapes でどうにかならないかな……?
  • Greasemonkey で 超お手軽に jQuery を使うスニペット

    【2011-06-07 追記】 下記の手法は Chrome の Greasemoneky では無効なため、Firefox / Chrome 両対応としたい場合は Greasemonkey で 超お手軽に jQuery を使うスニペット [Chrome 対応版] を参照してください。 タイトルの通りです。 特徴 script タグ追加型の読み込み $ 関数として利用可能 該当ページですでに jQuery が読み込まれていればそれを利用 jQuery スクリプト自体のアップは不要 (Gogole の CDN を利用) ローカルのキャッシュも多分有効 (CDN が適切なヘッダを返してれば) jQuery 読み込み完了を待ってから実行される 作成動機 Greasemonkey で jQuery を使う方法検索してみると、GM_xmlhttpRequest で読み込んで eval する方法と、scr

    Greasemonkey で 超お手軽に jQuery を使うスニペット
  • 1