solidstatesocietyのブックマーク - はてなブックマーク

【サンプルあり】リセット・ノーマライズ・サニタイズCSSの違いと使い方
みなさん、こんにちわ！ジャングルオーシャンのラファエロです！！ HTMLのタグには「デフォルトCSS」と呼ばれる、ブラウザに組み込まれたCSSがはじめから適応されているのをご存知でしょうか？例えば、見出しをh1タグでマークアップするとfont-sizeでサイズ指定した訳じゃないのに大きなフォントサイズで表示されますよね？またliタグにはlist-styleを指定した訳じゃないのに文頭に「・」が付いていたり、pタグにmarginを指定した訳じゃないのにmarginが付いていたり… これがデフォルトCSSなんですが、結局のところ自分で書いたCSSで上書いてしまうので邪魔なんですよね(^^;) さらに面倒くさいのが、ブラウザごとに差異があること… ブラウザごとに見え方の違うWebサイト作るわけにはいかないですよね。ということで、今回はデフォルトCSSの影響を受けずにコーディングするために
solidstatesociety 2019/04/18
あとで読む
リンク
【CSS】position:sticky;で簡単固定！スティッキーヘッダー6選
どうも、ジャングルオーシャンのミケです。今日はHTMLとCSSで簡単にできるスティッキーヘッダーを作っていこうと思うよ。スティッキーヘッダーとは Webサイトは基本的に縦の長さを固定で決めるという事はなくてコンテンツが多くなればなるほどスクロールする長さは多くなりがちなんだ。その時にと考えることもあるはず！その願いを叶えてくれるのがスティッキーヘッダーというわけなんだ。具体的なイメージは用意したサンプルデモページを見てね。サンプル1のデモページはこちらもし、このページにあるサンプルコードを使ってもうまく実装できないという場合は、こちらの記事を確認してみてね！固定させる方法固定をさせるためには CSSのpositionを使うよ。 positionにも何種類かあってコンテンツを固定できるのはfixedとsticky。ブラウザで表示している領域の1番上にheader
solidstatesociety 2019/03/14
あとで読む
リンク
【CSS】マウスオーバーで画像を拡大縮小回転させる
どうも、ジャングルオーシャンのミケです。今日はマウスオーバーすると画像が拡大、縮小、回転をするエフェクトの紹介だよ。 HTMLとCSSだけで簡単に実装できるよ。ソースコードを載せてるからぜひコピペして使ってね。拡大、縮小、回転に使用するCSSプロパティ拡大、縮小、回転に使うのは CSSのtransf ormというプロパティだよ。サンプルデモページも用意したから具体的なイメージはここでつかみながら色々試してみてね。サンプルデモを見るそれじゃ拡大、縮小、回転させる時のソースコードを紹介していくよ。 1.マウスオーバーで画像を拡大する HTML
solidstatesociety 2019/02/09
あとで読む
リンク
1