Textformations/css

css for football formation generat

このページではサッカーのフォーメーション図を簡単に作れるCSSを配布しています。

View the Project on GitHub loopshoot/TextFormations

例

使い方

作成ツールを使う

例

CSSを読み込んで

<link rel="stylesheet" href="/tf-core.css" type="text/css" />

チーム名などの情報を書き込みます。

<div class='tf' style="width:280px;">
    <div class='tf-team'>team name</div>
    <div class='tf-desc'>description</div>
    <div class='tf-field f4-2-3-1_' style="height:240px;">
        <div class='tf-pc'></div>
        <div class='tf-pb'>11</div>
        <div class='tf-pa'>10</div>
        <div class='tf-p9'>9</div>
        <div class='tf-p8'>8</div>
        <div class='tf-p7'>7</div>
        <div class='tf-p6'>6</div>
        <div class='tf-p5'>5</div>
        <div class='tf-p4'>4</div>
        <div class='tf-p3'>3</div>
        <div class='tf-p2'>2</div>
        <div class='tf-p1'>1</div>
    </div>
    <div class='tf-foot'></div>
</div>

これだけでこんなフォーメーション図が出来上がります。

team name
description
11
10
9
8
7
6
5
4
3
2
1


使い方



1. 高さ、幅の設定

幅は .tf に設定してください。 
<div class='tf' style="width:280px;">
高さは .tf-field に設定してください。 
<div class='tf-field f4-2-3-1_' style="height:240px;">


2. システムの設定

システムは .tf-field にならべて、以下のクラス名を設定してください。
f4-2-3-1_の部分がシステムを示します。 
<div class='tf-field f4-2-3-1_' style="height:240px;">
システムクラス名
4-2-3-1f4-2-3-1_
4-4-2(ダブルボランチ)f4-4-2_box
4-4-2(ワンボランチ)f4-1-2-1-2_
4-3-3(ダブルボランチ)f4-2-1-3_
4-3-3(ワンボランチ)f4-1-2-3_
4-3-2-1(クリスマスツリー)f4-3-2-1_
4-1-4-1f4-1-4-1_
3-5-2(ダブルボランチ)f3-4-1-2_
3-5-2(ワンボランチ)f3-3-2-2_
3-6-1f3-4-2-1_
3-4-3(ダブルボランチ)f3-4-3_
3-4-3(ワンボランチ)f3-3-1-3_
4-3-3(バルサ仕様)f4-3-3_barsa


3. プレイヤーの設定

選手名はFWから順に .tf-tb,.tf-fa,tf-f9,,,.tf-fa に設定してください。 
	<div class='tf-pb'>11</div>
        <div class='tf-pa'>10</div>
        <div class='tf-p9'>9</div>
        <div class='tf-p8'>8</div>
        <div class='tf-p7'>7</div>
        <div class='tf-p6'>6</div>
        <div class='tf-p5'>5</div>
        <div class='tf-p4'>4</div>
        <div class='tf-p3'>3</div>
        <div class='tf-p2'>2</div>
        <div class='tf-p1'>1</div>
選手名が長すぎる場合は自動的に省略されます。
team name
description
11
10
9
8
7
選手名が長すぎるため、省略されています。
5
4
3
2
1


4. 基本HTMLコード

ここからスタート！ 
<div class='tf' style="width:280px;">
    <div class='tf-team'>team name</div>
    <div class='tf-desc'>description</div>
    <div class='tf-field f4-2-3-1_' style="height:240px;">
        <div class='tf-pc'></div>
        <div class='tf-pb'>11</div>
        <div class='tf-pa'>10</div>
        <div class='tf-p9'>9</div>
        <div class='tf-p8'>8</div>
        <div class='tf-p7'>7</div>
        <div class='tf-p6'>6</div>
        <div class='tf-p5'>5</div>
        <div class='tf-p4'>4</div>
        <div class='tf-p3'>3</div>
        <div class='tf-p2'>2</div>
        <div class='tf-p1'>1</div>
    </div>
    <div class='tf-foot'></div>
</div>