checkbox全てにチェックを入れる

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>

</style>

</head>
<body>
    <input type="checkbox" id="category_all" name="category_all">
    <label for="category_all">全て</label>
    <div id="categories">
      <input type="checkbox" name="category_01" id="category_01" value="01" class="category">
      <label for="category_01">とんこつ</label>
      <input type="checkbox" name="category_02" id="category_02" value="01" class="category">
      <label for="category_02">味噌</label>
      <input type="checkbox" name="category_03" id="category_03" value="01" class="category">
      <label for="category_03">醤油</label>
      <input type="checkbox" name="category_04" id="category_04" value="01" class="category">
      <label for="category_04">塩</label>
      <input type="checkbox" name="category_05" id="category_05" value="01" class="category">
      <label for="category_05">その他</label>
    </div>

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
<script>
$(function(){
  $('#category_all').on('click', function(){
    $('.category').prop('checked', this.checked);
  });

  $('.category').on('click', function(){
    if($('#categories :checked').length == $('#categories: input').length){
      $('#cateogry_all').prop('checked', 'checked');
    } else {
        $('#category_all').prop('checked', false);
    }
  });
});
</script>
</body>
</html>

vue.jsではなく、jqueryでいけましたね。これを都道府県でやりたい。

チェックボックスにvue.jsを使いたい

html

<tr>
          <th>地域</th><td>
            <input type="checkbox" name="pref" size="40"  value=""><b>北海道</b><br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>東北</b><br>
            <input type="checkbox" name="pref" size="40"  value="">青森
            <input type="checkbox" name="pref" size="40"  value="">岩手
            <input type="checkbox" name="pref" size="40"  value="">宮城
            <input type="checkbox" name="pref" size="40"  value="">秋田
            <input type="checkbox" name="pref" size="40"  value="">山形
            <input type="checkbox" name="pref" size="40"  value="">福島<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>関東</b><br>
            <input type="checkbox" name="pref" size="40"  value="">茨城
            <input type="checkbox" name="pref" size="40"  value="">栃木
            <input type="checkbox" name="pref" size="40"  value="">群馬
            <input type="checkbox" name="pref" size="40"  value="">埼玉
            <input type="checkbox" name="pref" size="40"  value="">千葉
            <input type="checkbox" name="pref" size="40"  value="">東京
            <input type="checkbox" name="pref" size="40"  value="">神奈川<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>中部</b><br>
            <input type="checkbox" name="pref" size="40"  value="">新潟
            <input type="checkbox" name="pref" size="40"  value="">富山
            <input type="checkbox" name="pref" size="40"  value="">石川
            <input type="checkbox" name="pref" size="40"  value="">福井
            <input type="checkbox" name="pref" size="40"  value="">山梨
            <input type="checkbox" name="pref" size="40"  value="">長野
            <input type="checkbox" name="pref" size="40"  value="">岐阜
            <input type="checkbox" name="pref" size="40"  value="">静岡
            <input type="checkbox" name="pref" size="40"  value="">愛知<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>近畿</b><br>
            <input type="checkbox" name="pref" size="40"  value="">三重
            <input type="checkbox" name="pref" size="40"  value="">滋賀
            <input type="checkbox" name="pref" size="40"  value="">京都
            <input type="checkbox" name="pref" size="40"  value="">大阪
            <input type="checkbox" name="pref" size="40"  value="">兵庫
            <input type="checkbox" name="pref" size="40"  value="">奈良
            <input type="checkbox" name="pref" size="40"  value="">和歌山<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>中国</b><br>
            <input type="checkbox" name="pref" size="40"  value="">鳥取
            <input type="checkbox" name="pref" size="40"  value="">島根
            <input type="checkbox" name="pref" size="40"  value="">岡山
            <input type="checkbox" name="pref" size="40"  value="">広島
            <input type="checkbox" name="pref" size="40"  value="">山口<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>四国</b><br>
            <input type="checkbox" name="pref" size="40"  value="">徳島
            <input type="checkbox" name="pref" size="40"  value="">香川
            <input type="checkbox" name="pref" size="40"  value="">愛媛
            <input type="checkbox" name="pref" size="40"  value="">高知<br><br>
            <input type="checkbox" name="pref" size="40"  value=""><b>九州・沖縄地方</b><br>
            <input type="checkbox" name="pref" size="40"  value="">福岡
            <input type="checkbox" name="pref" size="40"  value="">佐賀
            <input type="checkbox" name="pref" size="40"  value="">長崎
            <input type="checkbox" name="pref" size="40"  value="">熊本
            <input type="checkbox" name="pref" size="40"  value="">大分
            <input type="checkbox" name="pref" size="40"  value="">宮崎
            <input type="checkbox" name="pref" size="40"  value="">鹿児島
            <input type="checkbox" name="pref" size="40"  value="">沖縄
          </td>
        </tr>

東北をチェックすると、東北地方のチェックボックスをcheckedにしたい。vue.jsでできる?

stepバーを作ろう

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>
.step {
  list-style-type: none;
  display:table;
  width:100%;
  padding: 0;
  margin: 0;
  overflow:hidden;
}
.step li {
  display:table-cell;
  position: relative;
  background: #504944;
  padding: 1em 0.5em 1em 2em;
  color: #fff;
}
.step li:last-child {
  padding-right: 1em;
}
.step li:last-child:before,
.step li:last-child:after {
  display:none;
}
.step li:before,
.step li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}
.step li:before{
  top:-15px;
  right:-1em;
  border-style: solid;
  border-color:transparent transparent transparent #fff;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li:after {
  top:-15px;
  right:-.8em;
  border-style: solid;
  border-color:transparent transparent transparent #504944;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li.is-current {
  background: #9bbb30;
  font-weight: bold;
}
.step li.is-current:after{
  border-color: transparent transparent transparent #9bbb30;
}

</style>

</head>
<body>
    <div class="mermaid">
      <ol class="step">
        <li class="is-current">STEP1</li>
        <li>STEP2</li>
        <li>STEP3</li>
      </ol>
    </div>
</body>
</html>

OKOK ^^!

さあ、これを当てはめていきましょう♪

mermaidでシーケンス図

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="mermaid">
      sequenceDiagram
        A ->> B :要求
        B -->> A: 返答
    </div>
    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({
        startOnLoad:true
      });
    </script>
</body>
</html>

よくできてんなー

Brabio

WBS、ガントチャートにbrabioというツールを使ってみます。

なんだこれ、ガント作成が超絶楽だ。

tinymceのpタグ無効化

tinymce.initを編集
force_br_newlines : true, force_p_newlines : false,forced_root_block : ”, とします。

tinymce.init({
        
        mode : "specific_textareas",
        editor_selector : "mceEditor",
        language: 'ja',
        force_br_newlines : true,
        force_p_newlines : false,
        forced_root_block : '',
        branding: false,
        init_instance_callback: function (editor) {
        editor.on('change', function (e) {
          $('#preview_area').html(editor.getContent());
      });
    }
    });

おお、おもったよりいいっすね。

ではコードをはめ込んでいきます。
プレビューがイマイチだなー。。

border-radiusでごまかしますw
うん、こんな感じかな。

smtp周りだな。
CSSでステップバーを作りたい。あああああああああああああああああ、先がなげーーーーーー

tinymceの日本語を使う

以下のURLからJapaneseを選択
https://www.tiny.cloud/get-tiny/language-packages/

downloadすると、ja.jsが出てくる。

js/tinymce/langs 配下に配置する。

tinymce.initにlanguage: ‘ja’を追加

<script src="asset/js/tinymce/tinymce.min.js"></script>
    <script>
    tinymce.init({
        selector: 'textarea',
        language: 'ja'
    });
    </script>

おお、これはすげーな。