まず、htmlの中にテキストとspan idでtextContentでJSで取得したデータを置き換える要素を作っておきます。

<p id="timer">知ってました？大阪万博まであと<span id="day"></span>日<span id="hour"></span>時間<span id="min"></span>分<span id="sec"></span>秒</p>

次に、関数countdownを作っていきます。引数はdue(意味：期限）です。

function countdown(due){
    const now=new Date();
    const rest =due.getTime()-now.getTime();
    const sec =Math.floor(rest/1000)%60;
    const min =Math.floor(rest/1000/60)%60;
    const hours=Math.floor(rest/1000/60/60)%24;
    const days=Math.floor(rest/1000/60/60/24);
    const count=[days,hours,min,sec];
    return count;

    }

まず、Dateオブジェクトのインスタンス化をする。
rest(意味：残り)にdue(つまり、期限）オブジェクトにgetTime()メソッドで1970年１月１日０：００からの時間をミリ秒で取得。
そこから、今の時間までのミリ秒を引いて代入する。
const count =[day,hours,min,sec];
は配列で、この後インデックス番号を使って呼び出すときに使う。
そして、return count;でcount配列を呼び出す。
次は、目標の時間を設定する。

    const goal =new Date(2025,4,3)

これは、定数goalにDateオブジェクトを使って日時を設定している。
＜日時を設定した状態でDateオブジェクトを初期化（つまりインスタンス化）する＞
new Date(年、月、日、時、分、秒、ミリ秒);
注意点：月は0が１月、1が２月、2が３月というふうにコンピュータとこちらが表示させたい月に１ヶ月のズレがある。
この場合、new Date(2025,4,3)となっているがこの場合コンピュータ側の4なので、こちら側の5月になる。

    function recalc(){
        const counter=countdown(goal);
        document.getElementById('day').textContent=counter[0];
        document.getElementById('hour').textContent=counter[1];
        document.getElementById('min').textContent=counter[2];
        document.getElementById('sec').textContent=counter[3];

        refresh();
    }

この関数内では、定数counterに上で定義したcountdown(due)関数の引数dueに一つ上で定義したgoal=new Date(2025,4,3)を代入して、関数recalc()関数　return count;でcount=[days,hours,min,sec]を返す。
そして、一番上で書いたコードにcounter配列をインデックス番号で指定して書き換える。
その後にrefresh()関数を呼び出す。しかし、refresh()関数はまだ作っていないのでこのあと説明する。
次はrefresh()関数を定義する。

    function refresh(){
        setTimeout(recalc,1000);

    }

setTimeout()メソッドは指定した関数名を()を付けずに指定して、カンマの後ろに指定した数値ミリ秒後にもう一度指定した関数を呼び出すというもの。
つまり
setTimeout(関数名,ミリ秒);
つまり、recalc()関数の最後でrefresh()関数を呼び出すということは、１秒毎にrefresh()関数からまたrecalc()関数を呼び出して、そのrecalc関数内でまたrefresh()関数を呼び出しているということ。

    recalc();

そして最後にrecalc()関数を呼び出している。
参考：JavaScript超入門書p１５４〜

概要

レスポンシブWebデザインについて説明します。様々なブラウザで表示する際に必要となります。

目次

• レスポンシブWebデザインとは
• viewportの設定
• メディアクエリーとは
• ブレークポイント

レスポンシブWebデザインとは

レスポンシブWebデザインとは、表示領域に合わせ見え方が変わるようにデザインされたWebサイトのこと。
例えば、パソコンとスマートフォンだとデバイスの表示領域が違い、パソコン用の表示領域のWebサイトをスマートフォンで見ると文字が小さく見にくかったりする。このような場合に、レスポンシブWebデザインを使うと、コンテンツは変更せずにWebの見え方を変えることが出来る。

viewportの設定(HTML)

レスポンシブWebデザインを適用するのに必要な手順①
viewportとは、様々なデバイスにおける表示領域のこと。これを設定しないと、上記に記載したようにスマートフォンで見た際に文字が小さくなったりする。
HTML内のhead内に< meta >タグを記述して表示領域の横幅を合わせる。

hello.html

<meta name="viewport" content="width=device-width,initial-scale=1">

この処理により、スマートフォンで見た時も文字が大きくなっており、見やすくなる。
ただし、この設定だけではレイアウトが崩れていたりするので、調整が必要。この調整で利用するのがメディアクエリー

メディアクエリーとは(css)

レスポンシブWebデザインを適用するのに必要な手順②
Webページが表示される画面の表示領域に合わせてCSSを切り替える機能。
メディアクエリーをCSSに記載することでレスポンシブWebデザインの細かい設定が可能となる。
書き方：@mediaとCSSに記述し、その後ろに画面の表示領域サイズを記述する

hello.css

/* レスポンシブWebデザイン(モバイル版)
-------------------------------------------------------------------*/

@media (max-width: 600px){
  .title{
    font-size: 3px;
  }

上記の場合、max-width: 600pxなので画面の表示領域幅が最大600pxの時、{}の中のスタイルが適用される。(今回の場合はフォントサイズを3pxにするという設定)
このmax-width: 600pxの画面サイズの切り替えポイントをブレークポイントという。

ブレークポイント

画面のサイズによってCSSを切り替える際の切り替えポイントをブレークポイントという。スマートフォンの画面幅の大きさも機種によって様々、また都度変わるために、このブレークポイント！という決まったサイズはない。大体のスマートフォンの画面幅をカバーしているのが600pxだと考えた。

以上です。様々なデバイスでの最適なサイズに調整出来ます。最後まで見てくださりありがとうございました。

プログラミング勉強日記

2020年10月12日
HTMLでコードを書くときにdivタグをよく使ってしまっていたがよくないと知ったのでその理由をまとめる。

そもそもdivタグとは

　divタグはdivisionの略語で、<div>で囲った部分をブロックレベル要素としてグループ化することができる。divタグを使うことでCSSでレイアウトをそろえることができる。

divタグを多用するのはよくない理由

• Webページの読み込み速度が低下
• CSSでスタイルを変えるのが大変になる
• JavaScriptで要素を参照するときの読み込み速度が低下

　divタグを多用されている場合は、ブラウザの技術が各要素を特定するのに時間がかかるので、Webページの読み込みの速度が遅くなる。
　また、idやclass属性を増えるのでCSSでスタイルを変えることも難しくなってしまう。また、JavaScriptで要素を参照する際にも処理能力が必要になるので、処理が遅れることがある。

正しいdivタグの使い方

• 分割の目的や要素を集合化したいときに使用する
• 複数の要素が並んでいる場合にまとめる
• 他のタグを使う

　divタグではなくulタグやliタグを使って表現することでも簡潔に表すことができる。そのため、用途にあったタグの使い方をすることが大切。

参考文献

divの解説
HTMLでdivが多いソースをおすすめしない理由を現役デザイナーが解説【初心者向け】

トップページなどに動画を挿入する方法

GIF

https://gyazo.com/3015a8b1f689153dcfe7fcb308d483bb

下記コード

index.html

<div class="bg-video-wrap">
  <p>Brilliant Blue</p>
  <video src="images/foreign.mp4" autoplay loop muted>
  </video>
</div>

css

.bg-video-wrap {
  position: relative;
}
p {
  font-family: serif;          
  color: #fff;
  font-size: 400%;
  position: absolute;
  left: 30%;
  top: 100px;
  z-index: 1;
}

以上です！

状況に応じてCSSは各自変更して使って下さい！

foreign.mp4の部分は各々、ダウンロードや作った動画の名前を決めると思うのでそれを当てはめて下さい！おそらく末尾はmp4でもmovでもどちらでも挿入できます！

現場からは以上です！

どうも7noteです。CSSだけでモンスターボール作ってみました。

HTML・CSSの基本だけで作ったわりにはそこそこできたが、もっとリアルなものは作れそう。うーん難しい。。。
無駄な行とかもあるかもですが堪忍ください。

index.html

<div class="ball">
  <div class="center"></div>
  <div class="line"></div>
  <div class="bottom"></div>
</div>

style.css

body {
  background: #31962d;
}

.ball {
  width: 200px;
  height: 200px;
  background: radial-gradient(8px 10px at 35% 35%, #FC6661 10px, #D42221 20px, #8E2726 120px);
  position: relative;
  border-radius: 100%;
  box-shadow: -10px 60px 60px -30px rgba(0,0,0,0.6);
}

.center {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}
.center::before {
  content: "";
  width: 50px;
  height: 50px;
  background: #fff;
  border: solid 8px #000;
  position: absolute;
  top: 48%;
  left: 25%;
  border-radius: 100%;
  z-index: 10;
  box-shadow: -1px 2px 2px rgba(0,0,0,0.4);
}
.center::after {
  content: "";
  width: 25px;
  height: 25px;
  background: #fff;
  border: solid 2px #aaa;
  position: absolute;
  top: 58%;
  left: 34%;
  border-radius: 100%;
  z-index: 10;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.line {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 200px;
  height: 130px;
  border-bottom: 68px solid #000;
  border-radius: 100%;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 130px;
  border-bottom: 68px solid #fff;
  border-radius: 100%;
}

感想

黒い線の左右にほんの少し赤が見えてしまっていて、作りが甘いなぁと思いながらも複雑にしすぎてもなんか嫌だったので今回は目を瞑ってしまいました。。。
またborderで半円を作ると、グラデーションがかからないのでそこも今後の課題ですね。
また気が向いた時にでもリベンジしようかな。

ポケモンGOのボールと比較するとまだまだ細かい部分ができていないなというのがよくわかりますね。

おそまつ！

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

Flexboxを使う時、要素の並び方を指定する「justify-content : space-between」をよく使う。
しかし最後の行のflexアイテム数によって並び方が異なるのでその辺の指定方法の覚え書き。
※各アイテムはレスポンシブで、ウィンドウ幅が縮んでもレイアウトはそのままとする

はじめに

justify-content : space-between を使うメリット（多分）

・flexアイテムにいちいちマージンを指定しなくても左右の隙間が空けられる。
flexアイテムの左右マージンを考えて配置するのが面倒だと思っている。左右マージンを指定する為、親コンテナのpaddingを調整しないといけなかったりする。またcalcを使ったりしてマージンを含めた幅を計算するのもしんどい。

なのであえて、flexアイテムの左右マージンを気にしない「justify-content : space-between」での並べ方を考えてみる。

最後の行の要素数が1つで、左寄せにしたい（デフォルト）

普通にCSSを指定する。

See the Pen VwjLGwr by yoshida (@yoshi090) on CodePen.

最後の行の要素数が1つで、中央寄せにしたい

最後の要素に「margin: 0 auto;」を指定する。

See the Pen yoshi_201012_2 by yoshida (@yoshi090) on CodePen.

最後の行の要素数が2つで、左寄せにしたい

デフォルの指定だと以下のような見た目

・こういうレイアウトはほぼ使わない。

See the Pen
yoshi_201012_3 by yoshida (@yoshi090)
on CodePen.

「justify-content:flex-start」か空要素を作る

・以下は空要素を作成する方法。

See the Pen
dyXoqvd by yoshida (@yoshi090)
on CodePen.

最後の行の要素数が2つで、中央寄せにしたい

あえて「justify-content:space-between」を指定するやり方

親コンテナ等に均等に配置したい場合など使えるかも。
普通は「justify-content:center」でflexアイテムにマージンを指定し、左右空けると思う。

See the Pen
yoshi_201012_5 by yoshida (@yoshi090)
on CodePen.

まとめ

今回のやり方は無理やりであり、一応こうやればflexアイテムの左右マージンになるべく囚われることなく配置できますよというものです。
みんなどうやってんだろ…

初めてJSPとサーブレットクラスの連結がうまくいったので記録。

【参考リンク】
・Html プルダウンメニューの表示について
(https://murashun.jp/blog/20200128-66.html)
・Html 複数行のテキスト入力フォーム作成
(http://www.htmq.com/html/textarea.shtml)

【JSPファイル】

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>


<%--formを挿入する準備 --%>
<form action="/example/P157_s" method="post">

<%--お名前入力タブ --%>
    名前<input type="text" name="name"><br>

<%--お問合せの種類選択タブ --%>
    <select name="qtype">
      <option value="company">会社について</option>
      <option value="product">製品について</option>
      <option value="support">アフターサポートについて</option>
      </select>

<%--お問い合わせ内容入力タブ --%>
      <p>お問い合わせ内容を入力してください</p>
      <textarea name="body" rows="4" cols="40">
      </textarea><br>

      <%--送信ボタン --%>
    <input type="submit" value="送信">

</form>
</body>
</html>

【サーブレットクラス】

package p157_s;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/P157_s")
public class P157_s extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");

        String name=request.getParameter("name");
        String slags=request.getParameter("qtype");
        String comment=request.getParameter("body");

        //javaコード
        String errorM="";
        if(name==null||name.length()==0) {errorM+="氏名が入力されていません";}
        if(slags==null||slags.length()==0) {errorM+="お問合せの種類が選択されていません";}
        else if(slags.equals("company")){slags="会社について";}
        else if(slags.equals("product")){slags="商品について";}
        else if(slags.equals("support")){slags="アフターサポートについて";}
        if(comment==null||comment.length()==0) {errorM+="お問い合わせ内容が入力されていません";}

        String msg=("氏名["+name+"]様 お問合せの種類["+slags+"] お問合せ内容["+comment+"]");
        if(errorM.length()!=0) {msg=errorM;}

    response.setContentType("text/html; charset=UTF-8");
        PrintWriter out=response.getWriter();

        out.println("<html>");
        out.println("<head>");
        out.println("<title>お問い合わせフォーム</title>");
        out.println("</head>");

        out.println("<meta.charSet=\"UTF-8\">");
        out.println("<body>");
        out.println("<p>"+msg+"</p>");
        out.println("</body>");
        out.println("</html>");
    }
}

この記事を書いた背景

JavaScriptの『querySelector()メソッド』を使って、任意のHTMLを取得する処理を記述していたのですが、最初、うまく取得することができませんでした。
うまく取得できなかった理由は、取得するHTMLを指定する際に記述したname属性の指定コードがうまく書けていなかったためです。
今回はname属性を指定するひと工夫も含め、querySelector()使用時の注意点を書いていきたいと思います。

そもそもquerySelector()メソッドとは

JavaScriptのメソッドで、任意のHTMLを取得するメソッドです。
指定したセレクタに一致する最初のHTML要素(Element)を取得するメソッドです。
『document.querySelector( CSSセレクタ )』のように使います。
実際の使い方は下記の例をご覧ください。

自分がどのようにつまづいたか

オリジナルアプリを作成中、ラジオボタンの実装を行ってましたが、
選択したボタンの値を取得する処理がうまく機能しない場合がありました。

下記の例で見ていきたいと思います。

index.html

<!--ラジオボタンの記述。iPhoneかAndroidかを選ぶラジオボタン-->
<group class="inline-radio">
  <div>
    <input type="radio" value="1" name="simulation[phone]" id="simulation_phone_1">
    <label for="simulation_phone">iPhone</label>
  </div>
  <div>
    <input type="radio" value="2" name="simulation[phone]" id="simulation_phone_2">
    <label for="simulation_phone">Android</label>
  </div>
</group>

index.js

//ラジオボタンの要素（NodeList）を取得する
const phone_list = document.getElementsByName('simulation[phone]');
//取得したラジオボタンの要素（NodeList）をラジオボタン１つずつ取り出し、変数eに格納する。
phone_list.forEach(function(e) {
  //クリック（ボタン押下）された要素eの場合イベント発火
  e.addEventListener("click", function() {
    //クリックされたinputタグの値（value値）を取り出し、変数phone_planに格納する
    const phone_plan = document.querySelector("input:checked").value;
    //変数phone_planの出力
    console.log(phone_plan);
  });
});

※NodeListは、ざっくり言えばHTMLの情報全てが詰まったオブジェクトです。

簡単なHTMLとJSがあります。色々端折ってますがご了承ください。
見た目的には簡単なラジオボタン（●iPhone ●Android）があるだけです。
ラジオボタンでiphoneを選択すると、検証ツールのconsoleにて 1 が出力されます。

console

1

普通に値は取得できました。
しかし、HTMLにラジオボタンで実装された質問等がいくつも有り（スマホを選ぶラジオボタン・PCを選ぶラジオボタン...など）、それぞれのラジオボタンの押下された値を取得する処理を書くときに問題が起きます。
記述を見直さないといけないのは、JSの『querySelector()メソッド』です。

querySelector()メソッドが取得する要素の位置は...

先程も書きましたが、『querySelector()メソッド』で取得するのは、指定したセレクタに一致する最初のHTML要素(Element)です。
そのため、現状の『querySelector("input:checked")』のような形でクリックされた要素を取得しようとすると、複数種類のラジオボタンがあるなかで、HTMLの一番上にあるラジオボタンの選択された値が取得されてしまい、HTMLの一番上にあるラジオボタン以外うまく値が取得できません。

querySelector()メソッドにおけるname属性の指定

そこで色々調べたところ、name属性を指定すれば良さそうです。
下記のように修正してみました。

javascript

//修正前
const phone_plan = document.querySelector("input:checked").value;
//修正後
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;

このように修正すれば、『name属性がsimulation[phone]のラジオボタンでクリックされた要素』のように指定できるはず。

しかし、結果は、、

不正なセレクタということで、値が取得できないようです。（例とname属性違いますがご容赦ください。。。）

javascript

//この書き方は正しい
querySelector("input:checked[name=name属性名]]")

という書き方は正しいのですが、クラスが指定されたname属性（今回で言ったら、simulationクラスのname属性「phone」）の場合は、上記の書き方では通用しないようです。（角括弧まみれになるからかな？？）

ということで、今度はクラス名外してみました。

javascript

//修正前
const phone_plan = document.querySelector("input:checked").value;
//1回目修正後
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//2回目修正後
const phone_plan = document.querySelector("input:checked[name=phone]").value;

結果は、、

name属性がphoneのvalue値はなんにもないよ〜というエラーです。
正しいname属性は『simulation[phone]』ですからね。
やはり、クラス名を取るだけほど甘くない世界だ。

そして、ついにLGTMな書き方発見。
ということで、このようにname属性を指定すればいいというのを見つけました。

javascript

//修正前
const phone_plan = document.querySelector("input:checked").value;
//1回目修正後
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//2回目修正後
const phone_plan = document.querySelector("input:checked[name=phone]").value;
//3回目修正後（LGTM）
const phone_plan = document.querySelector("input:checked[name*=phone]").value;

name属性の指定のところで『*』を入れました。これは『部分一致検索』を意味します。
今回で言ったら、name属性に『phone』が含まれてるname属性という指定方法です。
ということで、無事、値が取得できました。

console

1

あとは、name属性の命名に気をつけながらname=*を使いこなしていけば、自分の思い通りのアプリが実装できると思います！

セレクタの様々な指定方法

ちなみにセレクタの指定方法は、name*=以外にもたくさん種類があります。
https://hakuhin.jp/js/selector.html

こちらのサイトにセレクタの書き方が詳しく載っているので、ぜひ見てみてください。
色んな属性の指定方法があって、実装の幅が広がりますね。大変参考になりました。

はじめに

たとえばエラーメッセージの表示だったり、何か値を渡されたときには表示して、それ以外のときには非表示にしたい、という場合にpaddingつけようとして困ったよという話。

中身が空のdivにpaddingをつけると

中身があるときは下のように表示してほしいとします。

See the Pen
qBNdVem by taka1473 (@taka1473)
on CodePen.

このとき、p要素の中身がないとどうなるか。

See the Pen
ExyjoXX by taka1473 (@taka1473)
on CodePen.

こうなります。
要素の正味の部分（文字とかが表示される部分）というのはheightからpaddingの高さを引いた数字になるが、heightは負の値を取れないのでpaddingのぶん正味の部分が高くなる（？）、ということらしいです。

回避方法

1.div要素を親要素に追加して、そちらにpaddingをつける。

See the Pen ZEOGvvB by taka1473 (@taka1473) on CodePen.

これで要素がない時には非表示にできます。でもこれだとpaddingのところはpinkになりませんね。

2.子要素で無理やり

See the Pen GRqJyQz by taka1473 (@taka1473) on CodePen.

そもそも要素がないのでそこにpadding入れても効かないから大丈夫っていう考え方。

See the Pen
vYKOpzv by taka1473 (@taka1473)
on CodePen.

こちらは意図した動きになってくれます。

あとがき

もっといい方法がある気がする…。
あったら教えて下さい。（むしろ誰かに教えてほしくて記事書いたところある）