sounisi5011/.block

## .block
# See https://bl.ocks.org/-/about
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    マウスをかざすと変換する画像のデモ

マウスを載せたときに、画像が変化する感じのアレを、HTMLとCSSで書いてみたもの。
デモページ


https://bl.ocks.org/sounisi5011/raw/8f4739778534b211f0ae87bff4caf474


## index.html
<!doctype html>
<html lang="ja">

<!-- ↓↓↓HTMLのおまじない↓↓↓ -->
<head>
  <!-- 文字コードをUTF-8にする -->
  <meta charset="utf-8">

  <!-- スマホで表示した時の画面サイズをいい感じにする -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- スマホでメアドや電話番号が勝手にリンクに置き換わらないようにする -->
  <meta name="format-detection" content="telephone=no,email=no,address=no">

  <!-- ページのタイトル -->
  <title>マウスをかざすと変換する画像のデモ</title>

  <!-- プリロード（先読み）のおまじない。これを入れておけば、画像とかを裏方が持ってきてくれるので、読み込みに時間がかかって待たされる事が減る -->
  <link rel="preload" as="style" href="./main.css">
  <link rel="preload" as="image" href="http://placehold.jp/24/150x150.png?text=ゲト博士に食べられてみたいなぁ">
  <link rel="preload" as="image" href="http://placehold.jp/24/111/fff/150x150.png?text=ゲト博士「よろしい、私の夕餉にしてあげよう」">

  <!-- CSSファイルを読み込む -->
  <link href="./main.css" rel="stylesheet">

</head>
<!-- ↑↑↑HTMLのおまじない終わり↑↑↑ -->

<body>
  <h1>マウスをかざすと変換する画像のデモ</h1>

  <!-- ↓image-changeクラスが指定された要素↓ -->
  <div class="image-change"></div>
  <!-- ↑image-changeクラスが指定された要素↑ -->

  <h2>Gist</h2>
  <p>GitHub Gistでソースコードを見る：<a href="https://gist.github.com/sounisi5011/8f4739778534b211f0ae87bff4caf474">gist.github.com<wbr>/sounisi5011<wbr>/8f4739778534b211f0ae87bff4caf474</a></p>
</body>
</html>

## main.css
/*
 * image-changeクラスが指定された要素の、初期状態のスタイル（見栄え）
 */
.image-change {
  /*
   * 要素の縦横の大きさを指定
   * ※画像サイズの関係で入れているだけで、マウスが乗ったときに変化する画像の処理とは無関係。
   */
  width: 150px;
  height: 150px;

  /*
   * マウスカーソルを指の形にする
   * ※マウスが乗ったときに変化する画像の処理とは無関係。あっても無くても画像は変化する。
   */
  cursor: pointer;

  /*
   * 要素の背景画像を指定
   * 他のスタイルで上書きされない限り、この画像が表示される
   */
  background-image: url("http://placehold.jp/24/150x150.png?text=ゲト博士に食べられてみたいなぁ");
}

/*
 * image-changeクラスが指定された要素に、マウスが乗った時のスタイル
 * マウスが乗った時、初期状態のスタイル（上述）の一部を上書きする
 */
.image-change:hover {
  /*
   * 要素の背景画像を指定
   * マウスが乗ると、この画像に変更される
   */
  background-image: url("http://placehold.jp/24/111/fff/150x150.png?text=ゲト博士「よろしい、私の夕餉にしてあげよう」");
}
	<!doctype html>
	<html lang="ja">

	<!-- ↓↓↓HTMLのおまじない↓↓↓ -->
	<head>
	<!-- 文字コードをUTF-8にする -->
	<meta charset="utf-8">

	<!-- スマホで表示した時の画面サイズをいい感じにする -->
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<!-- スマホでメアドや電話番号が勝手にリンクに置き換わらないようにする -->
	<meta name="format-detection" content="telephone=no,email=no,address=no">

	<!-- ページのタイトル -->
	<title>マウスをかざすと変換する画像のデモ</title>

	<!-- プリロード（先読み）のおまじない。これを入れておけば、画像とかを裏方が持ってきてくれるので、読み込みに時間がかかって待たされる事が減る -->
	<link rel="preload" as="style" href="./main.css">
	<link rel="preload" as="image" href="http://placehold.jp/24/150x150.png?text=ゲト博士に食べられてみたいなぁ">
	<link rel="preload" as="image" href="http://placehold.jp/24/111/fff/150x150.png?text=ゲト博士「よろしい、私の夕餉にしてあげよう」">

	<!-- CSSファイルを読み込む -->
	<link href="./main.css" rel="stylesheet">

	</head>
	<!-- ↑↑↑HTMLのおまじない終わり↑↑↑ -->

	<body>
	<h1>マウスをかざすと変換する画像のデモ</h1>

	<!-- ↓image-changeクラスが指定された要素↓ -->
	<div class="image-change"></div>
	<!-- ↑image-changeクラスが指定された要素↑ -->

	<h2>Gist</h2>
	<p>GitHub Gistでソースコードを見る：<a href="https://gist.github.com/sounisi5011/8f4739778534b211f0ae87bff4caf474">gist.github.com<wbr>/sounisi5011<wbr>/8f4739778534b211f0ae87bff4caf474</a></p>
	</body>
	</html>
	/*
	* image-changeクラスが指定された要素の、初期状態のスタイル（見栄え）
	*/
	.image-change {
	/*
	* 要素の縦横の大きさを指定
	* ※画像サイズの関係で入れているだけで、マウスが乗ったときに変化する画像の処理とは無関係。
	*/
	width: 150px;
	height: 150px;

	/*
	* マウスカーソルを指の形にする
	* ※マウスが乗ったときに変化する画像の処理とは無関係。あっても無くても画像は変化する。
	*/
	cursor: pointer;

	/*
	* 要素の背景画像を指定
	* 他のスタイルで上書きされない限り、この画像が表示される
	*/
	background-image: url("http://placehold.jp/24/150x150.png?text=ゲト博士に食べられてみたいなぁ");
	}

	/*
	* image-changeクラスが指定された要素に、マウスが乗った時のスタイル
	* マウスが乗った時、初期状態のスタイル（上述）の一部を上書きする
	*/
	.image-change:hover {
	/*
	* 要素の背景画像を指定
	* マウスが乗ると、この画像に変更される
	*/
	background-image: url("http://placehold.jp/24/111/fff/150x150.png?text=ゲト博士「よろしい、私の夕餉にしてあげよう」");
	}