『CSS設計完全ガイド』のcss-wipeの使い方がわからない【リセットCSS】

css設計完全ガイド
CSS設計完全ガイドのkindle版の表紙

最近、WEBサイトの制作をする機会が増えてきました。

私は、経験が少ない上に素人に毛が生えたくらいの知識しかありません。

「このままではいけない」と思い、当ブログをほっぽらかして勉強しています。

CSS設計についてもしっかり学ぼうと、「CSS設計完全ガイド」という本を購入して写経していました。

しかし、チャプター6−1あたりから、公開されているサンプルとの見た目に差異が現れて挫折しそうになりました。

目次

css-wipeの使い方がわからない

ちょっとでもうまくいかないとイヤになります。

本書では、「css-wipe」というリセットCSSを使っているのですが、そのせいみたいです。

css-wipeのCDNの使い方

これでいいのかわかりませんが、css-wipeのCDNの使い方を書きます。

がんばって勉強している人の時短になったら嬉しいです。

① こちらにアクセス。

https://www.jsdelivr.com/package/npm/css-wipe

② index.min.cssを選択し、SHOW & CONFIGURE ALL LINKSをクリック。

css-wipeのCDN

③ HTML outputボタンを押して表示されたリンクをheadタグ内にコピペする。

css-wipeのCDN2

④ 本に戻って、4−1のリセットCSSの説明直後にあるCSSも適用する。

bodyに対するline-heightの設定などがあるので、お忘れなく。

リセットCSSが適用されて、見た目が同じようになった

表示がおかしくなってる
before
表示がなおった
after

すごく勉強になる本だと思うんですけど、私みたいな初心者もいるのでもう少し説明があったらいいなと思います。

こちらの本もよかったです。

新しめな(…と思われる)テクニックが満載です。

CSS設計完全ガイドの前に読むといい気がします。

よかったらシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
目次