CSS – インクループ株式会社｜神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 HTMLとCSSでキャラクターに吹き出しを付けた漫画的な表現をWebページで表示する方法 https://incloop.com/html%e3%81%a8css%e3%81%a7%e3%82%ad%e3%83%a3%e3%83%a9%e3%82%af%e3%82%bf%e3%83%bc%e3%81%ab%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%82%92%e4%bb%98%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba/ https://incloop.com/html%e3%81%a8css%e3%81%a7%e3%82%ad%e3%83%a3%e3%83%a9%e3%82%af%e3%82%bf%e3%83%bc%e3%81%ab%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%82%92%e4%bb%98%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba/#respond Mon, 17 Apr 2017 14:35:39 +0000 https://incloop.com/?p=11867 00_HTMLとCSSで漫画的表現_ロゴ

漫画的な表現が好きです、網干です。 最近は電子書籍でPC上でも漫画を読むことができます。 ですが、個人的にはも […]]]> 00_HTMLとCSSで漫画的表現_ロゴ

漫画的な表現が好きです、網干です。

最近は電子書籍でPC上でも漫画を読むことができます。
ですが、個人的にはもっとWeb上の技術を使った動きのある漫画があっても良いのではないかと思ったりします。
といっても、いろいろと制限があったり、時間に見合わない労力が発生する等の問題があって実現は難しいのだと思ったりもします。
では、実際に作ってみたらどの程度の労力がかかるのか…？
ちょっと気になったので、まずはとっかかりとして漫画の1コマを表示する方法を調査してみました。

ということで、今回はHTMLとCSSの設定だけで漫画の一コマのような表示をWebページ上で実現する方法を記載します。
今回の記事を読むことで下記のような漫画のような一コマを作成することができます。

Excelのことなら

僕に任せて！！

HTMLコードで枠組みを用意する

まずはHTMLコードで一コマを表示するための枠組みを用意します。
今回は下記のようなHTMLコードを使用します。

<div class="img-campus">
  <div class="fukidashi-box">
    <div>
      <p>Excelのことなら</p>
      <p>僕に任せて！！</p>
    </div>
  </div>
  <img class="img-tanaka-san" src="https://incloop.com/wp-content/uploads/2017/04/01_田中さん.png">
</div>

HTMLコードの作成イメージとしては、
・一コマ用の枠を用意。
・一コマの中に吹き出し用の枠を用意して、その中にコメントを入れる。
・吹き出し用の枠の後に画像を表示。
こんな感じで作成しています。

といっても、コードだけではイメージしづらいので、ここは読み飛ばしてしまって構いません。

では次に、素材となる画像を用意しましょう。

素材となる画像を用意する

今回使用する画像は、キャラクター、吹き出し、背景の三種類です。

キャラクター画像は弊社T氏の画像を使用します。
01_田中さん

吹き出し画像に関しては、今回は「フキダシデザイン」様の画像を使用させていただきました。
02_雲みたいな吹き出し

背景画像に関しては、今回は「無料写真素材　写真AC」様の画像を加工して使用させていただきました。
03_背景

これで画像の準備は完了です！

CSSで表示を整える

では、CSSで表示を整えていきます。
今回は漫画的な一コマを作成したいので、横幅や縦幅はほぼ全て固定の数値で指定します。
具体的には、こんな感じのCSSを設定します。

.img-campus {
  width: 420px;
  margin: 0px auto 10px;
  background: url('https://incloop.com/wp-content/uploads/2017/04/03_背景.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border: solid 5px;
}

.fukidashi-box {
  width: 300px;
  height: 230px;
  background: url('https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.fukidashi-box > div{
  text-align: center;
  position: relative;
  top: 80px;
}

.fukidashi-box p {
  font-size: 24px;
  margin: 5px;
  line-height: normal;
}

.img-campus img {
  width: 300px;
  margin: auto auto auto 120px;
  display: block;
}

@media screen and (max-width : 450px) {
  .img-campus {
    width: 250px;
  }
  
  .fukidashi-box {
    width: 150px;
    height: 120px;
  }
  
  .fukidashi-box > div {
    top: 40px;
  }
  
  .fukidashi-box p {
    font-size: 13px;
  }
  
  .img-campus img {
    width: 170px;
    margin: auto auto auto 80px;
  }
}

ここまで来て、ようやくHTMLコードと見比べてもらうと「あぁなるほど」となるかもしれません。
CSSの内容としては、イメージに沿ってスタイルを整えているだけですね。

上記の内容を全て詰め込むと、下記のような漫画的な一コマが表示されるようになります。

Excelのことなら

僕に任せて！！

編集の際には画像編集が不要！文章や画像素材を切り替えるだけで一コマを編集！

記事をここまで読んでみて「え？こんなの作りたかったら全部画像で作っちゃえばいいじゃん…」と思われる方が多いと思います。
そう！その通りです！
その通りなのですが…。
今回の一コマは一枚の画像ではなく複数の要素から構成しているため、一部分の編集がコード上で可能になっているのです。

例えば、吹き出しの文言だけ変えたい場合は、下記のように文言の編集だけで終わってしまいます。

VRって凄い！

近未来！

例えば、背景と吹き出しだけ変えたい場合は、下記のように文言と背景素材の変更だけで終わってしまいます。

ぐへへへ！

お金お金ェ～！

このように、デザイナーさんの手を借りずに画像編集（のようなこと）ができてしまいます！
使い方次第ではかなり汎用性が高くなりそうですね。

使い方次第では作業効率の改善も可能！

いかがでしたか？

今回の例のような一コマをWebページに表示させたい場合は、一枚の画像で作成してしまうほうが良いように思えます。
ですが、下記のいずれかの条件が入った場合はどうでしょうか？

1. 吹き出しの中身を毎日変化させたい。
2. キャラクターを週ごとに変化させたい。
3. 吹き出しの中身もキャラクターも曜日ごとに変化させたい。

もし上記の条件を画像で対応し続ける場合は、毎回のように画像を作り変えてアップロードしなければなりません。
ですが、今回紹介したようなHTMLコードやCSSの構成であれば、テキストを変えたり画像を切り替えたりするだけで対応が完了してしまいます。

使い方次第ではありますが、こういった「画像っぽい表示の仕方」もコーディングする際の一つの方法として頭に入れておくと、役に立つ時が来るかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/html%e3%81%a8css%e3%81%a7%e3%82%ad%e3%83%a3%e3%83%a9%e3%82%af%e3%82%bf%e3%83%bc%e3%81%ab%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%82%92%e4%bb%98%e3%81%91%e3%81%a6%e8%a1%a8%e7%a4%ba/feed/ 0 JavaScriptで星のように輝くエフェクトを表示して一平ちゃんショートケーキ味の画像をキラキラさせる方法 https://incloop.com/%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%97%e3%81%a6%e7%94%bb%e5%83%8f%e3%82%92%e3%82%ad%e3%83%a9%e3%82%ad%e3%83%a9%e3%81%95%e3%81%9b%e3%82%8b/ https://incloop.com/%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%97%e3%81%a6%e7%94%bb%e5%83%8f%e3%82%92%e3%82%ad%e3%83%a9%e3%82%ad%e3%83%a9%e3%81%95%e3%81%9b%e3%82%8b/#respond Tue, 06 Dec 2016 09:22:36 +0000 https://incloop.com/?p=9681 画像をキラキラさせる方法

昨日発売した「一平ちゃんショートケーキ味」を仕入れてテンションが振り切れています！網干です！ 見てくださいこの […]]]> 画像をキラキラさせる方法

昨日発売した「一平ちゃんショートケーキ味」を仕入れてテンションが振り切れています！網干です！
見てくださいこの包装！クリスマスにふさわしいデザインがたまりません！
く～！ニクイ！
一平ちゃん夜店の焼そば ショートケーキ味
出典：明星 一平ちゃん夜店の焼そば ショートケーキ味: 明星食品

見た目もこんなに綺麗！！パッと見ケーキと見分けがつきません！！
とんでもなく綺麗で美しい焼きそば

最も衝撃的だったのはソースの香りです！
見た目は普通のソースっぽい色なのですが、香りが全く違いました！
甘い匂い……どこかで嗅いだことのある甘い香り……

これは……パ、パンケーキ！そう！パンケーキの香り！！

甘い！これはデザートだ！三時のおやつだ！
が、しかし！嗅覚の情報は確実にパンケーキなのに！視覚が捉えているのは焼きそば！
嗅覚情報と視覚情報が一致しない！不思議！！

こ、この視覚的感動を伝えるには………そうだ！！
画像にエフェクトをつけて、皆さんに私が見ているビジョンを共有すればいいんだ！！！！！

…ということで、今回は画像にキラキラした星の輝きのようなエフェクトをつける方法を記載します。

今回の記事を読むことで、下図のように画像にエフェクトをつけることができるようになります。

キラキラエフェクトのプログラムをご紹介

今回は下記の記事を参考にさせて頂きました。
CreateJS 星キラキラ
※オリジナルのソースコードは上記のページより引用してください

このソースコードから、やきそばが輝くために必要な部分だけ抜き出してご紹介します！
焼きそばだけに！ソース！！

htmlファイル

<!DOCTYPE html>
<html>
<title>kirakira</title>
<head>
<script src="http://jsrun.it/assets/l/b/E/J/lbEJu"></script>
<script src="http://jsrun.it/assets/v/S/y/5/vSy5M"></script>
<script>createjs = window;</script>
<script src="http://code.createjs.com/createjs-2013.09.25.min.js"></script>
<script src="./kirakira.js" charset="UTF-8"></script>
<link rel="stylesheet" href="./kirakira.css" charset="UTF-8" />
</head>

<div id="kirakira_arae">
<!-- !!canvasのサイズを画像サイズと一致させる!! -->
<canvas id="kirakira_canvas" width="1920" height="1080"></canvas>
<!-- #kirakira_arae // -->
</div>
</html>

cssファイル

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#kirakira_arae{
  width:100%;
  height:100%;
}

#kirakira_canvas{
  width:100%;
  height:100%;
  background-image: url('XXXXX.jpg'); // !!ファイル名とパスを入力!!
  background-repeat: no-repeat;
  background-size: contain;
}

jsファイル

(function(window){
  var PARAM = new Object();
  $.canvas = {
    init : function(){
      PARAM = {
        main   : {id:$('#kirakira_arae')},
        canvas : {
          id   : $('#kirakira_canvas'),
          size : {width:1920, height:1080} // !!画像サイズと一致させる!!
        },
        velocity : {x:0, y:0},
        circle   : new Shape(),
        stage    : ''
      };		
      $.canvas.seting();
    },
    seting : function(){
      var canvasObject = PARAM.canvas.id.get(0);
      var context      = canvasObject.getContext("2d");

      PARAM.stage = new Stage(canvasObject);
      PARAM.velocity.x = Math.floor(Math.random()*5) + 5;
      PARAM.velocity.y = Math.floor(Math.random()*5) + 5;

      setInterval(function(){
        $.canvas.star();
      },1);

      Ticker.on("tick", $.canvas.tick);
    },
    star : function(){
      var shape      = new Shape();
      var g          = shape.graphics;
      var color      = (Math.random()*360);
      var glowColor1 = Graphics.getHSL(0, 100, 100, 1);
      var glowColor2 = Graphics.getHSL(color, 100, 75, 0.5);
      var radius     = (Math.random()*15);
      var position   = {x:Math.random()*PARAM.canvas.size.width, y :Math.random()*PARAM.canvas.size.height};

      g.beginRadialGradientFill( [glowColor1,glowColor2], [0.1,0.5], 0,0,1, 0,0,(Math.random()*10+13)*2);
      g.drawPolyStar(0, 0, radius, 5, 0.95, (Math.random()*360));
      g.endFill();

      g.beginRadialGradientFill( [Graphics.getHSL(color,100,75,0.5),Graphics.getHSL(color,100,75,0)], [0,0.5], 0,0,0, 0,0,radius);
      g.drawCircle(0, 0, radius);
      g.endFill();

      shape.compositeOperation = "lighter";

      shape.x      = position.x;
      shape.y      = position.y;
      shape.scaleX = 0;
      shape.scaleY = 0;
      shape.alpha  = 0;

      PARAM.stage.addChild(shape);
      $.canvas.tween(shape);
    },
    tween : function(SHAPE){
      var tween = Tween.get(SHAPE)
        .to({scaleX:1, scaleY:1, alpha:1}, 500, Ease.sineOut)
        .to({scaleX:0, scaleY:0, alpha:0, }, 800, Ease.sineIn)
      ;
      tween.call(function(){
        $.canvas.remove(this);
      });
    },
    remove : function(SHAPE){
      PARAM.stage.removeChild(SHAPE);
    },
    tick : function(){
      PARAM.stage.update();
    },
  };

  window.addEventListener("load", function(e){$.canvas.init();}, false);
})(window);

上記のプログラムに対して、下記の修正を加えることで好きな画像にキラキラエフェクトを追加することができます。
・htmlファイルのcanvasのサイズを画像のサイズに変更。
・cssファイルのコメント箇所を画像のファイル名（ファイルパス）に変更。
・jsファイルのコメント箇所を画像のサイズに変更。

以上のプログラムで、通常でも眩しいやきそばをもっと輝かせることができます！

ちなみに、一平ちゃんショートケーキ味は意外とおいしかったです！
かやくの「ヨーグルト風味キューブ」がちょっとアレな感じはありましたが…。
ごちそうさまでした！
やきそば完食

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%97%e3%81%a6%e7%94%bb%e5%83%8f%e3%82%92%e3%82%ad%e3%83%a9%e3%82%ad%e3%83%a9%e3%81%95%e3%81%9b%e3%82%8b/feed/ 0 JavaScriptとjQueryだけで動きのあるボタンを作成する https://incloop.com/javascript%e3%81%a8jquery%e3%81%a0%e3%81%91%e3%81%a7%e5%8b%95%e3%81%8d%e3%81%ae%e3%81%82%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b/ https://incloop.com/javascript%e3%81%a8jquery%e3%81%a0%e3%81%91%e3%81%a7%e5%8b%95%e3%81%8d%e3%81%ae%e3%81%82%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b/#respond Mon, 31 Oct 2016 12:39:40 +0000 https://incloop.com/?p=9117 JavaScriptとjQueryでボタン作成

ここ数日の夕飯の摂取カロリーが気になっています、網干です。 というのも、ここ数日はベーコン、ジャガイモ、チーズ […]]]> JavaScriptとjQueryでボタン作成

ここ数日の夕飯の摂取カロリーが気になっています、網干です。

というのも、ここ数日はベーコン、ジャガイモ、チーズをフライパンで焼いたものを毎晩のように食べているので、カロリーが高すぎるのではないかと気になっています…。
ですが、お手軽にできて非常に美味しいのです！やめられません！
ということで、本記事の最後にレシピと作り方を載せておきます、お楽しみに！

さて、今回はJavaScriptとjQueryだけで、下記のようなマウスが乗ったときに回転するボタンを作成する方法を記載します。
button1button2

具体的には、下記のように設定をしていきます。

  1. 変数を使ってjQueryでボタンのスタイルを設定する
  2. 回転を行うCSSの設定をjQueryで追加/削除する

では、早速コードを書いていきましょう！

変数を使ってjQueryでボタンのスタイルを設定する

ボタンのスタイルは下記のように変数の中に記述します。

// ボタンのスタイル
  var btnStyle = {
    "margin": "0 10px",
    "padding": "15px 0",
    "width": "150px",
    "color": "#000",
    "font-weight": "bold",
    "text-align": "center",
    "display": "inline-block",
    "overflow": "hidden",
    "background-color": "#cfcfcf",
    "border": "#999 1px solid",
    "border-radius": "5px",
    "transition": "all 1s ease-in-out",
    "text-decoration": "none"
  };

上記の変数を使用して、下記のように”button1″と”button2″のクラスのスタイルに設定します。

// ボタンのスタイルを設定
  jQuery('.button1, .button2').css(btnStyle);

これで”button1″と”button2″のクラスに対してスタイルを適用することができます。

では次に、ボタンを回転させる設定をしましょう。

回転を行うCSSの設定をjQueryで追加/削除する

下記のように指定して、ボタン回転動作の追加/削除を行います。

// ボタン縦回転
  jQuery('.button1').hover( function() {
    jQuery(this).css('transform', 'rotateX(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });

  // ボタン横回転
  jQuery('.button2').hover(function() {
    jQuery(this).css('transform', 'rotateY(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });

jQueryを使用したhoverの設定は「マウスカーソルが要素に入ったとき」と「マウスカーソルが要素から出たとき」の設定ができるため、上記のように設定します。
もしも「マウスカーソルが要素に入ったとき」だけに設定してしまうと、引き続き設定が維持されてしまうため回転は一回限りとなってしまいます。
参考記事：http://semooh.jp/jquery/api/events/hover/over,+out/

上記の設定で下記のようなマウスが乗ったときに回転するボタンをJavaScriptとjQueryのみで作成することができます。

button1button2

回転するボタンを設置できましたね！
スタイルを設定している変数の記述がスタイルシートに記述する様式と近いので、JavaScriptを知らない方でもカスタマイズできそうです。

では、最後に上記プログラムの一式を記載します。

まとめ（回転ボタンの設置とスクリプトの記述）

今回紹介したプログラムの一式は下記になります。

<a href="#" class="RotateButtonX">button1</a><a href="#" class="RotateButtonY">button2</a>

<script>
<!--
  // ボタンのスタイル
  var btnStyle = {
    "margin": "0 10px",
    "padding": "15px 0",
    "width": "150px",
    "color": "#000",
    "font-weight": "bold",
    "text-align": "center",
    "display": "inline-block",
    "overflow": "hidden",
    "background-color": "#cfcfcf",
    "border": "#999 1px solid",
    "border-radius": "5px",
    "transition": "all 1s ease-in-out",
    "text-decoration": "none"
  };

  // ボタンのスタイルを設定
  jQuery('.RotateButtonX, .RotateButtonY').css(btnStyle);

  // ボタン縦回転
  jQuery('.RotateButtonX').hover( function() {
    jQuery(this).css('transform', 'rotateX(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });

  // ボタン横回転
  jQuery('.RotateButtonY').hover(function() {
    jQuery(this).css('transform', 'rotateY(360deg)');
  }, function() {
    jQuery(this).css('transform', 'none');
  });
-->
</script>

上記のプログラムで注意してほしいのは、アンカータグの前にスクリプトを記述してはいけないことです。
アンカータグの前にスクリプトを記述してしまうと、アンカータグのクラスに対してスタイルの設定をすることができません。
これはスクリプトの実行タイミングの仕様に関係するので、もっと詳しく知りたい方は下記の記事を参考にしてください。
参考記事：http://qiita.com/tomcky/items/07190a3a2d0d993d1b56

動きのあるボタンの一覧リストをjsファイルにまとめてしまうことも可能！

今回のプログラムから、jsファイルだけでボタンのスタイル設定が可能であることがわかりました。
ということは、ホームページ制作で汎用的に使うボタンやメニューは、jsファイルにまとめてしまうことができるということになります。

上記の素晴らしいところは、事前にjsファイルでテンプレをいくつか作っておいてしまえば、プログラムの知識がない人でもファイルの読み込みさえできてしまえばJavaScriptを使用した動きのあるボタンやメニューが作れてしまうところですね！

今までは各ホームページに対して行っていた作業を、ファイルの読み込みだけで済ませてしまえるのであれば、作業時間をぐっと短縮することができる………可能性を秘めていると思います！

取得した知識を簡単に再利用することができて、かつ他の作業者に展開できるのは非常に魅力的です。
こういったライブラリのようなものをどんどん増やして、作業の負担を減らすのはプログラマの重要なお仕事の一つですね。

最後に、冒頭で話題に出していたじゃがいもとベーコンとチーズの炒め物(？)のレシピを載せます！

＜材料＞

  • ジャガイモ：1個
  • ペーコン：3～4枚
  • チーズ：お好みで

＜作り方＞

  1. ジャガイモの皮をむいて火が通りやすいサイズに薄切り
  2. ジャガイモを加熱用の器に入れて、ラップで蓋をして電子レンジ(500W)で2分～3分加熱
  3. フライパンに薄く油をひいてベーコン、加熱したジャガイモ、チーズの順に乗せる
  4. フライパンに蓋をしてチーズが溶けるまで弱火～中火で加熱する
  5. 完成！

辛い物が好きな方はタバスコをかけると更においしくなりますよ！
是非、お試しください！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/javascript%e3%81%a8jquery%e3%81%a0%e3%81%91%e3%81%a7%e5%8b%95%e3%81%8d%e3%81%ae%e3%81%82%e3%82%8b%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b/feed/ 0 《CSS》マウスオーバーした時にボタンの色と文字を入れ替える方法 https://incloop.com/%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%97%e3%81%9f%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e3%82%8b/ https://incloop.com/%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%97%e3%81%9f%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e3%82%8b/#respond Mon, 22 Jun 2015 12:51:41 +0000 https://incloop.com/?p=3327 マウスオーバーでボタンの色と文字を変える方法

ボタンにマウスを乗せた（マウスオーバー）時にボタンの色が変わるようにスタイルシートを書くことができますが、つい […]]]> マウスオーバーでボタンの色と文字を変える方法

ボタンにマウスを乗せた（マウスオーバー）時にボタンの色が変わるようにスタイルシートを書くことができますが、ついでに文字も変更してしまう方法を紹介します。

サンプル

CSS3で定義されたnth-child() 疑似クラスを活用

サンプルは以下のCSSとHTMLで実現できます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.button span {
	display: inline-block;
	position: absolute;
	width: 200px;
	height: 60px;
	border: 2px solid #333;
	text-align: center;
	line-height: 60px;
}
.button span:nth-child(1) {
	background-color: #fff;
	color: #333;

}
.button span:nth-child(2) {
	background-color: #333;
	color: #fff;

}
.button:hover span:nth-child(2) {
	display: none;
}
-->
</style>
</head>
<body>
<a class="button" href="#"><span>ボタン</span><span>Button</span></a>
</body>
</html>

ボタンに関してはわずか一行

ボタンと表示する文字列は以下の1行で書くことができます。

<a class="button" href="#"><span>ボタン</span><span>Button</span></a>

nth-child() 疑似クラスで指定

スタイルシートに関する部分です。

.button span {
	display: inline-block;
	position: absolute;
	width: 200px;
	height: 60px;
	border: 2px solid #333;
	text-align: center;
	line-height: 60px;
}
.button span:nth-child(1) {
	background-color: #fff;
	color: #333;

}
.button span:nth-child(2) {
	background-color: #333;
	color: #fff;

}
.button:hover span:nth-child(2) {
	display: none;
}

display:inline-block、かつposition:absoluteを指定することで、buttonクラスで定義された2つのボタン（ボタンとButton）を重ねて表示しています。後に書かれている「Button」と書いたボタンのほうが後から表示されるので「ボタン」と書かれたボタンを上書きしているような状態となっています。

span:nth-child(1)で「ボタン」と書かれたボタンの文字色と背景色を設定しています。

span:nth-child(2)で「Button」と書かれたボタンの文字色と背景色を設定しています。

そして、マウスオーバーで表示が変わる部分に関してですが、

hoverイベント発生時にspan:nth-child(2)のdisplayをnoneに設定することで、前面のボタンが消え、後ろに隠れていた「ボタン」と書かれたボタンが見えるという仕組みです。

これまでより簡単に実装可能になっています

これまでだと別々のクラスを持つボタンを用意しておき、hover時にdisplayでどちらか一方を消すという方法が必要でしたが、nth-child() 疑似クラスを活用することで、HTMLがとてもシンプルに書けるようになっています。

ぜひお試しください！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]> https://incloop.com/%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%97%e3%81%9f%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%82%92%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e3%82%8b/feed/ 0