ネイティブのScottish Government Design System 4.3.0 CharacterCount/CSS。ワークショップ用に独自作成したコンテンツとローカル検証。Arialをフォールバックとして使用。 · 実装リファレンス
02
Scottish Government デザインシステム デザインリファレンス
Scottish Government Design System 4.3.0で公開されたCSSとJavaScriptに基づき、現行の公式なタイポグラフィ、色、グリッドのガイダンスを掲載しています。ネイティブのCharacterCountとスタイルはプレビューで動作します。Arialは独立したサンプルで明示的に指定したフォールバックです。Scottish Governmentの各局ではRobotoを使用する必要があります。現行のパッケージアセットは以前のインストール例とは異なります。
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/
<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
import DS from '/vendor/scot/design-system.js';
const root = document.querySelector('[data-module="ds-character-count"]');
new DS.components.CharacterCount(root).init();
// Or DS.initAll() when the page uses multiple DS components.
</script>
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
Scottish Government Design System 4.3.0のCharacterCountコンポーネントを使用して、独立した参加支援メモ用フォームを作成します。検証済みのdist/css/design-system.min.cssとESモジュールのdist/scripts/design-system.jsのパスをバージョン固定で指定します。200文字のテキストエリア、80%のしきい値、関連付けられたヒント、コンポーネントを対象とした初期化を用意します。上限を超えた貼り付けテキストを保持し、標準の文字数表示とARIAの更新はライブラリに任せます。これとは別に、ローカルでの検証と、安全なテキストのみのプレビュー／編集／リセット機能を追加します。プログラムからサンプルを入力またはリセットする際は、inputイベントを発生させます。公開されているレスポンシブな文字組みとスペーシングを使用し、フォントの選択を明示します。公式のブランド表現や、実在しない送信機能は追加しません。
