HTML5でのレイアウト

皆さんおはこんばんにちは。天翔です(^^ゞ

今日からRhythm Tap Rideの公開を始めたいな...と思ってたりしてます(;^ω^)

さて、そんな音ゲーの中でも話題の【VOEZ】ですが、

先ほどGoogle+の方にこんな写真を投稿した所意外と反響があったので

ここにて解説していきたいと思います。

上の画面は勿論VOEZではありません。

画面を切り貼りしたわけでもないです(´・ω・`)

ちゃんとCssベースで作られていますのでかなり応用できるかと思います。

これが上の画像の全てです└(՞ةڼ◔)」

<html>
	<head>
		<style>
			panel {
				border: 2.97px solid #6d6c8d;
				display: block;
				position: relative;
				transform: rotate(45deg);
			}
			
			span {
				display: inline-flex;
				margin: 109.5px;
				text-align: center;
				transform: rotate(-45deg);
			}
		</style>
	</head>
	
	<body>
		<panel style="height: 219px; width: 219px; top: -50px; left: -50px;">
			<span style="">0<br>Key</span>
		</panel>
		
		<panel style="width: 219px; height: 219px; top: -117px; left: 106px;">
		</panel>
	</body>
</html>

独自タグとして<Panel></Panel>を追加しています。

かなり適当にやってますので(5分クオリティだからねしょうがないね)

見栄えはまだ綺麗じゃないです(^^;)

まぁCss使うと便利だよ、って事ですね。ハイ。

じゃあ(´∀｀*)ﾉｼ　ﾊﾞｲﾊﾞｲ

天翔のブログ

ごめんなさい許してください更新しますから！(更新するとは言ってない)

HTML5でのレイアウト