2023-06-20

【HTML/CSS講座】第6回実践、時計を作ろう

<!DOCTYPE html>
<html>
<head>
  <style>
    #clock {
      font-size: 48px;
      text-align: center;
      margin-top: 200px;
    }
  </style>
</head>
<body>
  <div id="clock"></div>

  <script>
    function updateTime() {
      var currentTime = new Date();
      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      var seconds = currentTime.getSeconds();

      hours = (hours < 10 ? "0" : "") + hours;
      minutes = (minutes < 10 ? "0" : "") + minutes;
      seconds = (seconds < 10 ? "0" : "") + seconds;

      var timeString = hours + ":" + minutes + ":" + seconds;

      document.getElementById("clock").innerText = timeString;
    }

    setInterval(updateTime, 1000); // 毎秒ごとに時刻を更新する

    // ページ読み込み時に初回の時刻表示を行う
    updateTime();
  </script>
</body>
</html>

本日は、第6回/ 実践、時計を作ろうです。

時計は、1ページで完成します。

CSSとHTMLのみではできません。

上記が時計の例です。

デザインは、CSSとjavascriptで弄るとして、このデジタル時計は精密です。

デザインを弄ると正常に機能しないかもしれません。そこは試していません。

1ページで、精密なデジタル時計ができるなんて驚異ですよね。

上記のコードは、MITライセンスで提供しています。お好きにサイトにお使いください。

もちろん、時、分、秒の表示をつけることもできますが、各々ご自身で修正してほしいです。

2023-06-18

【近況】体が痺れている話

CSS講座記事を書こうにも手足が痺れて痛い。

どうにも解せない。

がん、糖尿病、脳梗塞、腎臓病。

とてもじゃないが、そんな病気、耐えられる精神力ではない。

それどころか自分が認知症になるなんて考えたこともなかった。認知症ではないが、そうなる確率は誰にでもある。ことに筆者は医者から注意されているのだ。

脳梗塞、脳卒中、脳出血、こんな病気気づけるはずがなないので、ならないに越したことはない。

まさか、自分がなるとは的な病気はあってほしくないものだ。しかし、一族に糖尿病、脳梗塞の病気があるため、とにかくやばい。

既にヤバめの境地に来ている筆者は、CSSで時計を作って遊ぶ傍ら、脳梗塞にならないかと怯えている。

4年前までは、Twitter等で他人と議論することが多かったが、筆者は他人を【説得】するのを諦めた。

口論から撤退し、論争以外、こうしてHTMLに関する講座を開いている訳だ。

口論でも昂れば脳梗塞になるかもしれないし、他の病気を併発するかもしれない。

脳梗塞、脳出血、脳卒中、全然兆候がわからないが、今回の足の痺れは、それらと関係はない。

発生時間を増すこれらの手足の痺れに、筆者は怯えながら過ごしている。

2023-06-18

【HTML/CSS講座】休題回 LESS(LeanerCSS)は実践したくないです。

LESSをご存知ですか。LeanerCSSっていうんですが、動的スタイルシート言語となります。

最初聞いた時は、「はあ?」的な感覚になりましたが、かなり気になります。

いやね、HTMLはマークアップ言語、CSSはスタイルシート言語、javascriptはスクリプト言語です。そこに加えて動的スタイルシート言語ですね。

正直、面倒やねん。

いちいち環境用意しなきゃならないものを作るなという心境です。失礼。

もちろん、CMS等を運用する上ではLESSは要りません。

普通のCSSで結構です。LESSは自己満足に過ぎません。

まあ、自己満足以外にもメリットはあるんですが、

LESSはできるけど、CSSはできない派も増加中なんで、筆者は困り果てております。

LESS自体は知っているんですが、日頃のブログ運用では要らないです。

LESSをgithubで見つけると身構えてしまいます。

2023-06-18

【HTML/CSS講座】第5回 @charset "UTF-8";

【HTML /CSS講座】

普通にHTMLとCSSを順序よく講座しろよ、

という苦情が来てもおかしくないですが、

基本方針としては、

【HTMLとCSSがわからない人にとってどれから始めても大して問題じゃない】

という先入観からです。

筆者自身、グリッドシステムとかから始めたので

順序はそこまで問題ではありません。

ようは、わかりやすいね、

箇所から崩していきましょう。

が、基本方針です。

今回は、

@charset "UTF-8";

についてです。

これはCSSの先頭につけるもので、

一部識者からは【おまじない】と呼ばれています。

何が起こるかと言いますと、

たいしたことは起きません。

フォントファミリーと同じで文字化け回避

の【おまじない】です。

実際問題、これらをつけているからと

言って、保険みたいなものにはなり得ません。

おまじないは、あくまでもおまじないです。

@charset "UTF-8";

を1行目につけます。

必ず一行目につけてください。

むしろ、

一行目につけないと、

文字化けしてしまうかもしれません。

@charset "UTF-8";

をつけたのに、ファイルの保存は別の文字コードだったぜ

とならないようにしましょう。

ただし、気をつけてください。

@charset "UTF-8";

をつけるのは、【外部ファイルCSSだけ】です。

【内部CSSの先頭につけても大して意味はありません】。

外部CSSの先頭には

@charset "UTF-8";

を付けておきましょう。

もちろん、ついていないCSSもありますし、

オレは文字化け回避のプロだ

って方は、差し迫ってつける必要はありません。

そもそもUTF-8ではないサイトもあります。

基本的なのは、UTF-8です。

もう一度言います。

外部CSSファイルの先頭に @charset "UTF-8"; をつけてください。

放置したままCSSをすると、文字化けの原因になります。

HTMLとCSSは、文字化けの要素があります。

一つめは、

<meta charset="UTF-8">

二つ目は

@charset "UTF-8";

三つ目は

<html lang="ja">

四つ目は

ファイル形式を保存するとき

です。

これらを間違えなければ、

文字化けする可能性を極力回避できます。

文字化けに困っている人は、文字化けの回避方法があることを知ってください。

実際、日本語の文字コードは幾つかあります。

Shift-JIS、EUC-JP、JIS、UTF-8

です。

普通のプログラマーは、

Shift-JISかUTF-8かで迷います。

もちろん、EUC-JP、JISで、

個性派的な感じを出す

プログラマーもいるでしょう。

しかし、UTF-8が多いです。

UTF-8が基本的な文字化け回避の秘訣です。

基本的には、UTF-8に合わせるように

しておくことです。

今回の【HTML/CSS講座】は、

@charset "UTF-8";

についてでした。

2023-06-18

【HTML/CSS講座】第4回グリッドシステムの適用

【HTML /CSS講座】

/* グリッドシステム */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

グリッドシステムとは、予めCSSでカラムの幅を決めておくシステムです。

デザインレイアウトをする上でグリッドシステムは、素早くレイアウトを配置できるため、3column、2column、フッターだけ3分割等が簡単に可能です。

上記のCSSコードは、グリッドシステムを採用したCSSの例です。(ステータスは独自の数値)

col12以上の数値を入れることもできますが、グリッドシステムの配分は正確な横幅数値を基本軸とするので、慣れや感覚が大事になってきます。

CSSフレームワークの半分以上にグリッドシステムが付いています。

1から12までが良いでしょう。細かく細分化しすぎると、使用者が戸惑います。

グリッドシステムは、CSSの中でも大事なものになってきます。

従来の発想では、【3column】を表現するのに、３つのCSSクラスを並べる必要がありました。

【グリッドシステム】という概念の登場によって、

自サイトや社内の規則に沿ってデザインレイアウトをしましょう。

3columnにするには、３つグリッドシステムを並べればいいのです。

グリッドシステムの数値が登場するまでは、クラスやIDで3columnを表現する必要がありましたが、

グリッドシステムの登場は、サイトの量産化に貢献しているようです。

CSSフレームワークの肝であるグリッドシステム。

7500円もするグリッドシステム専用の本がある程です。

グリッドシステムは奥が深く、またグリッドシステムによるホームページは増幅する一方です。

グリッドシステムの幅には個性があります。

    <div class="container">
        <div class="row">
<div class="col-1">Col1</div> 
<div class="col-2">Col 2</div>
<div class="col-3">Col 3</div>
<div class="col-4">Col 4</div>
<div class="col-5">Col 5</div>
 <div class="col-6">Col 6</div>
 <div class="col-7">Col 7</div>
 <div class="col-8">Col 8</div>
 <div class="col-9">Col 9</div>
 <div class="col-10">Col 10</div>
 <div class="col-11">Col 11</div>
 <div class="col-12">Col 12</div>
        </div>
    </div>

2023-06-17

【HTML/CSS講座】第3回 CSSの適用方法

【HTML /CSS講座】

CSSの適用方法では、CSSの適用方法についてお伝えします

内部CSS

<head> 
<meta charset="UTF-8">  
 <title>サンプル</title> 
<style> 

 h1{
color:;
}
 </style>
 </head>

外部CSS

<link rel="stylesheet" href="style.css">

style.cssが一般ですが、

<link rel="stylesheet" href="home.css">

でも反応します。

WP等はstyle.cssと言うファイル名が標準なので気をつけてください。

<link rel="stylesheet" href="css/home.css">

でcssフォルダ内のcssが適用されます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" referrerpolicy="no-referrer" />

とすることで、CDNのCSSを読み込みます。

如何でしたか。第3回は外部CSSと内部CSSについて語ってみました。

2023-06-16

【HTML/CSS講座】第2回 MP3プレイヤーをサイトに導入する

【HTML /CSS講座】

  /* CSSファイル */
  /* 音楽再生プレイヤーコンテナのスタイル */

.audio-player {
  width: 300px;
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}

/* 曲名スタイル */
.audio-player .song-title {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 再生ボタンスタイル */
.audio-player .play-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

/* 停止ボタンスタイル */
.audio-player .stop-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin-left: 10px;
}

/* スライダーレールスタイル */
.audio-player .slider {
  width: 100%;
  height: 4px;
  background-color: #666;
  margin-top: 20px;
}

/* スライダーハンドルスタイル */
.audio-player .slider .handle {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  top: -3px;
  cursor: pointer;
}

第2回は、MP3プレイヤーをサイトに導入する

です。

音楽再生プレイヤーをサイトに導入します。

<div class="audio-player">
    <h2 class="song-title">Song Title</h2>
    <div class="controls">
      <div class="play-btn">&#9658;</div>
      <div class="stop-btn">&#9632;</div>
    </div>
    <div class="slider">
      <div class="handle"></div>
    </div>
    <audio src="audio.mp3" class="audio-element"></audio>
    <div class="time-info">
      <span class="current-time">00:00</span> / <span class="duration">00:00</span>
    </div>
  </div>

  <script>
    var audioElement = document.querySelector('.audio-element');
    var playBtn = document.querySelector('.play-btn');
    var stopBtn = document.querySelector('.stop-btn');
    var currentTimeSpan = document.querySelector('.current-time');
    var durationSpan = document.querySelector('.duration');

    playBtn.addEventListener('click', function() {
      audioElement.play();
    });

    stopBtn.addEventListener('click', function() {
      audioElement.pause();
      audioElement.currentTime = 0;
    });

    audioElement.addEventListener('timeupdate', function() {
      var currentTime = formatTime(audioElement.currentTime);
      var duration = formatTime(audioElement.duration);
      currentTimeSpan.textContent = currentTime;
      durationSpan.textContent = duration;
    });

    function formatTime(time) {
      var minutes = Math.floor(time / 60);
      var seconds = Math.floor(time % 60);
      return ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
    }
  </script>

このソースコードをコピペすることで、audio-playerができ上がります。

audio.mp3としていますが、各自のファイル名で調整してください。

再生時間は、ストップすると0に戻ります。途中で停止せずに0になるので気をつけてください。