プログレスバーを実装する
この記事では２種類のプログレスバーを実装する方法について紹介します。
とりあえず下記のデモで動きを確認してください。
now loading...①
now loading...②
CSSアニメーション@keyframesを使う
まず、CSSアニメーションを使って実現する方法を説明します。
HTML部分では、プログレスバーを表す要素として<div>要素が配置されています。
<div class="progBar">
<div class="bar" id="progressBar"></div>
</div>
<button onclick="startProgress()">スタート</button>.progBarクラスは、プログレスバーのコンテナ要素に適用されます。幅は親要素（通常は画面全体）の100%を占め、高さは50ピクセルです。背景色は#ddd（淡い灰色）に指定され、position: relative;により相対的な位置づけが行われます。また、overflow: hidden;により要素の内容がはみ出した場合には切り捨てられるように設定されます。
.progBar .barセレクタは、プログレスバーの表示部分に適用されます。この部分は.progBarの内部で絶対的な位置に配置され、高さは100%で親要素（ローディングバーのコンテナ）に対して伸縮します。背景色は#4CAF50（緑色）に指定されます。
@keyframes progressルールは、プログレスバーのアニメーションを定義します。0%の時点では幅が0%（非表示）であり、100%の時点では幅が100%（完全に表示）になります。アニメーションの進行に従って幅が徐々に変化します。
これらのスタイルによって、プログレスバーが表示され、アニメーションによって幅が徐々に伸びていく効果が実現されます。
.progBar{
width:100%;
height:50px;
background-color:#ddd;
position:relative;
overflow: hidden;
}
.progBar .bar{
position:absolute;
height:100%;
background-color: #4CAF50;
}
@keyframes progress {
0% {width: 0}
100% {width: 100%}
}
このJavaScriptの関数 startProgress() は、プログレスバーのアニメーションを開始するための処理を行います。
function startProgress() {
var progressBar = document.getElementById('progressBar');
progressBar.style.animation = '';
setTimeout(function() {
progressBar.style.animation = 'progress 4s normal';
progressBar.style.animationFillMode = 'forwards';
}, 0);
}この関数では、progressBar というIDを持つ要素を取得し、その要素のスタイルを変更してアニメーションを開始します。
以下の手順で処理が行われます。
progressBarを取得します。progressBar.style.animationの値を空文字列に設定します。これにより、アニメーションを一時停止またはリセットします。setTimeout()関数を使用して、0ミリ秒後に関数を実行します。この遅延処理を使用することで、アニメーションの開始が次のレンダリングサイクルで行われるようになります。- 遅延処理内の関数では、
progressBar.style.animationの値に'progress 4s normal'を設定します。これにより、4秒間のアニメーションが実行されます。また、progressBar.style.animationFillModeを'forwards'に設定することで、アニメーションの最終状態を保持します。
以上の処理により、startProgress() 関数が呼び出されると、プログレスバーのアニメーションが開始されます。アニメーションの効果や詳細は、CSSのスタイルとして指定された @keyframes progress の内容に依存します。
JavaScriptのsetIntervalメソッドを使う
もう一つはJavaScriptのsetIntervalメソッドを使って、プログレスバーの幅を徐々に増やしていく方法です。
この方法では、一定の時間間隔で関数を繰り返し呼び出す（このケースではframe関数）ことで、呼び出しごとにプログレスバーの幅を増やします。プログレスバーの幅を手動で計算し、設定する必要があり、clearIntervalを使ってタイマーを停止させる必要があります。
<div id="progBar">
<div id="bar"></div>
</div>
<button onclick="move()">スタート</button>#progBar セレクタは、プログレスバーのコンテナ要素に適用されます。幅は親要素（通常は画面全体）の100%を占め、背景色は #ddd（淡い灰色）に指定されます。
#bar セレクタは、プログレスバーの表示部分に適用されます。この部分の幅は初期値として0%となっており、幅はアニメーションやプログラムによって変化します。高さは50ピクセル、背景色は #4CAF50（緑色）に指定されます。
#progBar {
width: 100%;
background-color: #ddd;
}
#bar {
width: 0%;
height: 50px;
background-color: #4CAF50;
}このJavaScriptの関数 move() は、プログレスバーのアニメーションを開始するための処理を行います。
function move() {
var elem = document.getElementById("bar");
var width = 0;
var increment = 100 / (4000 / 30);
var interval = setInterval(frame, 30);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}この関数では、bar というIDを持つ要素を取得し、その要素のスタイルを変更してアニメーションを開始します。
以下の手順で処理が行われます:
elemを取得します。widthを 0 と初期化します。この変数はバーの幅の現在値を保持します。incrementを計算します。4000 ミリ秒（4秒）の間に幅を 100% まで変化させるために必要な増分を計算します。ここでは、1 ミリ秒ごとに幅を増やすための増分を求めています。setInterval()関数を使用して、30 ミリ秒ごとにframe()関数が実行されるように設定します。この関数はアニメーションのフレームごとに実行されます。frame()関数では、widthが 100 以上になった場合にsetInterval()をクリアしてアニメーションを停止します。それ以外の場合は、widthにincrementを加算し、elem.style.widthに変更した幅の値をパーセンテージ形式で設定します。
以上の処理により、move() 関数が呼び出されると、プログレスバーのアニメーションが開始されます。アニメーションは幅が徐々に増えていき、4000 ミリ秒（4秒）後に 100% の幅になります。アニメーションの速度や詳細は、increment の値や setInterval() の間隔に依存します。
最小限のコードでJavaScriptのカルーセルを作成する
最小限のコードでカルーセルを作成する方法を解説します。
非常にシンプルなので、必要に応じてカスタマイズすることができます。
サンプルコード
<div id="carousel">
<img src="image1.jpg" alt="画像1" class="slide" style="opacity: 1;">
<img src="image2.jpg" alt="画像2" class="slide" style="opacity: 0;">
<img src="image3.jpg" alt="画像3" class="slide" style="opacity: 0;">
</div>#carousel {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.slide {
position: absolute;
width: 300px;
height: 200px;
transition: opacity 1s;
}let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
setInterval(() => {
slides[currentIndex].style.opacity = 0;
currentIndex = (currentIndex + 1) % slides.length;
slides[currentIndex].style.opacity = 1;
}, 2000);- 画像は
#carouselというdiv要素の中に配置されており、JavaScriptは2秒ごとに次の画像に切り替えます。 - 画像はフェードイン/フェードアウトするための簡単なオパシティトランジションを使用しています。
- 画像ファイル（
image1.jpg、image2.jpg、image3.jpg）は、適切なパスに置かれている必要があります。
解説
以下、コードの各部分について具体的に説明します。
HTML部分
<div id="carousel">: カルーセルを含むコンテナdiv要素です。このdivの中に、画像が配置されます。<img src="image1.jpg" alt="画像1" class="slide" style="opacity: 1;">: 表示する画像要素です。最初の画像は表示され（opacity: 1）、他の画像は非表示になっています（opacity: 0）。
CSS部分
#carousel: カルーセルのコンテナに適用されるスタイルです。positionはrelativeに設定され、overflowはhiddenに設定されています。これにより、画像がコンテナの外にはみ出ないようになります。.slide: すべての画像要素に適用されるスタイルです。positionはabsoluteに設定されており、これにより画像が互いに重なり、同じ場所に表示されます。transitionプロパティで、opacityの変化が1秒かけて滑らかに行われます。
JavaScript部分
let currentIndex = 0;: 現在表示されている画像のインデックスを追跡する変数です。const slides = document.querySelectorAll('.slide');: すべての画像要素を取得して、slides変数に格納します。setInterval(): この関数は、指定された間隔（この場合は2000ミリ秒、つまり2秒）ごとにコードを実行します。slides[currentIndex].style.opacity = 0;: 現在の画像を非表示にします。currentIndex = (currentIndex + 1) % slides.length;: 現在のインデックスを更新し、最後の画像の後は最初の画像に戻ります。slides[currentIndex].style.opacity = 1;: 次の画像を表示します。
これらのコードの組み合わせにより、シンプルな画像カルーセルが作成されます。画像は2秒ごとにフェードインとフェードアウトで切り替わります。
CSSで操作可能な各種マウスカーソルスタイルの完全ガイド
CSSを使って、ウェブページ上のマウスカーソルのスタイルを自由にカスタマイズすることが可能です。
以下は、各種のマウスカーソルスタイルを一覧にしたものです。
マウスを各項目の上に置くと、そのマウスカーソルのスタイルが反映されるのを確認できます。スタイルの名称は、各カーソルの下に記載してあります。
auto
text
default
none
help
pointer
progress
wait
cell
crosshair
vertical-text
alias
copy
no-drop
not-allowed
grab
grabbing
all-scroll
move
col-resize
row-resize
n-resize
se-resize
s-resize
ns-resize
e-resize
w-resize
ne-resize
nw-resize
sw-resize
ew-resize
nesw-resize
nwse-resize
zoom-in
zoom-out
以上が、主なマウスカーソルスタイルの一覧となります。
CSSはユーザ体験を豊かにするための重要なツールであり、その中でもマウスカーソルのスタイルはユーザのアクションに直結した重要な要素と言えます。適切なカーソルスタイルを使用することで、ユーザの操作を助け、ウェブサイトの使いやすさを向上させることができます。
CSSだけで円を描く方法とborder-radiusの理解
円はサイトのUIやグラフィックに多く使われる基本的な形状です。
今回は、CSSだけで円を描く方法と、その中でも重要な役割を果たすborder-radiusプロパティの解説をします。
CSSで円を描く方法
まず、円を描くためには、HTMLを用意します。
<div class="circle"></div>背景色を指定する円
.circle {
width: 100px;
height: 100px;
background-color: #333;
border-radius: 50%;
}背景色を指定しないと、円が見えません。
ボーダーで描いた円
.circle{
width: 100px;
height: 100px;
border : 1px solid;
border-radius: 50%;
}border-radiusとは？
どちらでもborder-radiusが必要です。
CSSプロパティの border-radius は、要素の角を丸くするために使用されます。これにより、要素は角が丸くなった長方形または円に見えます。
CSSプロパティの border-radius は、要素の角を丸くするために使用されます。これにより、要素は角が丸くなった長方形または円に見えます。
border-radiusプロパティには、最大4つの値を指定できます。
これらの値はそれぞれ要素の角を制御し、値の数によって解釈が異なります。
- 一つの値：この値はすべての角に適用されます。例：
border-radius: 10pxは、すべての角を10ピクセルの半径で丸くします。 - 二つの値：最初の値は左上角と右下角に適用され、二つ目の値は右上角と左下角に適用されます。例：
border-radius: 10px 20px。 - 三つの値：最初の値は左上角、二つ目の値は右上角と左下角、三つ目の値は右下角に適用されます。例：
border-radius: 10px 20px 30px。 - 四つの値：それぞれの値は左上角、右上角、右下角、左下角の順に適用されます。例：
border-radius: 10px 20px 30px 40px。
また、border-radius には %/px 両方の単位が使え、% を用いることで親要素に対する相対的な大きさで角を丸くすることができます。
border-radius: 50% は、要素の角を完全に丸くして、円形または楕円形にします。
50%
30%
10%
よく使われるタグ
HTMLタグにはそれぞれ異なるデフォルトのスタイルや動作があります。基本的に、どの要素でもborder-radiusプロパティを使って円形にすることが可能です。
実際の開発において、border-radiusプロパティは様々な要素に適用され、その見た目を丸みを帯びたものにするために使用されます。
以下に、最も一般的に使用される要素をいくつか挙げます。
divタグとspanタグ
divタグはウェブサイトの構造を構築するための主要な要素です。ブロックレベル要素で、デフォルトで全幅を取り、新しい行から始まります。レイアウトとコンテナを作成するために頻繁に使用されます。
他の要素に影響を与えずにテキストをグループ化するため、インライン要素であるspanタグが使われています。
buttonタグ
ボタンのスタイルをカスタマイズするために、よくborder-radiusプロパティを使って丸みを持たせます。
角が丸くなったボタンの一例です。
<button style="padding: 10px 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px;">ボタン</button>imgタグ
border-radiusプロパティを使って、画像を円形に表示することができます。
<img src="画像.jpg" style="width: 200px; height: 200px; border-radius: 50%;">以上がCSSで円を描く方法とborder-radiusの使い方についての解説です。これらの基本をマスターすることで、より豊かな表現が可能となります。
左側の境界線は、何種類の実装方法があるのでしょうか
タイトル通りです。
<div></div>まず、共通のスタイルを定義します。
div {
position: relative;
width: 150px;
height: 60px;
background: #ddd;
}方法1（Border使用）
おそらくこれが一番考えやすいと思います。
div {
border-left: 5px solid green;
}div要素に対して左側に5ピクセル幅の境界線（ボーダー）を指定しています。
方法2（疑似要素）
div::after {
content: "";
width: 5px;
height: 60px;
position: absolute;
top: 0;
left: 0;
background: green;
}div要素の後ろに疑似要素（::after）を作成し、そのスタイルを指定しています。
方法3（外側box-shadow）
div {
box-shadow: -5px 0px 0 0 green;
}div要素に対してボックスシャドウのスタイルを指定しています。
-5pxは、ボックスシャドウの左側のオフセットを指定しています。つまり、要素の左側から5ピクセル左に影を配置します。
垂直方向とぼかし半径、拡張半径は0でいいです。
方法4（内側box-shadow）
内側だったら、insetを使います。つまり、要素の境界内に影を作成します。
div {
box-shadow: inset 5px 0px 0 0 green;
}div要素に対してインセットボックスシャドウのスタイルを指定しています。
方法5（drop-shadow）
drop-shadow()はCSSフィルターとしてCSS3で導入されました。
div {
filter: drop-shadow(-5px 0 0 green);
}div要素に対してドロップシャドウのフィルターを指定しています。
方法6（線形グラデーション）
div {
background-image: linear-gradient(90deg, green 0px, green 5px, transparent 5px);
}div要素の背景に線形グラデーションを作成するためのスタイルを指定しています。
linear-gradient()は、線形グラデーションを作成する関数です。90degは、グラデーションの方向を指定しています。この場合は縦方向（上から下）にグラデーションが適用されます。green 0pxは、グラデーションの開始点での色と位置を指定しています。この場合は緑色の色を位置0ピクセルで指定しています。green 5pxは、グラデーションの中間点での色と位置を指定しています。この場合は緑色の色を位置5ピクセルで指定しています。transparent 5pxは、グラデーションの中間点からの終了点での色と位置を指定しています。この場合は透明な色（背景の透明）を位置5ピクセルで指定しています。
方法7（list-style）
これはあまりにも型破りです。読む必要はありません。
リストの先頭記号はlist-styleで設定できて、list-styleのサイズと色はfont-sizeとcolorで制御できることがわかっていますよね。
次に、list-style-typeを無限に拡大し、コンテナーのpadding-leftを設定すればいいです。
実際にやってみます。
div {
display: list-item;
list-style-type: square;
list-style-position: inside;
background: green;
color: #ddd;
}そして、リストアイテムを拡大して、padding-left: 5px;を入れます。
div {
display: list-item;
list-style: square inside;
padding-left: 5px;
font-size: 700px;
line-height: 0;
background: green;
color: #ddd;
}
最後にoverflow: hidden;を入れて完成です。
CSSで六角形を作る方法
方法①三角形を入れる
<div class="hexagon"></div>.hexagon {
position: relative;
width: 100px;
height: 57.74px;
background-color: #333;
margin: 28.87px 0;
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon::before {
bottom: 100%;
border-bottom: 28.87px solid #333;
}
.hexagon::after {
top: 100%;
width: 0;
border-top: 28.87px solid #333;
}beforeとafterの疑似要素を使って上部と下部に三角形を作り、それらと中央の長方形が合わさって六角形が完成します。
ここで、高さ、幅、ボーダーの大きさ、そしてマージンは、六角形の各辺が同じ長さになるように計算されています。それぞれの値を変えることで、自由に六角形の大きさを調整することができます。
わかりやすいですが、計算が必要なので、めんどくさいです。
方法②回転変形
通常バージョン
<div class="hexagon"></div>.hexagon {
position: relative;
width: 75px; /* 変更可能 */
height: 130px; /* 変更可能 */
background: #333;
transform: rotate(30deg); /* 回転可能 */
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
inset: 0;
background: inherit;
}
.hexagon::before {
transform: rotate(60deg);
}
.hexagon::after {
transform: rotate(-60deg);
}
まず、".hexagon"の部分で、対象要素のスタイルを定義しています。
position: relative;: この要素は相対位置に配置されます。これは、後の::beforeと::afterパートで絶対位置が使用されるため重要です。width: 75px;とheight: 130px;: これらは六角形のサイズを指定します。コメントにあるように、これらの値は変更可能です。background: #333;: 六角形の背景色を設定します。
次に、".hexagon::before"と".hexagon::after"部分では、対象要素に2つの疑似要素を追加します。これらの疑似要素は、元の要素と同じ背景色を持ち、同じ大きさに設定されます（inset: 0;とbackground: inherit;により）。
そして、それぞれ60度と-60度に回転させることで、六角形の形状を作り出します。
このように、このCSSコードは主に疑似要素と回転変形を利用して、通常の四角形の要素を六角形に見せるためのものです。
枠線、ラインのみバージョン
背景色を白に指定して、drop-shadow()を使って六角形に周囲に微妙な影を追加します。
それ以外は同じです。
.hexagon {
position: relative;
width: 150px;
height: 260px;
background: #fff;
transform: rotate(30deg);
filter: drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333);
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
inset: 0;
background: inherit;
}
.hexagon::before {
transform: rotate(60deg);
}
.hexagon::after {
transform: rotate(-60deg);
}
jQuery on()によるイベント処理の使い方まとめ
今回は、jQueryでよく使われるon()メソッドについて解説します。
jQueryのon()メソッドとは？
jQueryのon()メソッドは、選択されたHTML要素に一つまたは複数のイベントハンドラーを添付するための強力なメソッドです。
基本的な構文は次の通りです。
$(selector).on(イベント名, セレクタ, データ, 関数);- イベント名：必須項目。一つ以上のイベントを指定します。複数のイベントを指定する場合は空白で区切ります。
- セレクタ：オプション。特定の子要素にイベントを絞り込むために使用します。
- データ：オプション。イベントハンドラーに渡されるデータを指定します。
- 関数：必須項目。イベントが発生したときに実行される関数を指定します。
主なイベント
主なイベントは次の通りです。
| イベント名 | 内容 |
|---|---|
| change | フォーム部品の状態に何らかの変化があった時に発動 |
| click | 要素がクリックされた時に発動 |
| blur / focus | 要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動 |
| load | ドキュメントが読み込まれたあとに発動 |
| resize | ウィンドウサイズが変化した時に発動 |
| scroll | 画面がスクロールした時に発動 |
| keyup / keypress | キーボードのキーが押された時(keypress)、離された時(keyup)に発動 |
| mouseup / mousedown | マウスのボタンが押された時(mousedown)、離された時(mouseup)に発動 |
| mousemove | 指定の要素内でマウスが動いている時に発動 |
| submit | フォームが送信された時に発動 |
| error | 何らかのJavaScriptエラーが発生した時に発動 |
この表にある「イベント名」の部分をon()の引数に指定することで、それぞれのイベント処理を実装することができます。
使用例
簡単な例
以下に、on()メソッドの簡単な使用例を示します。
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
<p>クリックすると私は消えます</p>
<p>私もクリックすると消えます</p>この例では、どちらの<p>要素をクリックしても、クリックした<p>要素が非表示になります。thisキーワードを使って、イベントが発生した特定の要素を参照しています。
複数のイベント
複数のイベントを同時に指定することも可能です。以下に示すように、イベント名を空白区切りで指定します。
$("p").on("mouseenter mouseleave", function(){
$(this).toggleClass("highlight");
});このコードは、マウスカーソルが<p>要素に入るか出るときに、その要素のクラスを"highlight"に切り替えます。
同時にに扱う例
以下は、クリックイベントとダブルクリックイベントを同時に扱う例です。
$("button").on("click dblclick", function(event){
if(event.type === "click"){
$("#output").text("You have clicked the button");
} else if(event.type === "dblclick"){
$("#output").text("You have double clicked the button");
}
});このコードは、ボタンがクリックされたときとダブルクリックされたときに異なるテキストを出力します。
「on()」と「click()」の違い
on() と click() は、クリックイベントなどのユーザー操作に対して反応するために使用しますが、いくつかの重要な違いがあります。
click() メソッドは、要素に対するクリックイベントを処理します。それは特定の要素がクリックされたときに発火します。
$("p").click(function(){
alert("段落がクリックされました。");
});一方、on() メソッドはより一般的なイベントハンドラで、クリックイベントだけでなく、他の全てのイベントタイプ（例えばマウスオーバー、キープレスなど）にも対応しています。
さらに、on()メソッドは、動的に生成された要素（ページの読み込み後にJavaScriptによって追加された要素）に対してもイベントハンドラを適用することができます。これは、click() メソッドではできません。
$("p").on("click", function(){
alert("段落がクリックされました。");
});上記のコードは、段落がクリックされたときにアラートを表示します。
要約すると、click() は特定のクリックイベントに対するショートカットメソッドで、on() はより一般的なイベントハンドラで、動的に生成された要素や、クリック以外のイベントにも対応できます。
