【ハッカソン/キャンプに】 Web で最小の時間でちょっと「おっ」ってさせる小ネタ

  • 70
    いいね
  • 0
    コメント

僕の知ってるちょっと「おっ」ってなるネタを集めてみました!

また見つけ次第随時更新します! 皆様の「こんなんあるよ!」コメントも記事に積極的に反映させていただきますのでどしどし下さい!

ちなみに「今北産業」とは、

「今来た(→今北)ばかりの私にこれまでの流れを三行(→産業)で説明してくれ」の略

です。(ニコニコ大百科より)
ここでは各ツールやライブラリを3行で説明していきます!

Font Awesome

今北産業

  • Web サイトでいろいろなアイコンが使えるツールキット。
  • 面倒な設定はいらずCSSのみで可能
  • アイコンのサイズ調整や回転もできる

手順

  1. HTML の <head> 内でCDNのCSSのURLを<link>で読み込みます。
  2. 公式サイトの例のようにしてHTMLを貼り付けるとアイコンが表示されます!

Google Fonts

今北産業

  • 色々なフォントを簡単にサイト内で使えるサービス。
  • 使えるフォントは実に818種類!(2017年5月現在)
  • CSS のみで設定可能

手順

  1. 公式サイトから好きなフォントを選んでimage.png をクリックします
  2. 右下のポップアップをクリックして出てくる<link>タグをHTMLの<head>内に埋め込みます
  3. 要素にCSSでフォント名をfont-familyで設定するとフォントが変わります!

Sweet Scroll

今北産業

  • 簡単にアンカーリンクでスムーズスクロールを実装するJavaScriptライブラリ
  • イージングの種類が豊富というレベルを超えてる(31種類……ほとんど意地ですね())!
  • JavaScript は一行で使える!

手順

  1. CDNはまだ公開されてないようなので公式サイトからダウンロードして適当なフォルダに配置します。(npmなどが使えるならそっちの方がいいですね)
  2. HTMLから<script>タグでsweet-scroll.min.jsを読み込みます。
  3. <body>タグ内の最後に以下のコードを入力

    <script>
    new SweetScroll({
      trigger: "[data-scroll]",
      afterScroll(toScroll, trigger){
        location.hash = trigger.hash.slice(1)}
    });
    </script>
    
  4. スムーズスクロールしたいアンカー要素にdata-scroll属性を付加

    <a href="#main" data-scroll>メイン</a>
    

おまけ - Wappalyzer

今北産業

  • どんなサイトでどんな(jQuery, Bootstrap, Rails...)技術が使われているかわかるツール
  • ブラウザの右上にちょろっといるので普段からどのサイトでどの技術が使われているか見ると楽しい!
  • Google Chrome 拡張機能、Firefox アドオン、ブックマークレットで利用可能!

手順

  1. 公式サイトのダウンロードページから各プラットフォームに合わせた方法でダウンロード/インストール