Googleサイト使い方 / パスワード認証 / 掲示板 / アンカーリンク / サイト登録 / ログインフォーム / アナリティクス / SEO / 活用法

各種コード

Q&Aにもいくつかコードがあります。

※ コードのピンク色の部分はお好きに変えてください

一定時間でテキスト変更

文字アニメーションは、こちら

コード

<style>

p {

width: 80%;

height: auto;

margin: 0 auto;

padding: 10px; /* 背景色との余白 */

text-align: center;

font-family: serif; /* sans-serifでブロック体 */

font-size: 6vw; /* 文字サイズ */

color: white; /* 文字色 */

font-weight: bold; /* 文字の太さ、400で標準*/

background-color: transparent; /* タイトルの背景色 */

}

</style>

const message1= document.getElementById('ttl');

/* 変化するメッセージ */

const messages = [

'おはよう',

'こんにちは',

'こんばんは',

'おやすみ',

];

const bgColors = [

'blue', /* 背景色、必要なければ transparent */

'darkorange',

'green',

'crimson'

];

let i = 0;

function showMessage() {

if (i == 4) { // メッセージの数に合わせる

i = 0;

}

message1.textContent = messages[i];

message1.style.backgroundColor = bgColors[i];

i++;

}

setInterval(showMessage, 2000); //表示を切り替える秒数

</script>

タイムメッセージ

△ 時間帯によりメッセージが変わります

コード

<div>

<p id="fixed-message">固定メッセージ</p>

</div>

<style>

/*　必要なければ削除してください　*/

#fixed-message {

font-size: 20px;

color: red;

}

#time-message {

font-size: 18px;

color: blue;

}

</style>

function updateMessage() {

const now = new Date(); // Dateオブジェクトの作成

const hours = now.getHours(); // 現在時刻を取得

let message = '';

//6時〜11時59分まで

if (hours >= 6 && hours < 12) {

message = 'Good morning';

}

//12時〜16時59分まで

else if (hours >= 12 && hours < 17) {

message = 'Good afternoon';

}

//17時〜11時59分まで

else if (hours >= 17 && hours < 24) {

message = 'Good evening';

}

//24時〜5時59分まで（上記以外）

else {

message = 'Good night';

}

// HTML内の要素にメッセージを設定

document.getElementById('time-message').innerText = message;

}

// ページがロードされたときのメッセージ更新

window.onload = function() {

updateMessage();

};

// 一定時間ごとのメッセージ更新（例: 1分ごとに更新、1分=60,000ミリ秒）

setInterval(updateMessage, 60000);

</script>

デザインテキストボックスは、こちら

コード

<legend>sample</legend>

<div>

<li>あいうえお　かきくけこ</li>

<li>さしすせそ　たちつてと</li>

<li class="text1">なにぬねの　はひふへほ</li>

</div>

</fieldset>

<style>

legend {

font-size: 16px;

color: white;

background-color: purple;

padding: 3px 6px; /*　タイトル位置　*/

}

div li {

list-style: none; /*　inside で箇条書きスタイルに　*/

font-size: 14px;

color: black;

margin-top: 5px; /*　行間　*/

margin-bottom: 5px; /*　行間　*/

}

.text1 {

color: blueviolet;

}

</style>

日付・時計

コード

</div>

<style>

.box {

display: flex;

height: 70px;

align-items: center;

justify-content: center;

border: 1px solid royalblue;

border-radius: 4px;

background-color: #e0ffff;

animation-name: fade;

animation-duration: 3.0s;

animation-delay: 0s;

}

.clock-date {

font-size: 18px;

color: #1e2428;

}

.clock-time {

display: block;

position: relative;

font-size: 18px;

color: #1e2428;

text-align: center;

}

@keyframes fade{

0%{

opacity: 0;

}

100%{

opacity: 1;

}

</style>

const clock = () => {

const d = new Date();

let year = d.getFullYear();

let month = d.getMonth() + 1;

let date = d.getDate();

let dayNum = d.getDay();

const weekday = ["(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)"];

let day = weekday[dayNum];

let hour = d.getHours();

let min = d.getMinutes();

let sec = d.getSeconds();

month = month < 10 ? "0" + month : month;

date = date < 10 ? "0" + date : date;

hour = hour < 10 ? "0" + hour : hour;

min = min < 10 ? "0" + min : min;

sec = sec < 10 ? "0" + sec : sec;

let today = `${year}.${month}.${date} ${day}`;

let time = `${hour}:${min}:${sec}`;

document.querySelector(".clock-date").innerText = today;

document.querySelector(".clock-time").innerText = time;

};

setInterval(clock, 1000);

</script>

Web検索フォーム

コード

function OnButtonClick() {var url = "https://google.com/search?q=" + document.searchform.keyword.value;window.open(url, "_blank");}

function OnKeyPress(push){if(13 === push){OnButtonClick();}}

</script>

</form>

<style>

.keyword {

display: block;

margin-bottom: 2px;

padding: 5px 10px;

width: 300px;

height: 35px;

outline: none;

border: 1px solid gray;

border-radius: 4px;

font-size: 16px;

background-color: transparent;

}

.rst {

text-align: cener;

font-size: 14px;

color: gray;

font-weight: 400;

padding: 0px 0px;

width: 42px;

height: 25px;

border: 1px solid gray;

border-radius: 4px;

background-color: transparent;

}

.rst:hover {

background-color: #ffea00;

}

.btn {

text-align: cener;

font-size: 15px;

color: #003300;

width: 32px;

height: 30px;

padding: 2px 2px;

border: 1px solid gray;

border-radius: 4px;

background-color: transparent;

}

.btn:hover {

background-color: #ffea00;

}

input {

animation-name:fadeInAnime;

animation-duration:1s;

animation-fill-mode:forwards;

opacity:0;

}

@keyframes fadeInAnime{

from {

opacity: 0;

}

to {

opacity: 1;

}

</style>

クリップボードへのコピー

コード

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

</textarea><br>

function cp(){

var txt = document.getElementById("copy");

txt.select();

document.execCommand("Copy");

}

'use strict'

{

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {

btn.textContent = 'コピーしました';

})

}

</script>

手動でコピーしてください

アナログ時計（大きさや色は自由に変えられます）

NO.1

NO.2

NO.3

NO.1 コード

</div>

</div>

<style>

.container {

transform: scale(0.8); /* 時計のサイズ */

display: flex;

margin: auto;

flex-direction: column;

justify-content: center;

align-items: center;

animation: fadein 2.0s backwards ease-in;　/* アニメーションの表示が終わるまでの時間 */

animation-delay: 0.5s; /* アニメーションの開始時間 */

/* 大円 */

margin-top: 0%; /* 垂直位置調整 */

width: 290px; /* 大円の大きさ */

height: 290px; /* 大円の大きさ */

background-color: darkgoldenrod; /* 大円の色 */

border: 2px solid transparent; /* 縁取りの太さとの色 */

border-radius: 50%;

}

@keyframes fadein {

0% {

opacity: 0;

color: transparent;

}

100% {

opacity: 1;

}

/* 中円 */

.clock {

min-width: var(--clock-size);

min-height: var(--clock-size);

position: relative;

border-radius: 50%;

border: 16px solid black; /* 中円の大きさと色 */

}

/* 小円 */

:root {

--clock-size: 150px;/* 小円の大きさ */

}

.clock::before {

content: "";

position: absolute;

top: 6px; /* 小円の縁取りの太さ・色は大円の色になる */

bottom: 6px; /* 小円の縁取りの太さ・色は大円の色になる */

left: 6px; /* 小円の縁取りの太さ・色は大円の色になる */

right: 6px; /* 小円の縁取りの太さ・色は大円の色になる */

border-radius: 50%;

background-color: #252525; /* 小円の色 */

}

/* 中心の丸 */

.clock::after {

content: "";

position: absolute;

top: 50%;

left: 50%;

width: 20px; /* 中心丸の大きさ */

height: 20px; /* 中心丸の大きさ */

transform: translate(-50%,-50%);

border: 2px solid red; /* 中心丸の縁取りの太さと色 */

border-radius: 50%;

background: white; /* 中心丸の色 */

}

.numbers {

position: absolute;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

/* 文字盤の数字 */

.number {

position: absolute;

display: flex;

justify-content: center;

align-items: center;

font-family: serif; /* sans-serifにすればゴシック体 */

font-size: 26px; /* 数字の大きさ */

font-weight: 700; /* 数字の太さ、標準は400 */

color: white; /* 数字の色 */

transform: rotate(calc(30deg * var(--i) - 90deg)) translate(118px) rotate(calc(-30deg * var(--i) + 90deg)); /* 中心から数字までの距離 */

}

.hand {

position: absolute;

bottom: 50%;

left: 50%;

transform-origin: bottom;

transform: translateX(-50%);

border-radius: 4px; /* 秒・分・時針の丸み */

}

.number > span {

transform: translateY(1px);

}

/* 秒針 */

.second {

width: 2px; /* 秒針の太さ */

height: 118px; /* 秒針の長さ */

background: white; /* 秒針の色 */

animation: rotateHand 60s linear infinite;

}

/* 分針 */

.minute {

width: 6px; /* 分針の太さ */

height: 104px; /* 分針の長さ */

background: white; /* 分針の色 */

animation: rotateHand 3600s linear infinite;

}

/* 時針 */

.hour {

width: 10px; /* 時針の太さ */

height: 84px; /* 時針の長さ */

background: white; /* 時針の色 */

animation: rotateHand 43200s linear infinite;

}

@keyframes rotateHand {

from {

transform: translateX(-50%) rotate(0deg);

}

to {

transform: translateX(-50%) rotate(360deg);

}

</style>

// script.js

function setInitialTime() {

const now = new Date();

const seconds = now.getSeconds();

const minutes = now.getMinutes();

const hours = now.getHours();

const secondHand = document.querySelector('.second');

const minuteHand = document.querySelector('.minute');

const hourHand = document.querySelector('.hour');

const secondDelay = -seconds;

const minuteDelay = -(minutes * 60 + seconds);

const hourDelay = -(hours * 3600 + minutes * 60 + seconds);

secondHand.style.animationDelay = `${secondDelay}s`;

minuteHand.style.animationDelay = `${minuteDelay}s`;

hourHand.style.animationDelay = `${hourDelay}s`;

}

setInitialTime();

</script>

NO.2 コード

<style>

#clockid {

display: block;

margin: auto; /* 時計の水平位置中央 */

transform: scale(0.8); /* 時計の大きさ調整、1以上にするとスマホの画面に収まらなくなります */

animation: fadein 1.5s backwards ease-in;　/* アニメーションの表示が終わるまでの時間 */

animation-delay: 0.5s; /* アニメーションの開始時間 */

}

@keyframes fadein {

0% {

opacity: 0;

color: transparent;

}

100% {

opacity: 1;

}

</style>

window.onload = function() {

init();

};

function init(){

clock();

setInterval('clock();',1000);

}

function clock(){

var now = new Date();

var canvas = document.getElementById("clockid");

var ctx = canvas.getContext('2d');

ctx.save();

canvas.width = 300;

canvas.height = 300;

var w = canvas.width;

var h = canvas.height;

var center = {x : w / 2, y : h / 2};

var rads = w / 2 * 0.8;

ctx.clearRect(0, 0, w, h);

// 時計の円

ctx.save();

ctx.strokeStyle = "orange"; // 文字盤外枠の色

ctx.lineWidth = 3; // 文字盤外枠の太さ

ctx.translate(center.x,center.y);

ctx.beginPath();

ctx.arc(0, 0, (w/2)-5, 0, Math.PI * 2, false);

ctx.fillStyle ="transparent"; // 文字盤外側の色

ctx.fill();

ctx.stroke();

/* circle white */

ctx.beginPath();

ctx.arc(0, 0, 100, 0, Math.PI * 2, false);

ctx.fillStyle ="transparent"; // 文字盤内側の色

ctx.fill();

ctx.restore();

// 文字盤の文字

ctx.save();

ctx.font = "24px 'sans-serif'"; // 文字の大きさとフォント、serifにすれば明朝体

ctx.textAlign ="center";

ctx.textBaseline ="middle";

ctx.fillStyle = "black"; // 文字の色

for (var i = 0; i < 12; i++) {

var radian = i * Math.PI / 6;

var x = center.x + rads * Math.sin(radian);

var y = center.y - rads * Math.cos(radian);

var text = "" + (i == 0 ? "12" : i);

ctx.fillText(text, x, y);

}

ctx.restore();

ctx.translate(center.x,center.y);

// 目盛り

ctx.save();

ctx.strokeStyle ="orangered"; // 文字盤分目盛りの色

ctx.lineWidth = 2; // 文字盤分目盛りの太さ

ctx.beginPath();

for (var i=0;i<60;i++){

if (i%5!=0) {

ctx.moveTo(100,0);

ctx.lineTo(95,0);

}

ctx.rotate(Math.PI/30);

}

ctx.stroke();

// 目盛り

ctx.strokeStyle ="black"; // 文字盤分目盛りの色（5分刻み）

ctx.lineWidth = 3; // 文字盤分目盛りの太さ（5分刻み）

ctx.beginPath();

for (var i=0;i<60;i++){

ctx.moveTo(100,0);

ctx.lineTo(90,0);

ctx.rotate(Math.PI/6);

}

ctx.stroke();

ctx.restore();

// 針設定

var sec = now.getSeconds();

var min = now.getMinutes();

var hr= now.getHours();

hr = hr>=12 ? hr-12 : hr;

ctx.fillStyle = "gray"; //中心の円の色

// 短針

ctx.save();

ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

ctx.lineWidth = 8; // 短針の太さ

ctx.strokeStyle = "black"; // 短針の色

ctx.beginPath();

ctx.moveTo(-3,25);

ctx.lineTo(0,-70); // 短針の長さ

ctx.lineTo(3,25);

ctx.stroke();

ctx.restore();

// 長針

ctx.save();

ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

ctx.lineWidth = 4; // 長針の太さ

ctx.strokeStyle = "black"; // 長針の色

ctx.beginPath();

ctx.moveTo(-2,25);

ctx.lineTo(0,-85); // 長針の長さ

ctx.lineTo(2,25);

ctx.stroke();

ctx.restore();

// 秒針

ctx.save();

ctx.rotate(sec * Math.PI/30);

ctx.lineWidth = 2; // 秒針の太さ

ctx.strokeStyle = "red"; // 秒針の色

ctx.beginPath();

ctx.moveTo(0,30);

ctx.lineTo(0,-100); // 秒針の長さ

ctx.stroke();

ctx.restore();

// 時計の中心の丸

ctx.save();

ctx.beginPath();

ctx.lineWidth = 3; // 中心円の大きさ

ctx.strokeStyle = "gold"; // 中心円の枠の色

ctx.arc(0,0,7,0,Math.PI*2,true);

ctx.stroke();

ctx.fill();

ctx.restore();

}

</script>

NO.3 コード

</div>

<style>

#clock {

animation: fadein 2.5s backwards ease-in;　/* アニメーションの表示が終わるまでの時間 */

animation-delay: 0.5s; /* アニメーションの開始時間 */

}

@keyframes fadein {

0% {

opacity: 0;

color: transparent;

}

100% {

opacity: 1;

}

*{

margin: 0;

padding: 0;

}

#clock{

display: block;

}

#wrapper{

width: 100%;

height: 100%;

}

</style>

let wrapper = null;

let canvas = null;

let g = null;

let clock_size;

let scale;

let center = { x:0, y:0 };

let $id = function(id){ return document.getElementById(id); };

const BACKGROUND_COLOR = "transparent"; 　// 背景色

const WAKU_COLOR = "#ffc1ff"; 　// 時計枠の色

const CLOCK_BG_COLOR = "#ffffea"; 　// 時計枠内側の色

const CLOCK_CENTER_COLOR = "deeppink"; 　// 針中心のピンの色

const MOJI_BAN_COLOR = "gold"; 　// 文字盤の12本の線の色

const SUJI_COLOR = "#68FC68" 　// 数字の色

const JI_SHIN_COLOR = "gold";　 // 時針の色

const FUN_SHIN_COLOR = "gold";　 // 分針の色

const BYOU_SHIN_COLOR = "pink";　 // 秒針の色

function getSize(){

canvas.width = wrapper.offsetWidth;

canvas.height = wrapper.offsetHeight;

center.x = canvas.width / 2;

center.y = canvas.height / 2;

clock_size = canvas.width >= canvas.height ? canvas.height : canvas.width;

scale = clock_size / 500.0;

}

window.addEventListener("resize", function(){

getSize();

});

function clock(){

g.save();

g.fillStyle = BACKGROUND_COLOR;

g.fillRect(0, 0, canvas.width, canvas.height);

g.translate(center.x, center.y);

g.scale(scale, scale);

g.fillStyle = CLOCK_BG_COLOR;

g.beginPath();

g.arc(0, 0, 200, 0, Math.PI*2, true);

g.fill();

g.beginPath();

g.lineWidth = 25;

g.strokeStyle = WAKU_COLOR;

g.arc(0, 0, 200, 0, Math.PI*2, true);

g.stroke();

g.rotate(-Math.PI/2);

g.lineCap = "round";

let now = new Date();

let hour = now.getHours();

let minute = now.getMinutes();

let second = now.getSeconds();

hour = hour >= 12 ? hour - 12 : hour;

g.save();

g.strokeStyle = MOJI_BAN_COLOR;

g.lineWidth = 4;

g.beginPath();

for(let i=0; i<12; i++){

g.rotate(Math.PI/6);

g.moveTo(170, 0);

g.lineTo(180, 0);

}

g.stroke();

g.restore();

// 文字盤の数字

g.save();

g.rotate(Math.PI/2);

g.fillStyle = SUJI_COLOR;

g.font = "bold 32px sans-serif"; // 数字の大きさと書体

g.textBaseline = "middle";

let angle = -60;

let offset = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 15, 20];

let r = 150; // 時計中心から数字までの距離

i = 1;

while(i <= 12){

let radian = angle * Math.PI / 180;

let x = r * Math.cos(radian);

let y = r * Math.sin(radian);

if(i % 1 == 0) g.fillText(i, x-offset[i-1], y); // 3にすれば、3, 6, 9, 12のみ描画

angle += 30;

i++;

}

g.restore();

g.save();

g.rotate( hour * (Math.PI/6) + minute * (Math.PI/360) + second * (Math.PI/21600) );

g.lineWidth = 12; // 時針の太さ

g.strokeStyle = JI_SHIN_COLOR;

g.beginPath();

g.moveTo(-20, 0);

g.lineTo(95, 0); // 時針の長さ

g.stroke();

g.restore();

g.save();

g.rotate( minute * (Math.PI/30) + second * (Math.PI/1800) );

g.lineWidth = 8; // 分針の太さ

g.strokeStyle = FUN_SHIN_COLOR;

g.beginPath();

g.moveTo(-28, 0);

g.lineTo(120, 0); // 分針の長さ

g.stroke();

g.restore();

g.rotate(second * Math.PI/30);

g.strokeStyle = BYOU_SHIN_COLOR;

g.lineWidth = 4; // 秒針の太さ

g.beginPath();

g.moveTo(-30, 0);

g.lineTo(135, 0); // 秒針の長さ

g.stroke();

g.fillStyle = CLOCK_CENTER_COLOR;

g.beginPath();

g.arc(0, 0, 8, 0, Math.PI*2, true); 　// 針中心のピンの大きさ

g.fill();

g.restore();

setTimeout(clock, 1000);

}

window.addEventListener("load", function(){

wrapper = $id("wrapper");

canvas = $id("clock");

g = canvas.getContext("2d");

getSize();

clock();

});

</script>

◆ Google アイコン（マテリアルシンボル）の使い方

https://fonts.google.com/icons にアクセス
使いたいアイコンの名称・サイズ・カラーを下記コードに入力
埋め込みコードにペースト
アイコンを配置

コード

<span class="material-icons-outlined">arrow_circle_up</span>

<style>

.material-icons-outlined {

display: block;

font-size: 50px;

color: orange;

/*　アイコンの位置調整をしないのであれば以下３行はなくても構いません　*/

width: 50px;

/*　アイコン調整　auto auto は中央配置　*/

/*　アイコン調整　left (px)で調整しても right (px) で調整してもOK　*/

margin-left: auto;

margin-right: auto;

}

</style>

アイコンを画像保存して使う場合には、

赤枠内でサイズその他を調整し、緑枠でSVGまたはPNG形式でダウンロードしお使いください

ページ先頭へ

各種コード

クリップボードへのコピー

コード

アナログ時計（大きさや色は自由に変えられます）

◆ Google アイコン（マテリアル シンボル）の使い方

コード

◆ Google アイコン（マテリアルシンボル）の使い方