投稿日：2020-09-06T20:36:00+09:00

【初心者でもわかる】CSSだけで8角形を作る方法

どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで8角形の作り方について

ちょっと凝ったデザインにするときに役立つtipsを紹介。

CSSだけで8角形を作ります。jsで動きとかつけたらおしゃれなサイト作れそう。

cssだけで8角形を作る
index.html
<div class="octagon">
    <div class="octagon_frame"></div>
</div>
style.css
.octagon {
  width: 240px;
  height: 240px;
  position: relative;
  background: #ccf; /* 8角形の色or画像 */
}
.octagon::before {
  content: '';
  width: 0;
  height: 0;
  border: 35px solid transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.octagon::after {
  content: '';
  width: 0;
  height: 0;
  border: 35px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
}
.octagon_frame::before {
  content: '';
  width: 0;
  height: 0;
  border: 35px solid transparent;
  border-bottom-color: #fff;
  border-left-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.octagon_frame::after {
  content: '';
  width: 0;
  height: 0;
  border: 35px solid transparent;
  border-bottom-color: #fff;
  border-right-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
}
結果

画像も入れれます。

いっぱい並べておしゃれな背景にも。

疑似要素を計4つ使い、四隅に背景色と同じ色を配置することで8角形に見せています。

三角形の大きさの計算ですが、borderの数字は大体横幅の7分の1くらいの数字を入れると、ほぼほぼきれいな8角形に見えます。

まとめ

6角形の方法もまた記事書きますね。
マウスカーソルでhoberした時、くるくる回転させるとかやってみたい。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T20:17:27+09:00

Google Formで作成したフォームをアレンジする[submit後の表示ページ指定も]

はじめに

Google Formで作成したフォームをカスタマイズ（アレンジ）する方法です。
HTML，Java Scriptの知識がある程度ある人を対象にしています。
（※2020年9月現在のGoogle Formの仕様に合わせて書いています。）

デモページ

完成品はこちらから確認できます。（何かテキトーに送ってみてくださいw）

Google Formでフォームを作る

Google Formへアクセスし、フォームを作成してください。
※Google Formでのフォーム作成の詳しい手順は、こちらで確認できます。

作成したGoogle Formのソースコード確認する

作成したフォームのページへアクセスし、ソースコードを見ます。（Windowsだと、Ctrl + U，Macだと、command + option + Uでそのサイトのソースコードを確認することができます。）

ソースコードはこんな感じになっています。

ここで大切なのは、ビビらないことです。
いろんなサイトのソースコードを見ている僕でも、「ｳｪｯ」ってなります（笑）

ソースコードの中から必要な情報を拾う

① form actionを見つける

ソースコードの中から、<form action=・・・・</form>という文字列を検索します。
Ctrl + F（Windows），または、command + F（Mac）で、<form actionと検索してください。

この中から、
<form action="https://docs.google.com/forms/u/1/d/e/**********/formResponse" target="_self" method="POST" id="******">
の部分をコピーし、メモ帳などにコピペしておきます。
ポイントは、<form actionから、id="******"までとることです。

実際には、こんな感じになります。
<form action="https://docs.google.com/forms/u/1/d/e/**********/formResponse" method="POST" id="******" target="hidden_iframe" onsubmit="submitted=true;">
（※URLの後の部分を、method="POST" id="******" target="hidden_iframe" onsubmit="submitted=true;"に変更する必要があります。）

② 格要素のnameを見つける

ソースコードの112～113行目あたりまでスクロールします。

[1545406749,"お名前",null,0,[[1374190194,null,1]のような、[数字，"フォームの要素の名前"，null，数字，[[数字，null，数字]と並んでいる部分があるはずです。
今回必要なのは、[1545406749,"お名前",null,0,[[1374190194,null,1]の、オレンジ色で文字に色を付けた部分の数字です。この数字が、フォームの項目（要素）に紐づいているわけです。
これを各項目ごと；今回の場合「お名前」「年齢」「お問い合わせ内容」の3つの項目があるので、それぞれ探していき、メモ帳などにコピペしておきます。

実際ののフォームのソースコードは、このようになります。
<input name="entry.1374190194" type="text" required="required" id="textfield" class="g_form" placeholder="お名前">
このように、name="*****" が無ければ入れてあげてください。

この　`name="entry.1374190194"　の部分が、Googleフォームのソースコードから拾ってきた文字列となり、オリジナルのフォームだとしてもGoogle Formの「お名前」と紐づくというわけです。

拾うのは1374190194という数字だけですが、実際に使用するフォームには、
entry.1374190194"
という風に、entry.も忘れずに入れましょう。

実際のソースコード
<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse"
        method="POST" id="mG61Hd" target="hidden_iframe" onsubmit="submitted=true;">

        <ul>
          <li>
            お名前
            <input name="entry.1374190194" type="text" required="required" id="textfield" class="g_form"
              placeholder="お名前">
          </li>

          <li>年齢
            <input name="entry.896360449" required="required" type="number" class="g_form" id="textfield2"
              placeholder="年齢">
          </li>

          <li>お問い合わせ内容<textarea name="entry.427275093" required="required" class="g_form_text" id="textarea"
              placeholder="お問い合わせ内容"></textarea>
          </li>

          <li>
            <input type="submit" class="btbt">
          </li>
        </ul>

</form>
こんな感じです。

一見複雑に見えますが、

タグに　コピペしたaction を入れる。
にそれぞれ該当する　name を入れる。
これだけで、自作のフォームとGoogle Formが連動して、動作するようになります。

submitした後の表示ページを指定する

submit（送信）した後に表示されるページを指定していきます。
設定しなくても、正常に動作しますが（Google Form既定の、「回答を送信しました」というページに飛びます）、それでしたらデザイン性が一貫されないと思いますので、設定することをお勧めします。

必要なことはたった2つだけです。

1つ目[target="hidden_iframe" onsubmit="submitted=true;"]
<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse" method="POST" id="mG61Hd">
の後に、
target="hidden_iframe" onsubmit="submitted=true;"
を挿入します。
つまり、こんな感じ。
<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse" method="POST" id="mG61Hd" target="hidden_iframe" onsubmit="submitted=true;">
2つ目[JavaScriptによる制御]

フォームの終了タグ（</form>）の直前に、
 <script type="text/javascript">
          var submitted = false;
 </script>

 <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='thanks.html';}"></iframe>
を挿入します。

つまり、
<form action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSd2oqcCuCixdbNA8oooYsN6-1dQTRe8Gg22fCOV0bEk4SsO-A/formResponse"
        method="POST" id="mG61Hd" target="hidden_iframe" onsubmit="submitted=true;">

        <ul>
          <li>
            お名前
            <input name="entry.1374190194" type="text" required="required" id="textfield" class="g_form"
              placeholder="お名前">
          </li>

          <li>年齢
            <input name="entry.896360449" required="required" type="number" class="g_form" id="textfield2"
              placeholder="年齢">
          </li>

          <li>お問い合わせ内容<textarea name="entry.427275093" required="required" class="g_form_text" id="textarea"
              placeholder="お問い合わせ内容"></textarea>
          </li>

          <li>
            <input type="submit" class="btbt">
          </li>
        </ul>

        <script type="text/javascript">
          var submitted = false;
        </script>

        <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
          onload="if(submitted){window.location='thanks.html';}"></iframe>

      </form>
こうすれば、submitした後のページを指定できます。（※今回の場合は、thanks.htmlに飛びます。）

補足
placeholder="お名前"
を入れると、フォームの枠の中に任意の文字列を表示できます。上記の場合「お名前」と表示されます。
required="required"
これを入れると必須項目になります。

どこにどんな感じで入れれば良いかは、上記のソースをご確認ください。

念のため、上記の完成したソースの

<ul>や<li>、idやclassなどは、このサンプルを成形するためだけにあるものなので、皆さんのフォームには必要ありません。

おわりに

Google Formで作成したフォームを自分流にアレンジすることができたでしょうか？

もし、わからないところがあれば、僕のTwitter（@sekaino_usay）のDM、メール（sekaino.usay@gmail.com）、またはDiscord（sekaino_usay#4022）に質問を送ってください！（この記事のコメント欄に書いていただいても良いですよ！）
また、間違い・ご指摘等ありましたら、是非教えてください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T16:17:03+09:00

Sass for文で楽したい

前提

SassのSCSS記法を用いる。

前回の続き。https://qiita.com/mei0210/items/5fdeef361249aa3a2f9a

style.scss

    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }

max-width 1500pxまでメディアクエリで書いた。
max-width 2900pxまで同じように書いていきたい。
地道に書いていくのはつらいので...

for文で書く

style.scss

    @for $i from 0 through 10 {
      @media (max-width: $i * 200 + 900px) and (min-width: $i * 200 + 701px) {
        width: #{100% / ($i + 4)};
      }
    }

これだけ！

cssにコンパイル↓

style.css

@media (max-width: 900px) and (min-width: 701px) {
  .wrap .circle {
    width: 25%;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .wrap .circle {
    width: 20%;
  }
}

@media (max-width: 1300px) and (min-width: 1101px) {
  .wrap .circle {
    width: 16.66667%;
  }
}

@media (max-width: 1500px) and (min-width: 1301px) {
  .wrap .circle {
    width: 14.28571%;
  }
}

@media (max-width: 1700px) and (min-width: 1501px) {
  .wrap .circle {
    width: 12.5%;
  }
}

@media (max-width: 1900px) and (min-width: 1701px) {
  .wrap .circle {
    width: 11.11111%;
  }
}

@media (max-width: 2100px) and (min-width: 1901px) {
  .wrap .circle {
    width: 10%;
  }
}

@media (max-width: 2300px) and (min-width: 2101px) {
  .wrap .circle {
    width: 9.09091%;
  }
}

@media (max-width: 2500px) and (min-width: 2301px) {
  .wrap .circle {
    width: 8.33333%;
  }
}

@media (max-width: 2700px) and (min-width: 2501px) {
  .wrap .circle {
    width: 7.69231%;
  }
}

@media (max-width: 2900px) and (min-width: 2701px) {
  .wrap .circle {
    width: 7.14286%;
  }
}

for文とても便利。

参考

https://hacknote.jp/archives/917/

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T16:07:11+09:00

【CreateJS】手書き入力インタフェース

はじめに

手書き文字をAIに判別させるデータは、MNISTなどでデータがフリーで公開されています。そのデータを利用すると、簡単に識別モデルを作ったり、推論させたりすることができます。しかし、実際に自分が書いた文字をAIに食わせてみたいと思っても、デジタルデータにするのが意外と面倒くさいですよね。そこで、手書き文字をデジタルデータへ簡単に変換できるInterfaceをjavascript(CreateJS)で作成してみました。

プログラム

javascript(CreateJS)を使用したプログラムです。

tegaki_Interface.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"> </script>
</head>
<body>
  描画キャンバス
  <div><canvas id="WriteCanvas" width="240" height="240"></canvas></div>
  <div><canvas id="ButtonCanvas" width="240" height="100"></canvas></div>
  PNG形式
  <div><img id="copyImg" width="240" height="240" background="#000000"></div>
</body>
</html>

<script>
window.addEventListener("load", init);
function init() {

    // --------------------------------------------------------------
    // Stage1オブジェクト：WriteCanvas
    // --------------------------------------------------------------
    var stage1 = new createjs.Stage("WriteCanvas");

    // タッチイベントが有効なブラウザの場合、
    // CreateJSでタッチイベントを扱えるようにする
    if (createjs.Touch.isSupported()) {
        createjs.Touch.enable(stage1);
    }

    var shape = new createjs.Shape();   // シェイプを作成
    stage1.addChild(shape);             // ステージに配置

    handleClick_reset();

    // ステージ上でマウスボタンを押した時のイベント設定
    stage1.addEventListener("stagemousedown", handleDown);

    // マウスを押した時に実行される
    function handleDown(event) {

        var paintColor = "#FFFFFF"                      // 筆ペンの色

        // 線の描画を開始
        shape.graphics
                .beginStroke(paintColor)                // 指定のカラーで描画
                .setStrokeStyle(20, "round")            // 線の太さ、形
                .moveTo(event.stageX, event.stageY);    // 描画開始位置を指定

        // ステージ上でマウスを動かした時と離した時のイベント設定
        stage1.addEventListener("stagemousemove", handleMove);
        stage1.addEventListener("stagemouseup", handleUp);
    }

    // マウスが動いた時に実行する
    function handleMove(event) {

        // マウス座標への線を引く
        shape.graphics.lineTo(event.stageX, event.stageY);
    }

    // マウスボタンが離された時に実行される
    function handleUp(event) {

        // マウス座標への線を引く
        shape.graphics.lineTo(event.stageX, event.stageY);

        // 線の描画を終了する
        shape.graphics.endStroke();

        // イベント解除
        stage1.removeEventListener("stagemousemove", handleMove);
        stage1.removeEventListener("stagemouseup", handleUp);
    }

    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener("tick", onTick);

    function onTick() {
        stage1.update(); // Stageの描画を更新
    }

    // --------------------------------------------------------------
    // Stage2オブジェクト：ButtonCanvas
    // --------------------------------------------------------------
    var stage2 = new createjs.Stage("ButtonCanvas");
    stage2.enableMouseOver();

    // ボタンを作成
    var btn1 = createButton("PNG変換", 80, 30, "#0650c7");
    btn1.x = 20;
    btn1.y = 10;
    stage2.addChild(btn1);

    var btn2 = createButton("Reset!", 80, 30, "#d10a50");
    btn2.x = 110;
    btn2.y = 10;
    stage2.addChild(btn2);

    // イベントを登録
    btn1.addEventListener("click", handleClick_png);
    btn2.addEventListener("click", handleClick_reset);

    // PNG変換ボタン押下イベント
    function handleClick_png(event) {

        // Canvasタグから画像に変換
        stage1.update();
        var png = stage1.canvas.toDataURL();
        document.getElementById("copyImg").src = png;

        /*
        var w = window.open('about:blank');
        w.document.write("<img src='" + png + "'/>");
        */
    }

    // Rest!ボタン押下イベント
    function handleClick_reset(event) {

        // シェイプのグラフィックスを消去
        shape.graphics.clear();
        shape.graphics.beginFill("black");
        shape.graphics.drawRect(0, 0, 240, 240);
        shape.graphics.endFill();
        stage1.update();
        var png = stage1.canvas.toDataURL();
        document.getElementById("copyImg").src = png;
    }

    // 時間経過イベント
    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick() {

        // Stage2の描画を更新
        stage2.update();
    }

    /**
    * @param {String} text ボタンのラベル文言です。
    * @param {Number} width ボタンの横幅(単位はpx)です。
    * @param {Number} height ボタンの高さ(単位はpx)です。
    * @param {String} keyColor ボタンのキーカラーです。
    * @returns {createjs.Container} ボタンの参照を返します。
    */
    function createButton(text, width, height, keyColor) {

        // ボタン要素をグループ化
        var button = new createjs.Container();
        button.name = text; // ボタンに参考までに名称を入れておく(必須ではない)
        button.cursor = "pointer"; // ホバー時にカーソルを変更する

        // 通常時の座布団を作成
        var bgUp = new createjs.Shape();
        bgUp.graphics
              .setStrokeStyle(1.0)
              .beginStroke(keyColor)
              .beginFill("white")
              .drawRoundRect(0.5, 0.5, width - 1.0, height - 1.0, 4);
        button.addChild(bgUp);
        bgUp.visible = true; // 表示する

        // ロールオーバー時の座布団を作成
        var bgOver = new createjs.Shape();
        bgOver.graphics
              .beginFill(keyColor)
              .drawRoundRect(0, 0, width, height, 4);
        bgOver.visible = false; // 非表示にする
        button.addChild(bgOver);

        // ラベルを作成
        var label = new createjs.Text(text, "18px sans-serif", keyColor);
        label.x = width / 2;
        label.y = height / 2;
        label.textAlign = "center";
        label.textBaseline = "middle";
        button.addChild(label);

        // ロールオーバーイベントを登録
        button.addEventListener("mouseover", handleMouseOver);
        button.addEventListener("mouseout", handleMouseOut);

        // マウスオーバイベント
        function handleMouseOver(event) {
            bgUp.visble = false;
            bgOver.visible = true;
            label.color = "white";
        }

        // マウスアウトイベント
        function handleMouseOut(event) {
            bgUp.visble = true;
            bgOver.visible = false;
            label.color = keyColor;
        }

        return button;
    }
}
</script>

プログラム実行

「Tegaki_Interface.html」をローカルPCなどに保存して、実行(ブラウザで表示)してみてください。
手書き文字をデジタルデータ(PNG形式)に変換することができました??

参考

ics.mediaさんの「CreateJS でお絵描きツールを作ろう」記事を参考にさせて頂きました?

以上

お疲れ様でした?！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T16:01:50+09:00

Sass(CSS) 等間隔に配置したい

前提

SassのSCSS記法を用いる。
index.html
<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
style.scss
.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 30%;
  background: skyblue;

  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: blue;
  }
}
水色の範囲は画面幅に合わせて３０％としているので、可変である。
ここで実現したいことは、

青丸が等間隔に並ぶ

水色の四角の左右に青丸との間隔が無いようにする

下の段の青丸は上の段の間隔に合わせて左詰めにする

画面幅を変えても、上の条件を満たすようにする

試行錯誤① justify-contentでなんとかしたかった

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
style.scss
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 30%;
  background: skyblue;

  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: blue;
  }
}
justify-content: space-between; を追加。

◎条件を満たしている項目

青丸が等間隔に並ぶ

水色の四角の左右に青丸との間隔が無いようにする

×満たしていない項目

下の段の青丸は上の段の間隔に合わせて左詰めにする

↑を満たすには、justify-contentでは無理そう。

試行錯誤② メディアクエリで頑張る

メディアクエリで青丸の幅を画面サイズに合わせて変える。
style.scss
.wrap {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  width: 30%;
  background: skyblue;

  .circle {
    width: calc(100% / 3);
    height: 80px;
    border-radius: 50%;
    background: blue;

    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }
  }
}
画面幅を変更しても、条件を満たす配置になった！

画面幅1500pxまでしか書いていないので、もっと増やしたい...
でも、いちいち書くの面倒なので↓

Sassでfor文を書く
style.scss
    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }
上で地道に書いたこのコードをSassのfor文を使って書いてみる。

次回に続く。https://qiita.com/mei0210/items/ed468882579a6d3d902e

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T15:40:57+09:00

【CSS】Github風<input>

こんな感じの

inputの枠線（border+box-shadow）

ちなみに、こちらにもあります

CSS

input {
    border-radius: 4px;
    padding: 6px 10px;
    font-size: .875rem;
    border: 1px solid #dfdfdf;
    outline: 0;
    /* ついでにフワッとしたアニメーション */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input:focus {
    border: 1px solid #0d6efd;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}

結果

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T15:01:24+09:00

textareaにはvalue属性がない

input などとは違い textarea には value 属性が存在しません。
ですのでデフォルトで何か入力されている状態にしたい場合は、開始タグと閉じタグの間に入れなければいけません。

JavaScript などで値を取得したい場合はinputなどと同じようにvalueとして扱えば問題なく取得できます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T13:39:23+09:00

入力した値段を非同期的に表示したい

【概要】

1.結論

2.どのように記述するのか

3.ここから学んだこと

1.結論

javascript(jquery)で、inputイベントを使う！

2.どのように記述するのか
app/javascript/price.js
$(function(){
  $('#item-price').on('input', function(){
    let tax = $('#item-price').val();
    $('#tax-price').text(Math.ceil(tax * 0.1));
    $('#benefit').text(Math.ceil(tax - (tax * 0.1)));
  });
});
自分が書いたプログラムはこのようになります！

即時関数宣言をしています。
item-price/tax-price/benefit はHTMLの各表示部分の”id名”になります！価格が表示される部分と繋がっています。

inputイベントは値が変更された時に発火するもので、
item-priceに2000円と入力すればtax-price（200円)/benefit(1800円）と表示されるようになっています！

またtext(Math.ceil(tax * 0.1))の部分で、
textは'#tax-price'の中身を取得し、Math.ceilは小数点を切り上げています！

valも'#item-price'の中身を取得しています！

助けていただいたURL：
イベント: change, input, cut, copy, paste

.val()について

3.ここから学んだこと

最初はinputイベントの部分をchaengeイベントで使用していました。そうすると、changeイベントでは、入力したあとでページのどこかしらを一度クリックしないと金額変更が反映されないことに気づきました。なのでinputイベントに変更しました。ただ戻るボタンを押して以前入力した金額を残した状態で金額変更を反映させる部分についてはキャッシュも絡んでくるので、もっと勉強しておきます！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T10:24:24+09:00

【CSS】list-style: none; text-align: left; が効かない時の対処法

はじめに

久しぶりにCSSをやってクッソハマった。こんな簡単なことでハマる人は少ないかもしれませが一応共有しておきます。

問題

<li>要素の・を取り除いた後に左寄せができない。
<h3>プログラミング言語</h3>
<ul>
  <li>Ruby</li>
  <li>Golang</li>
  <li>Javascript</li>  
  <li>Python</li>
</ul>
ul {
  list-style: none;
  text-align: left;
}
デベロッパーツールで確認する

ulのpaddingが40になっている。これを0にすればいいだけじゃん・・・
ul {
  list-style: none;
  padding-left: 0;
}
できた。アツくなっていたからか、これに気がつかず2時間ぐらいハマってた。CSSは難しい?

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T06:02:52+09:00

初心者がGitHub Pagesを使って自作ページ（おふざけ）を公開しました！

前提

今年8月末にゼロからHTMLに取り組み始めた、正真正銘の初心者（！）です。
きっかけは、黒澤さん（@kurokurosawa）によるウェビナー「YoshiTech 会津わろ法則」。
黒澤さんの教えをもとに、学習を通して得たこと・学んだことをQiitaにアウトプットする取り組みを行っています。

今回のテーマ「自分でコードを書いたページを公開しました！」

というわけで今回なんですけども、さっそくこちらのページを見ていただけますか？

練習用に作ったおふざけページ

「最高齢ラッパー」として一部好事家から愛され続ける坂上弘（さかうえひろし）先生の「交通地獄」という名曲がありまして、その紹介ページを練習用に作ってみました。

坂上先生の超絶パフォーマンスについては、上記ページにもYouTubeへのリンクを張ってますので是非ご覧いただきたいのですが・・・

それはさておき（？）、初心者ながら思い切ってGitHubに登録し、なんとかGitHub Pagesへの公開までこぎつけることができました！

このページ自体は、Udemyの講座[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門のHTML/CSS編での課題をひな型として、自分なりのおふざけ（笑）も交えて作ってみたものです。

なお、ページ作成上の学習テーマとしては、フロート機能の習得を目指しました。また、2枚の画像をフェードイン・フェードアウトさせるアニメーションを、CSSを用いて作成するという冒険もしてみました。

（それにしても、公開したページを改めてスマホ経由で見てみると、レイアウトに改善の余地が大アリですね・・・新たな課題が出てきた！）

超絶初心者もできた！GitHub Pagesの利用

そもそも私は「GitHubのGの字も知らない」（ていうか読み方が「ジットハブ」か「ギットハブ」かいまだにピンときていない）レベルの初心者なんですが、それでも探り探りページの公開までたどり着けました。

そこで、自分用の振り返りも兼ねて、（初心者なりの）登録から公開までの手順をご紹介したいと思います。
（作業に当たっては「【初心者向け】GitHub Pagesを使ってHPを爆速で公開する」を参考にさせていただきました。ありがとうございます！）

1.アカウントを作る！

まずは公式サイトでアカウントを作ります！（あたりまえ体操！）

2.リポジトリを作る！

アカウントを作ったら、次はそのまま公式サイト上で「リポジトリ」を作ります！

（と言いながら、「リポジトリ」とはいったい何なのか、実はいまだによくわかってません。。。公式サイトの指示通りにやっていたら、なんとなく流れで作れちゃいました）

3.GitHub Desktopをインストールする！

さて、このあたりから初心者には難しくなってきます。

どうやら次は「リポジトリのクローン」という作業が必要らしいのですが、これがよくわからない・・・

GitBash？を使う方法も紹介されていたのですが、超絶初心者の私は「バッシュ？バスケットシューズ？あの娘ぼくがロングシュート決めたらどんな顔するだろう？」というような有様だったので、こちらは断念。

その代わり、今回私が利用したのは「GitHub Desktop」でした。

Windowsユーザーなので、こちらのページからWindows版をダウンロード＆インストール。

4.GitHub Desktopを使ってクローン・コミット・パブリッシュ！

クローン？コミット？パブリッシュ？
いやはや、自分で言っておきながらコトバの意味が分かっていません（汗）

にもかかわらず、偶然にも手順をわかりやすく説明したページが見つかったので、なんとかなりました！

そのページはこちらです。

英語のページですが、真ん中あたりにある「Using GitHub Desktop to PUSH to your local content to GitHub.」という項目に、画像付きの丁寧な説明があります。

英語が苦手でも、掲載されている画像を順番に見ていけば、作業の流れはなんとなく分かります。

公式サイトでレポジトリを作った後の画面に出てくる「Set up in Desktop」のボタンをクリックする

するとGitHub Desktopが開くので、そのまま「Clone」のボタンをクリックする

自動でPC上に（デフォルトではドキュメントフォルダ内）GitHubレポジトリのフォルダが作成される

いつもお世話になっているWindowsのエクスプローラを使って、GitHubレポジトリのフォルダの中に、公開したいページのファイル群（htmlファイル・CSSファイル・画像ファイルなど）をコピペする（※ページ公開後にリンク切れが起きないように、htmlファイル等のフォルダ構成はそのままにしておく）

GitHub Desktopに戻って、さきほどコピペしたファイルがちゃんと表示されているのを確認したら、添付メッセージ（入力必須となっています）を書いて、「Commit to master」のボタンをクリックする

最後に、GitHub Desktop上の「Publish branch」というボタンをクリックする

以上の手順をたどれば、作業はあらかた完了です！

5.実際にWeb上に反映されるまでは、少し時間がかかります

ここまできたら、あとは自作ページがWeb上に公開されているのを確認するのみです。

ブラウザで「https://（ユーザー名）.github.io/（htmlファイル名）.html」にアクセスすれば、見事自分のページが表示される段取りになっています。

ただ、ここで若干もどかしいのが、「実際にWeb上へ反映されるまでは少し時間がかかる」という点です。

なお、GitHub Pagesへのアップロードが上手くいっているかどうかは、公式サイト上で確認をすることができます。

この辺の事情については、「GitHub Pagesによる静的サイトの公開」というnoteの記事に詳しく書いてありました。
（記事の終盤で丁寧な解説を読むことができます）

なお私の場合は、アップロードしたデータ量が極小だったのか、わりとすぐに公開してもらえました！

おわりに

このように、GitHub自体はよくわからない私のような初心者でも、GitHub Pagesを用いた自作ページの公開は十分に可能です。

いや、むしろ初心者であればあるほど、自分で作ったページをWeb上で見ることの面白さは、他では代えがたいものがあるのではないでしょうか？

もしGitHub Pagesが気になっている初心者の方がいらっしゃったら、思い立ったが吉日と申します。エキサイティングな経験になること請け合いです！

最後まで読んでいただき、ありがとうございました！

追記

前回・前々回の記事を、なんと黒澤さん（@kurokurosawa）がほめてくださっていました！
（ツイッターではリアクションできず、申し訳ありません・・・）

とてもありがたいことです。
学習にいっそう身が入るというものです。

この勢いで、次回は「CSSのフロート機能を学習する際に考えたこと・気づいたこと」について、アウトプットしようと思います！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-06T00:51:51+09:00

Bootstrapを始めてみたい

Bootstrapのダウンロード

どうもはじめまして。Webの勉強をしたいですが、周りに教えてくれる人がいませんのでここにやってまいりました。よろしくお願いします。
Bootstrapが何かもよくわかっていませんが、とりあえず始めてみたいと思います。

Bootstrapの公式サイトにダウンロードのページがありますのでそこからダウンロードします。
https://getbootstrap.com/docs/4.1/getting-started/download/

このようなファイル構成になっていました。
bootstrap-4
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
BootstrapのJavaScriptにはjQueryが必要なのですが、スリム版でいいとのことなので、それを利用したいと思います。
jQueryの公式サイト( https://jquery.com/ )からjquery-3.5.1.slim.min.jsをダウンロードし、先ほどのツリーにあったフォルダjsに入れます。
bootstrap-4
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    ├── bootstrap.min.js.map
    └── jquery-3.5.1.slim.min.js <---追加
テスト用のindex.htmlを用意します。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Home</title>
  </head>
  <body>
    <h1 class="text-success">h1 class="text-success"</h1>
  </body>
</html>
フォルダ構成は最小にしました。
.
├── css
│   └── bootstrap.min.css
└── index.html
index.htmlをブラウザで表示します。

これからも頑張ります。

　 Tweet
Qiitaで続きを読む

20200906のHTMLに関する記事は11件です。

【初心者でもわかる】CSSだけで8角形を作る方法

どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで8角形の作り方について

cssだけで8角形を作る

まとめ

おそまつ！

Google Formで作成したフォームをアレンジする[submit後の表示ページ指定も]

はじめに

デモページ

Google Formでフォームを作る

作成したGoogle Formのソースコード確認する

ソースコードの中から必要な情報を拾う

① form actionを見つける

② 格要素のnameを見つける

実際のソースコード

submitした後の表示ページを指定する

1つ目[target="hidden_iframe" onsubmit="submitted=true;"]

2つ目[JavaScriptによる制御]

補足

おわりに

Sass for文で楽したい

前提

for文で書く

参考

【CreateJS】手書き入力インタフェース

はじめに

プログラム

プログラム実行

参考

以上

Sass(CSS) 等間隔に配置したい

前提

試行錯誤① justify-contentでなんとかしたかった

試行錯誤② メディアクエリで頑張る

Sassでfor文を書く

【CSS】Github風<input>

こんな感じの

CSS

結果

textareaにはvalue属性がない

入力した値段を非同期的に表示したい

【概要】

1.結論

2.どのように記述するのか

3.ここから学んだこと

【CSS】list-style: none; text-align: left; が効かない時の対処法

はじめに

問題

デベロッパーツールで確認する

初心者がGitHub Pagesを使って自作ページ（おふざけ）を公開しました！

前提

今回のテーマ「自分でコードを書いたページを公開しました！」

超絶初心者もできた！GitHub Pagesの利用

1.アカウントを作る！

2.リポジトリを作る！

3.GitHub Desktopをインストールする！

4.GitHub Desktopを使ってクローン・コミット・パブリッシュ！

5.実際にWeb上に反映されるまでは、少し時間がかかります

おわりに

追記

Bootstrapを始めてみたい

Bootstrapのダウンロード

日付別

タグ一覧

① `form action`を見つける

② 格要素の`name`を見つける

`submit`した後の表示ページを指定する

1つ目[`target="hidden_iframe" onsubmit="submitted=true;"`]