rie– Author –

冬のサイトやクリスマスイベントページを作るとき、「もっと雰囲気を出したい」「動きのある背景を追加したい」と感じる人は多いはず。実は、Bootstrap × JavaScript（Canvas） を組み合わせるだけで、誰でも簡単に “雪が降る幻想的なトップページ” を作れ...

Webサイトをおしゃれに見せたいと考えたとき、「ガラス風デザイン（glassmorphism）」を取り入れたいと思ったことはありませんか？ ガラスのような透明感とぼかし効果を使ったデザインは、近年のWebトレンドとして注目されており、ポートフォリオやLP、Web...

Bootstrap cardはとても便利ですが、デフォルトのままだと少し物足りない…と感じる方も多いのではないでしょうか。この記事では、初心者でもコピペだけで実装できる「Bootstrapカードのおしゃれアレンジ」をわかりやすくまとめました。 影（シャドウ）を付...

ホームページを作るとき、photo-size「写真のサイズってどのくらいがいいの？」と迷ったことはありませんか？サイズが合っていないと、画像がぼやけたり、逆に大きすぎてページが重くなったりします。 この記事では、ホームページで使う写真の最適なサイズ...

Bootstrapを使うと、ナビゲーションバー（メニュー）を簡単に設置できます。しかし、「もっとおしゃれにしたい」「中央にロゴを配置したい」「右寄せしたい」と思ったことはありませんか？この記事では、Bootstrapのナビゲーションバー navbarを使って簡単...

Web制作を始めたばかりの方にとって、「Bootstrapを使ってみたいけど、インストールが難しそう」と感じることはありませんか？実は、Bootstrapはダウンロード不要で数行のコードを貼るだけで簡単に使えます。その方法が「CDN（コンテンツデリバリーネット...

Web制作を始めると、「CSSを自分で書いた方がいいの？」「Bootstrapを使う方が早い？」と迷う方は多いでしょう。どちらにもメリット・デメリットがあり、目的やスキルレベルによって最適な選択が異なります。この記事では、自作CSSとBootstrapの違いを初心...

Webサイトを作るとき、「要素を横並びにしたい」「中央に寄せたい」「隙間をあけたい」と思ったことはありませんか？そんなときに便利なのが Flexbox です。この記事では、Flexboxの基本的な使い方を「お弁当箱」に例えて、初心者でも直感的に理...

HTMLを学んでいると必ず出てくるのがdivタグです。 でも「divって何？」「何に使うの？」と疑問に思う初心者は多いでしょう。 結論から言うと、divタグはWebページの中で“見えない箱”を作るための基本的なタグです。 この“見えない箱”にテキストや画像をま...

CSSを使ってちょっとしたアイコンや文字装飾を追加したいとき、HTMLを書き直さずに実現できたら便利だと思いませんか？そんなときに活躍するのが、CSSの擬似要素 ::before と ::after です。 本記事では、これらの疑似要素の基本的な使い方から、実際の使...