Web制作– category –
-
png、svg、jpegの違いと使い分け｜Web制作初心者が知るべき画像形式の基本
jpeg、png、svgって、結局どう違ってどの場面で使えばいいの？ 「jpeg、pngとsvgはなんとなく違うのは分かるけど、jpegとpngとは何が違うの？」 なんて思ったことはありませんか？ 今回は、そんな方に向けてjpeg、png、svgの3種類の画像の特徴と違いについ... -
Contact Form 7の実装方法｜クライアントワークで使える設定手順
Contact Form 7とは？ Contact Form 7とは、WordPressで使用できるお問い合わせプラグインのことです。 2025年09月現在で、既に1000万以上インストールされており コーディングを知らなくても、感覚的な操作でお問い合わせフォームを簡単に作ることができ... -
beforeやafter、hoverなどの擬似要素の使い方を徹底解説！
コンテンツの前後に別のコンテンツを実装したり、カーソルを当てたら変化するアニメーションを作るにはどうすればいいの？ 今回は、擬似要素の代表格とも言えるbeforeやafter、hoverについて解説したり、実際の使い方を見ていきたいと思います。 ちなみに... -
HTML、CSSでボタンを実装する方法【ふわっと押されるホバーアニメーションも解説！】
ボタンを実装する方法 今回は、下のようなボタンを作成していきます。 See the Pen ボタン実装 by わい (@y_programing) on CodePen. HTMLはこちら。 HTML<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="vie... -
ブロック要素とインライン要素ってどう違うの？横並びやCSSで右寄せにする方法も解説！
何回もCSSを見直しているしプロパティも合っているはずなのに、上手くCSSが当たらないです… もしかしたらブロック要素とインライン要素を勘違いしているかもね。 ブロ…インラ…、なんですかそれ？ Web制作をする際に利用するタグや要素には、実はブロック要... -
【HTML】アンカーリンクを設定する方法をコーディングあり、なしの場合で解説！【WordPress】
「お客さんに『リンクを踏んだら別のページの特定の部分に移行させたい』って言われたけど、どうすればいいの？」 Web制作の受注をしていたり、自分でWordPressブログを開設して更新していくと、アンカーリンクの設定で誰もが1度は悩むと思います。 今回は... -
【HTML、CSS】noindexを設定する意味と、実際の設定方法について解説！
今回は、noindexの設定方法について解説していきます。 noindexの設定方法は、コーディングを利用するか、それともコーディングを利用しないか（WordPressサイトのブロックエディタで実装するなど）で若干違いますが どちらも比較的簡単に設定することがで... -
コードを表示させるプラグイン「Code Block Pro」の使い方【WordPress】
WordPressに標準で付いているコード表示機能が使い勝手が良くないんだけど、おすすめのコード表示プラグインってないのかな？ なんて思ったことはありませんか？ プログラマーかつブロガーでないと思いませんかねw 実はボク自身、今回紹介するプラグインの... -
addEventListenerの使い方を徹底解説！【JavaScript初心者向け】
最近jsを学習し始めたんだけど、addEventListenerってどうやって使うの？ 今回は、js初心者向けに、addEventListenerの使い方を徹底解説していきます。 addEventListenerの記述はかなりよく出てくるので、これを機にしっかりと学習していきましょう。 addE... -
CSSアニメーションでタイピング風にテキストを表示させる方法【keyframes】
今回は、タイピング風にテキストを表示させるアニメーションのコーディングを解説していきます！ しかも、今回の方法はJavaScriptは使用しないので（HTMLと）CSSだけで完結できるので jsを実装したことがない Web制作をこれから初めてみたい！ まだ学習し...
