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-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-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-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; } ソ…