search
LoginSignup
133
Help us understand the problem. What are the problem?

posted at

updated at

デジタル庁公開のデザインをhtml/cssに落とし込んでみた。

はじめに

デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。
html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。
ということでhtml/cssに落とし込んでみました。

注意事項

  • 趣味程度に作ったものを、使いたい人がいればどうぞというものです。
  • 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。)
  • 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。
  • 大変つかれましたので、厳しいコメントは受け付けません。
  • 気が向いたら、もう少しきれいにするかもしれません。

完成概要

ページとしてはこんな感じ
_C__Development_HTML_work_mypassword_webui_mypassword.html (3).png

ソースコード

以下、べた張りさせていただきます。

HTML

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>デジタル庁公開デザインシステム テンプレート</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script type="text/javascript" src="jquery/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="mypage/mypage.js"></script>

	</head>



	<body>
		<div id="container">
			<!-- ======================================== -->
			<!-- ヘッダー DIV -->
			<!-- ======================================== -->
			<div id="header">
				<!-- <span></span> -->
			</div>




			<!-- ======================================== -->
			<!-- メインコンテンツ DIV -->
			<!-- ======================================== -->
			<div id="content_div" >

				<br>
				<h1>デジタル庁デザインシステムの実装</h1>
				<p>デジタル庁公開データはFigmaを使っているので、html/cssに落とし込んでみる。</p>
				<p class="alert">ところどころ違うところはあるかと思うが、なんとなく再現。</p>
				<br>

				<div class="wrapper">
					<h3>プライマリ</h3>
					<p>プライマリボタンは、ページ内で最も重要なアクション事に使用します。(例:「同意」、「送信」、「応募」)</p>
					<div class="A">
						<button id="primary_btn" class="btn">登録する</button>
					</div>
					<div class="B">
						<button id="primary_btn_enable" class="btn btn--secondary">登録するを有効化</button>
					</div>
				</div>
				<br>
				<br>



				<div class="wrapper">
					<h3>セカンダリ</h3>
					<p>プライマリボタンに比べて優先度が下がるアクションに対して使用します。(例:「問い合わせ」)</p>
					<div class="A">
						<button id="secondary_btn" class="btn btn--secondary">問い合わせ</button>
					</div>
					<div class="B">
						<button id="secondary_btn_enable" class="btn btn--secondary">問い合わせを有効化</button>
					</div>
				</div>
				<br>
				<br>

				
				<div class="wrapper">
					<h3>ターシャリ</h3>
					<p>プライマリボタン及びセカンダリボタンと比べて優先度が低い3つ目のアクションに対して使用します。(例:「キャンセル」)</p>
					<div class="A">
						<button id="tertiary_btn" class="btn btn--tertiary">キャンセル</button>
					</div>
					<div class="B">
						<button id="tertiary_btn_enable" class="btn btn--secondary">キャンセルを有効化</button>
					</div>
				</div>
				<br>
				<br>
				<span id="message" class="link"></span>
				<br>
				<br>


				<div>
					<h3>セレクター</h3>
					<p>リストが5つ以下の場合は、ラジオボタンの使用を推奨します。タップやクリックをせずに選択肢の全体が見え、選択がより簡単になります。</p>
					<label class="input_label">セレクタ1</label>
					<span class="input_label_required">必須</span>
					<select class="select" id="select1">
						<option value="option1">選択肢1</option>
						<option value="option2">選択肢2</option>
						<option value="option3">選択肢3</option>
					</select>
				</div>
				<br>
				<br>


				<div>
					<h3>テキスト入力</h3>
					<p>コンテナーの横幅は、言葉の長さに合わせて調整してください。入力すべきものをより直感的にわかりやすくできます。</p>
					<label class="input_label">テキスト1</label>
					<span class="input_label_required">必須</span>
					<input type="text" class="inputtext" id="inputtext1" value="" placeholder="プレイスホルダー">
					<!-- <span class="input_helptext">ヘルプテキスト</span> -->

					<br>

					<label class="input_label">テキスト2</label>
					<span class="input_label_required">必須</span>
					<input type="text" class="inputtext" id="inputtext2" value="" placeholder="プレイスホルダー">
					<!-- <span class="input_helptext">ヘルプテキスト</span> -->

					<br>

					<label class="input_label">テキスト3</label>
					<span class="input_label_option">任意</span>
					<input type="text" class="inputtext" id="inputtext3" value="" placeholder="プレイスホルダー">
					<span class="input_helptext">ヘルプテキスト</span>
				</div>
				<br>
				<br>
						

				<div>
					<h3>ラジオボタン(タイル型)</h3>
					<p>デフォルト型、タイル型の2種類のラジオボタンがあります。補足説明が必要な場合にタイル型を活用できます。ふたつの型を同時に使用することはできません。</p>
					<label class="input_label">ラジオ1</label>
					<span class="input_label_required">必須</span>
					
					<div class="radio_btns">
						<input type="radio" name="radio1" id="radio_option1" value="option1" >
						<label for="radio_option1" class="radio_btn_tile">
							<div class="radio_btn">
							</div>
							<div>
								<div>選択肢1</div>
								<div><span class="input_helptext">ヘルプテキスト</span></div>
							</div>
						</label>

						<input type="radio" name="radio1" id="radio_option2" value="option2">
						<label for="radio_option2" class="radio_btn_tile">
							<div class="radio_btn">
							</div>
							<div>
								<div>選択肢2</div>
								<div><span class="input_helptext">ヘルプテキスト</span></div>
							</div>
						</label>

						<input type="radio" name="radio1" id="radio_option3" value="option3">
						<label for="radio_option3" class="radio_btn_tile">
							<div class="radio_btn">
							</div>
							<div>
								<div>選択肢3</div>
								<div><span class="input_helptext">ヘルプテキスト</span></div>
							</div>
						</label>
					</div>
					<span class="input_helptext">ヘルプテキスト</span>
				</div>
				<br>
				<br>


				<div>
					<h3>チェックボックス</h3>
					<p>ひとつの項目しか選択できない場合は、必ずラジオボタンを使用してください。</p>
					<p class="alert">チェックボックス、☑の再現、とりあえずまた気が向いたらやります。。。</p>
					<label class="input_label">チェックボックス1</label>
					<span class="input_label_required">必須</span>
					
					<div class="checkboxes">
						<input type="checkbox" name="checkbox1" id="checkbox_option1" value="option1" >
						<label for="checkbox_option1" class="checkbox_label">
							<div class="checkbox_icon"><div class="checkbox"></div></div>
							<div>選択肢1</div>
						</label>

						<input type="checkbox" name="checkbox1" id="checkbox_option2" value="option2" >
						<label for="checkbox_option2" class="checkbox_label">
							<div class="checkbox_icon"><div class="checkbox"></div></div>
							<div>選択肢2</div>
						</label>

						<input type="checkbox" name="checkbox1" id="checkbox_option3" value="option3" >
						<label for="checkbox_option3" class="checkbox_label">
							<div class="checkbox_icon"><div class="checkbox"></div></div>
							<div>選択肢3</div>
						</label>
					</div>
					<span class="input_helptext">ヘルプテキスト</span>
				</div>
				<br>
				<br>

				<div>
					<button id="invoke_btn" class="btn btn--primary" disabled>実行</button>
				</div>
				<br>
				<br>
				<span id="messageBottom" class="link"></span>
				<br>
				<br>  

			</div>

			<!-- ======================================== -->
			<!-- ヘッダー DIV -->
			<!-- ======================================== -->
			<div id="footer">
				<!-- <span>footer</span> -->
			</div>
		</div>
		

	</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

*{
    font-family: 'Noto Sans JP', sans-serif;
    font-size:1rem;
    outline:none;
}
html {
   background-color: #F1F1F4; /* 周囲の背景色 */
}
body {
    max-width: 1064px; /*パディング分を考慮して*/
    min-width: 1064px; /*パディング分を考慮して*/
    margin:auto;
    padding: 40px;
    background: #FFFFFF;

}


h1 {
    font-weight: bold;
    font-size:2.625rem;
}

h2 {
    font-weight: bold;
    font-size:2rem;
}

h3 {
    font-weight: bold;
    font-size:1.625rem;
}

h4 {
    font-weight: bold;
    font-size:1.375rem;
}

h5 {
    font-weight: bold;
    font-size:1.25rem;
}

h6 {
    font-weight: bold;
    font-size:1.125rem;
}

button {
    font-weight: bold;
    font-size:1rem;
}




/*---------------------------------------
ボタン配置
---------------------------------------*/

.wrapper .A{
    text-align:center;
    
    float:left;/*左周り*/
    width:50%;

}

.wrapper .B{
    text-align:center;
    
    float:right;/*右周り*/
    width:50%;
}






/*---------------------------------------
Primary Button
---------------------------------------*/
.btn {
    border: 1px solid #003EE5;
    position: relative;
    padding: 1rem 4rem;

    cursor: pointer;
    user-select: none;

    transition: all 0.3s;
    vertical-align: middle;    
    text-decoration: none;
    border-radius: 0.5rem;
    width: fit-content;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-feature-settings: 'pwid' on;

    color: #FFFFFF;
    background: #003EE5;
    min-width: 256px;
}


.btn:hover {
  background: #0030B2;
    border: 1px solid #0030B2;
}

.btn:active {
  background: #0030B2;
    border: 1px solid #0030B2;
}

.btn:focus {
    /* Light/Border/Focused */
    border: 1px solid #D18D0F;
}

.btn:disabled {
    border: 1px solid #949497;
  background: #949497;
  pointer-events: none;
}


/*---------------------------------------
Secondary Button ※プライマリボタンの色などの上書き定義
---------------------------------------*/
.btn.btn--secondary {

    /* Light/Text/On Fill */
    color: #003EE5;

    /* Light/Button/Normal */
    background: #FFFFFF;

    /* Light/Button/Normal */

    border: 1px solid #003EE5;
    border-radius: 8px;
}


.btn.btn--secondary:hover {
    color:  #0030B2;
    background: #E8F1FE;
    border: 1px solid #0030B2;
}

.btn.btn--secondary:active {
    color:  #0030B2;
    background: #E8F1FE;
    border: 1px solid #0030B2;
}

.btn.btn--secondary:focus {
    /* Light/Border/Focused */
    border: 1px solid #D18D0F;
    background: transparent;
}

.btn.btn--secondary:disabled {
    border: 1px solid #949497;
    background: #FFFFFF;
    color: #949497;
}


/*---------------------------------------
Tertiary Button ※プライマリボタンの色などの上書き定義
---------------------------------------*/
.btn.btn--tertiary {

    /* Light/Text/On Fill */
    color: #003EE5;

    /* Light/Button/Normal */
    background: transparent;

    /* Light/Button/Normal */

    border: 1px solid transparent;
    text-decoration-line: underline;
}


.btn.btn--tertiary:hover {
    color:#0030B2 ;
    border: 1px solid transparent;
}

.btn.btn--tertiary:active {
    color: #0030B2;
    border: 1px solid transparent;
}

.btn.btn--tertiary:focus {
    /* Light/Border/Focused */
    border: 1px solid #D18D0F;
}

.btn.btn--tertiary:disabled {
    border: 1px solid transparent;
    color: #949497;
}





/*---------------------------------------
input / select
---------------------------------------*/

.inputtext ,
.select {
   /* Input */

    margin:8px 0px;
    box-sizing: border-box;

    /* オートレイアウト */

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;

    width: 327px;
    height: 56px;

    /* Light/Background/Primary */

    background: #FFFFFF;
    /* Light/Border/Field */

    border: 1px solid #1A1A1C;
    border-radius: 8px;

    /* オートレイアウト内部 */

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0; 
}

.input:focus,
.select:focus{

    border: 1px solid #D18D0F;
}

.input_error ,
.select_error {

    border: 1px solid #EC0000;

}

.input_label {
    /* Label */

    /* Subtitle2/Mobile */

    font-weight: 600;
    font-size: 14px;
    line-height: 175%;
    /* ボックスの高さと同一、または24px */

    letter-spacing: 0.04em;
    font-feature-settings: 'pwid' on;

    /* Light/Text/Body */

    color: #1A1A1C;



}


.input_label_required {
    margin-left:8px;
   /* Required */
    /* Capture/Mobile */

    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    /* ボックスの高さと同一、または18px */

    letter-spacing: 0.0125em;
    font-feature-settings: 'pwid' on;

    /* Light/Text/Alert */

    color: #EC0000;

}

.input_label_option {

    margin-left:8px;

    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    /* ボックスの高さと同一、または18px */

    letter-spacing: 0.0125em;
    font-feature-settings: 'pwid' on;

    /* Light/Text/Alert */

    color: #999999;

}



.input_helptext {
    /* String */


    width: 327px;
    height: 18px;

    /* Capture/Mobile */

    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    /* ボックスの高さと同一、または18px */

    letter-spacing: 0.0125em;
    font-feature-settings: 'pwid' on;

    /* Light/Text/Description */

    color: #626264;
}







/*---------------------------------------
radioボタン
---------------------------------------*/



input[type=radio] {
    opacity:0;
    position: absolute;
}

.radio_btn_tile {
    cursor: pointer;
    /* Tile */


    box-sizing: border-box;
    margin:8px 0px;
    /* オートレイアウト */

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 16px;

    width: 327px;
    height: 74px;

    /* Light/Background/Primary */

    background: #FFFFFF;
    /* Light/Border/Field */

    border: 1px solid #1A1A1C;
    border-radius: 8px;

    /* オートレイアウト内部 */

    flex: none;
    order: 0;
    flex-grow: 1;
}

.radio_btn {
    display: block;
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    background-color: #FFFFFF; 
    box-shadow:0 0 0 2px #1A1A1C;
    width: 13px;
    height: 13px;
}


.radio_btns input[type=radio]:checked + .radio_btn_tile {
    border: 1px solid #003EE5;
}


.radio_btns input[type=radio]:checked + .radio_btn_tile .radio_btn{

    border: 4px solid #FFFFFF;
    background-color: #003EE5; 
    box-shadow:0 0 0 2px #003EE5;
    width: 13px;
}



/*---------------------------------------
チェックボックス
---------------------------------------*/
input[type=checkbox] {
    opacity:0;
    position: absolute;
}

.checkbox_label {
    cursor: pointer;

    /* Checkbox */


    /* オートレイアウト */

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;

    width: 327px;
    height: 40px;


    /* オートレイアウト内部 */

    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}


.checkbox_icon {
    /* Icon */


    width: 24px;
    height: 24px;


    /* オートレイアウト内部 */

    flex: none;
    order: 0;
    flex-grow: 0;
}



.checkbox {
    position: relative;
    left: 14.58%;
    right: 14.58%;
    top: 14.58%;
    bottom: 14.58%;
    width: 16px;
    height: 16px;
    border: 1px solid #1A1A1C;
    /* Light/Icon/Active */

    background: #FFFFFF;
    border-radius: 3px;
}


.checkboxes input[type=checkbox]:checked + .checkbox_label .checkbox_icon .checkbox{
    border: 1px solid #003EE5;
    background: #003EE5;
    border-radius: 3px;
    content: "s";

}







/*---------------------------------------
カラー
---------------------------------------*/

.description {
    color: #626264;
}


.place_holder {
    color: #757578;
}


.link {
    color: #003EE5;
}


.visited {
    color: #0000BE;
}


.alert {
    color: #EC0000;
}

.disabled {
    color: #949497;
}




おまけでJavaScript


function showMessage(message) {
    $("#message").text(message);
}

function showMessageBottom(message) {
    $("#messageBottom").text(message);
}


function refreashInvokeButton() {
    if(!$("#inputtext1").val() || !$("#inputtext2").val() || !$('input[name="radio1"]:checked').val()){
        $('#invoke_btn').prop( 'disabled', true );
        return;
    }
    if($('input[name="checkbox1"]:checked').length == 0){
        $('#invoke_btn').prop( 'disabled', true );
        return;
    }
    
    $('#invoke_btn').prop( 'disabled', false );



}

$(document).ready( function () {


    $('#primary_btn').click( function() {
        $('#primary_btn').prop( 'disabled', true );
        showMessage("プライマリボタンが押されました。");
    });

    $('#primary_btn_enable').click( function() {
        $('#primary_btn').prop( 'disabled', false );
        showMessage("");
    });

    $('#secondary_btn').click( function() {
        $('#secondary_btn').prop( 'disabled', true );
        showMessage("セカンダリボタンが押されました。");
    });

    $('#secondary_btn_enable').click( function() {
        $('#secondary_btn').prop( 'disabled', false );
        showMessage("");
    });

    $('#tertiary_btn').click( function() {
        $('#tertiary_btn').prop( 'disabled', true );
        showMessage("ターシャリボタンが押されました。");
    });

    $('#tertiary_btn_enable').click( function() {
        $('#tertiary_btn').prop( 'disabled', false );
        showMessage("");
    });





    $("#inputtext1").keyup(function(){
        refreashInvokeButton();
    });
    $("#inputtext2").keyup(function(){
        refreashInvokeButton();
    });
    $('input[name="radio1"]').change(function(){
        refreashInvokeButton();
    });
    $('input[name="checkbox1"]').change(function(){
        refreashInvokeButton();
    });

    $("#invoke_btn").click(function () {
        var label1=$("#inputtext1").val();
        var label2=$("#inputtext2").val();
        var label3=$("#inputtext3").val();
        var select1=$("#select1").val();
        var radio1=$('input[name="radio1"]:checked').val();
        var checkbox1 = [];
        $('input[name="checkbox1"]:checked').each(function() {
            checkbox1.push($(this).val());
        });
        showMessageBottom(
            "セレクタ1:"+select1
            +", テキスト1: "+label1
            +", テキスト2: "+label2
            +", テキスト3: "+label3
            +", ラジオ1: "+radio1
            +", チェックボックス1: "+checkbox1
        );
    });




});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
133
Help us understand the problem. What are the problem?