はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    iPhone 17

『qiita.com』

  • 人気
  • 新着
  • すべて
  • 200行のVue.jsでスネークゲームを作った - Qiita

    100 users

    qiita.com/miyauchoi

    こんにちは、猫チーズです。 社内のVue.js勉強用プログラムとして1時間ほどで簡単なスネークゲームを作ったところ、メンバー各々が魔改造などして、一時的に社内でスネークゲームが流行りました。 (2019/09/29 追記) 第2弾も作りました → 『250行のVue.jsで陣取りゲームを作った』 デモページ GitHub ソースコード ゲームルール スネークゲームは、シンプルで古典的なゲームです。 何も操作しないとヘビはまっすぐ進む 壁か自分自身にぶつかるとゲームオーバー 矢印キーでヘビを方向転換できる リンゴを食べると体が伸びる&スコアUP これらのルールをVue.jsで作りました。 200行のプログラム 以下の200行のhtmlファイルに全ての機能が纏まっています。 snake.htmlなどの名前で保存して、ブラウザでそのファイルを開くと遊べます。 速さや色、新しいアイテムの追加などを

    • テクノロジー
    • 2019/09/28 19:12
    • Vue
    • あとで読む
    • Vue.js
    • js
    • qiita
    • これはすごい
    • SCSSでツールチップを美しく書く - Qiita

      59 users

      qiita.com/miyauchoi

      HTMLとSCSSでツールチップを作りましょう。 今回作るのは、ハテナマークにホバーをすると説明文が飛び出てくるタイプです。 自己紹介 アプリクリエイターの 猫チーズ です。HTMLとCSS歴は8年になります。 先月デザイン系の大学を卒業し、4月からサイバーブレイン株式会社( メインサービスはAI Academy )でデザイナーを始めました。 今回の前提条件 JavaScriptは使いません。 スタイルシートはSCSS(CSSを拡張した言語)で書いています。SCSSとして使っているのはセレクターのネストのみです。 もくじ 初期状態の確認 マルを書く マルにハテナを入れる 説明文を置く ホバーで表示/非表示を切り替える 吹き出しをフェードイン/アウトさせる 吹き出しの飛び出してる部分をつける 吹き出しの見た目を整える 吹き出しへのホバーを無視する テーマカラーをCSS変数に置き換える 先に完

      • テクノロジー
      • 2019/04/27 18:03
      • css
      • SCSS
      • あとで読む
      • SASS
      • 情報
      • ツール
      • webデザイン

      このページはまだ
      ブックマークされていません

      このページを最初にブックマークしてみませんか?

      『qiita.com』の新着エントリーを見る

      キーボードショートカット一覧

      j次のブックマーク

      k前のブックマーク

      lあとで読む

      eコメント一覧を開く

      oページを開く

      はてなブックマーク

      • 総合
      • 一般
      • 世の中
      • 政治と経済
      • 暮らし
      • 学び
      • テクノロジー
      • エンタメ
      • アニメとゲーム
      • おもしろ
      • アプリ・拡張機能
      • 開発ブログ
      • ヘルプ
      • お問い合わせ
      • ガイドライン
      • 利用規約
      • プライバシーポリシー
      • 利用者情報の外部送信について
      • ガイドライン
      • 利用規約
      • プライバシーポリシー
      • 利用者情報の外部送信について

      公式Twitter

      • 公式アカウント
      • ホットエントリー

      はてなのサービス

      • はてなブログ
      • はてなブログPro
      • 人力検索はてな
      • はてなブログ タグ
      • はてなニュース
      • ソレドコ
      • App Storeからダウンロード
      • Google Playで手に入れよう
      Copyright © 2005-2025 Hatena. All Rights Reserved.
      設定を変更しましたx