Project_OKI’s diary

エンジニアの勉強ブログ

簡単ゲーム作成2(カードの用意)

HTML系

​​​カードっぽい何かを用意する

・目次

 

 1.目的

　・日・英神経衰弱に使用するカードとなる部分を作成する。

　・特に、カードのクオリティは求めないで、2×8個のカードを用意する。

 

2.プログラム

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
    <!-- JQuaryの追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style>

/* カード設定 CSS */
.card{
  /* boxのサイズを指定 */
  width: 8em;
  height: 10em; 
  
  /* boxの色をskyblueに指定 */
  background:skyblue;
  
  /* boxの上のカーソルを指マークに指定 */
  cursor: pointer;
  
  /* boxの外側の余白を指定 */
  margin: 1em 1em;
  
  /* 中央にテキストを表示 */
  text-align: center;
  
  /* 行の高さを設定 */
  line-height: 10;
}

 /*要素を横並びにする*/
.flexset{
    display: flex;
}
	</style>
  
  </head>
 
  <body>
  <div class = "flexset">
  	<div class = "card">card1</div>
  	<div class = "card">card2</div>
  	<div class = "card">card3</div>
  	<div class = "card">card4</div>
  </div>
  <div class = "flexset">
  	<div class = "card">card5</div>
  	<div class = "card">card6</div>
  	<div class = "card">card7</div>
  	<div class = "card">card8</div>
  </div>
  
  </body>
</html>

3.作成したカード

ーーーーーー

 

card1
card2
card3
card4
card5
card6
card7
card8

 

ーーーーーー

 

関連記事