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

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

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

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

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

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

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

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

要素を別を場所移すとは？ コード コードの説明 div 移動させる先の要素名 移動させる要素名 元の要素を非表示に タイトルを非表示 あとは調整！ 要素を別を場所移すとは？ サイドバーの要素を記事内に設置するとは、例えば、ブログのトップページを作ったと…

4月25日更新：レスポンシブデザインに対応させました！アフィリエイトブログを運営する場合にほぼ必須となるものが、商品リンクを貼るボックス的なものですよね。言葉じゃわからないので、実際のものを。 下の画像は「rinker」というWordPress用の商品リンク…