びぼうろくnote

サイト制作などの備忘録

コーディング

target="_blank" rel="noopener"

target="_blank" ついてるときは rel="noopener" もつけたほうがいいよ、って話。 ocws.jp

CSS ストライプ 背景

www.esz.co.jp 画像じゃなくて、cssのみで背景のストライプを作る方法。 チェック柄やドット柄もできるみたい。

calc(10 * 100vw / 750); 何の計算方法?

w3q.jp 例えば下記の場合padding:calc(20 / 640 * 100vw)横幅640pxの時に20px分のpaddingという意味 例:1280なら40px なるほどねー

テキスト2行目スペース空ける

on-ze.com いつも忘れがちなのでメモ。 p.indent-1 { padding-left:1em; text-indent:-1em;}

CSSだけで点線の吹き出しを作る方法

<div class="balloon"> <p>ここにテキストが入ります。</p></div> .balloon { position: relative; max-width: 400px; padding: 20px 8px; text-align: center; background-color: #fff; text-align: center; color: #000; border: 2px dashed #f00; border-radius: 15px; margin: 0 auto;} .ba…

CSS で矢印を作る方法

棒付き矢印を作る方法 .stickarrow { width: 40px; height: 8px; border-bottom: 1px solid #000; border-right: 1px solid #000; transform: skew(45deg);} リンク記事には、>・▶ のコードも書いてある hirashimatakumi.com #css

flexboxチートシート

flexシートはこちらが優秀 www.webcreatorbox.com #css

last-childの書き方

ずっとSassで書いてたから、cssのlast-childの書き方いつもド忘れしてまう; ○○(タグ・クラス名) : last-child { } developer.mozilla.org #css