JavaScriptでサイトの共通化（インクルード化）をしよう！

今回はサイトの共通化をしていこうと思います。共通化はインクルードと言ったりもしますね。サイトの共通化とは？ innerHTMLとinsertAdjacentHTML innerHTML insertAdjacentHTML 実践編 - 実際に使うコードまとめサイトの共通化とは？サイトのヘッダーや…

2021-11-12

CSSでリアルな雲を作る

cssアート css ネタ html

CSSでリアルな雲を作るぞ！まずCSSだけでリアルな雲を作ろうと思って調べてみました。するとCSS3D Cloudsが出てきました。このサイトを見れば分かると思いますが、リアルな雲が3Dで表現されています。とてもリアルなのでこのサイトを参考にCSSを書けば簡…

2021-10-29

ハロウィンなのでHTMLとCSSでパンプキンを作ろう！

cssアート css html ネタ

ハロウィンですね。毎年ハロウィンがありますが、特にハロウィンらしいことをした覚えが過去にありません。（というか何するの？）ということで今年はHTMLとCSSでハロウィンによく現れるパンプキンのおばけ（？）を作りたいと思います。完成形 https://poc…

2021-10-24

CSSだけでロード中のぐるぐるを作る

css 開発記

今回はロードなどをしているときに出てくるあのぐるぐる（伝われ）を作っていこうと思います。早速完成品 #circle1{ width: 18px; height: 18px; overflow: hidden; animation: circleAni 1.3s linear infinite; transform-origin: 100% 100%; } #circle1:b…

2021-10-23

【JavaScript】if文とfor文だけで素因数分解

プログラミング数学 javascript

唐突に「素因数分解」がしたいと思ったのでプログラムで作ってみようと思います。少しググってみると何やらいろんな関数が使われていて難しそうでした。ですが今回はif文とfor文だけで素因数分解をしていこうと思います。（良いか悪いかは別として）早速…

2021-09-19

HTML、CSSでサイトを作る際の基礎や常識

html css javascript jQuery

初心者がHTMLやCSSを勉強してタグの意味やある程度のCSSの書き方がわかるようになったら1からサイトを作りたいと思うはずです（多分）。ですが、いざサイトを1から作ろうとすると分からないことが多いと思います。今回は本などには載っていなかったりするの…

2021-09-03

CSSでborderのみの半円をつくる

css html 開発記

borderのみの半円を作りたい！完成形がこんな感じ↓の枠線だけがついた半円を作りたい！あと、一つのdivだけで作りたい！早速完成品 .circle{ width: 200px; height: 100px; overflow: hidden; } .circle:before{ content: ''; display: block; width: 170…

2021-08-30

日本語で書けるプログラミング言語「なでしこ」を触ってみた

プログラミングネタ

プログラミング言語といえば何を思い浮かべますか？ JavaScript? PHP? Python? Java? C#? たくさんあると思います。ですがその言語のほとんどが英語とかですよね？今回はすべて日本語で書けるプログラミング言語を試してみたいと思います。「なでしこ」と…

2021-07-24

particles.jsで背景アニメーションを　雪、幾何学模様、泡【JSライブラリシリーズ1】

JSライブラリシリーズ javascript html css プログラミング

今回はparticles.jsというJavaScriptライブラリの紹介をしていきたいと思います。このようなJavaScriptライブラリを紹介するシリーズを数回やっていこうと思うので気になる人は待っておいてください！今回のparticles.jsはページの背景に雪を降らせたり、幾…

2021-06-25

【Chrome拡張機能】Stylusを使って自分で書いたCSSを常時反映させる！

css

CSSを保存できるStylus 「このサイトの使い勝手悪い！」と思ったことはありませんか？ちなみに筆者はあります()今回はこのような事態を防ぐことのできるかもしれないChromeの拡張機能を紹介したいと思います。今回紹介する拡張機能は「Stylus」というもので…

2021-06-20

【はてなブログ無料版】トップページをカスタマイズする2種類の方法を紹介。記事一覧にしたり

はてなブログカスタマイズ css javascript html ブログ運営

はてなブログの初期のトップページって一番最近書いた記事の全文が表示されてると思います。ですがこれだとせっかくブログを訪れてくれた人が記事の一覧を見ることができずにやりづらいですよね。なので今回ははてなブログのトップページを一覧表示にした…

2021-04-29

【レビュー】デザイン最強のゲーミングマウスパッド、PureTrak Talent Blackをレビュー！

レビューデスク改造計画

静かに始まったデスク改造計画も第3段。今回はマウスパッドを紹介したいと思います。同時期にキーボードとワイヤレスイヤホンも買ったので後日紹介したいと思います！今回紹介するマウスパッドはPureTrakというメーカーのTalent Blackというものを購入しま…

2021-03-24

【jQuery】input要素のスライダーを動かして文字サイズをリアルタイムに変更する方法

プログラミング javascript jQuery html 開発記

今回はWebサービスを開発している途中に作ったHTMLのinput、range要素を使って文字のサイズを変更するものを紹介していきたいと思います。一旦デモをどうぞ。ここの文字のサイズが変わります。 10 $('#slider').on('input', function () { let val = $(this)…

2021-03-16

ついにKeychronが日本でも登場！！！！！！日本語配列モデルも登場！

ガジェットニュースパソコン

コペックジャパンは「Keychron K1 ワイヤレス・メカニカルキーボード」を3月15日に販売を開始しました。 Keychronシリーズはこれまで海外を中心に販売がされており、日本用のモデルは販売されていませんでした。モデルは2種類用意されており、フルサイズモデ…

2021-03-14

CSS完全に理解した

ネタ css

だいぶ無理やりだけどCSS完全に理解した .css-box { border: black solid 2px; border-radius: 5px; width: 230px; height: 100px; } .css { display: inline-block; font-size: 30px; font-weight: 800; padding: 5px; margin: -100px auto auto 80px; } ソ…