Programming Notes

JavaScriptでクリックしても動かない？onclickとaddEventListenerの違いを初心者向けに徹底解説！ 「クリックしたら動くはずなのに…」JavaScriptでボタンを動かそうとしても、思った通りに動かないことってありますよね。 この記事では、初心者が特につま...

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

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

WordPressでテーマを作成している時に、「記事一覧をタブで切り替えるようなデザイン」を実現したい時や、それを実現しているテーマを目にしたことがあると思います。 今回はZeroStartのコラム一覧で実装している「タブ切り替え」風の通信について解説して...

今回は弊社のモック掲載ページでも使用している、マウスホバーに合わせてゆらゆら動くアニメーションの作成方法を紹介します。ギャラリーページ等の一覧画面で使用すると高級感が有り、洗練されたイメージを与えることが出来るのでオススメです。基本的に...

今回は企業ホームページなどでよく見かける画像ループスライダーの作り方について紹介していきます。HTMLとCSSだけで実現可能ですので、初心者の方でも気軽に取り入れる事が出来ると思います。 今回作るもの 画像スライドは色々なタイプがありますが、今回...

今回はCSSによるフェードインアニメーションだけでなく、マスク画像を使用した更にひと手間加えたアニメーションの方法を紹介します。リッチなアニメーションを採用したい場合等に効果的ですのでぜひご活用ください。 今回つくるもの 今回は画面読み込み時...

これからWordPressを使って開発をしようとしており、運用のためにどのようなことができるのか調査していました。その中でWordPressのリリース方法について調べていると、Bedrockという単語を見つけました。なんだか良さそうな香りがしたので試しにセットア...

HTMLの<label>タグは、フォーム入力欄に説明をつけるために使うタグです。ユーザーが「ここには何を入力すればいいのか」をわかりやすくするために重要な役割を果たします。 HTMLはウェブページを構築するための基本的な言語であり、すべてのウェブ...

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