僕の知ってるちょっと「おっ」ってなるネタを集めてみました！
また見つけ次第随時更新します！ 皆様の「こんなんあるよ！」コメントも記事に積極的に反映させていただきますのでどしどし下さい！
ちなみに「今北産業」とは、
「今来た(→今北)ばかりの私にこれまでの流れを三行(→産業)で説明してくれ」の略
です。（ニコニコ大百科より）
ここでは各ツールやライブラリを3行で説明していきます！
Font Awesome
今北産業
- Web サイトでいろいろなアイコンが使えるツールキット。
- 面倒な設定はいらずCSSのみで可能
- アイコンのサイズ調整や回転もできる
手順
Google Fonts
今北産業
- 色々なフォントを簡単にサイト内で使えるサービス。
- 使えるフォントは実に818種類！(2017年5月現在)
- CSS のみで設定可能
手順
-
公式サイトから好きなフォントを選んで
をクリックします - 右下のポップアップをクリックして出てくる
<link>タグをHTMLの<head>内に埋め込みます - 要素にCSSでフォント名を
font-familyで設定するとフォントが変わります！
Sweet Scroll
今北産業
- 簡単にアンカーリンクでスムーズスクロールを実装するJavaScriptライブラリ
- イージングの種類が豊富というレベルを超えてる（31種類……ほとんど意地ですね()）！
- JavaScript は一行で使える！
手順
-
CDNはまだ公開されてないようなので公式サイトからダウンロードして適当なフォルダに配置します。(npmなどが使えるならそっちの方がいいですね)
-
HTMLから
<script>タグでsweet-scroll.min.jsを読み込みます。 -
<body>タグ内の最後に以下のコードを入力<script> new SweetScroll({ trigger: "[data-scroll]", afterScroll(toScroll, trigger){ location.hash = trigger.hash.slice(1)} }); </script> -
スムーズスクロールしたいアンカー要素に
data-scroll属性を付加例<a href="#main" data-scroll>メイン</a>
おまけ - Wappalyzer
今北産業
- どんなサイトでどんな（jQuery, Bootstrap, Rails...）技術が使われているかわかるツール
- ブラウザの右上にちょろっといるので普段からどのサイトでどの技術が使われているか見ると楽しい！
- Google Chrome 拡張機能、Firefox アドオン、ブックマークレットで利用可能！
手順
- 公式サイトのダウンロードページから各プラットフォームに合わせた方法でダウンロード/インストール