y_programing– Author –
わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。
-
【超初心者でもOK】WordPressブログの始め方について徹底解説!
WordPressでブログを始めてみたいけど、どうやって始めればいいの? 今回は、無料でWordPressブログを始めたい人に向けて、WordPressの開設から記事の書き方までを一挙ご紹介します! WordPressは世界でみると約4割のシェア、日本だけでみると約8割のシェ... -
CodePenって何?実際の使い方と、ブログで表示させる方法を解説!
「ブログでコードの解説をしたいんだけど、何かいいツールない?」 このような悩みを抱えている人がいましたら、ぜひCodePenをお勧めします。 CodePenとは、ソースコードや、そのコードがどのような表示をするのかを公開できるツールのことです。 このCode... -
jpegやpng画像を一瞬でWebpに!「Converter for Media」の使い方
Webpとは? Webpとは、Googleが開発したWebサイトの高速化に対応した画像形式です。 jpegやpng形式の画像をWebpに変換することで容量が軽くなり、Webサイトを表示させる速度が速くなります。 jpegやpng形式の画像をWebpに変換することは、SEO対策に有効な... -
【コピペOK】transitionの使い方は?keyframeとどう違うの?【CSSアニメーション】
CSSのアニメーションをかける時、transitionやkeyframesを使うと良いってよく聞くけど、ぶっちゃけどう違うの? そう悩んでしまった経験がある方も多いのではないでしょうか? 今回は、CSSでアニメーションを当てたい時によく使用される、transitionプロパ... -
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制作をする際に利用するタグや要素には、実はブロック要素とインライン要素の2種類があり ブロック要素にはブロック要素の、インライン要素にはインライン要素の特徴があります。 このブ... -
【HTML】アンカーリンクを設定する方法をコーディングあり、なしの場合で解説!【WordPress】
「お客さんに『リンクを踏んだら別のページの特定の部分に移行させたい』って言われたけど、どうすればいいの?」 Web制作の受注をしていたり、自分でWordPressブログを開設して更新していくと、アンカーリンクの設定で誰もが1度は悩むと思います。 今回は... -
【HTML、CSS】noindexを設定する意味と、実際の設定方法について解説!
今回は、noindexの設定方法について解説していきます。 noindexの設定方法は、コーディングを利用するか、それともコーディングを利用しないか(WordPressサイトのブロックエディタで実装するなど)で若干違いますが どちらも比較的簡単に設定することがで... -
コードを表示させるプラグイン「Code Block Pro」の使い方【WordPress】
「WordPressに標準で付いているコード表示機能が使い勝手が良くないんだけど、おすすめのコード表示プラグインってないのかな?」 実はボク自身、今回紹介するプラグインの存在を知るまでは ブロックエディターにある「コード」というメニューを使っていま... -
addEventListenerの使い方を徹底解説!【JavaScript初心者向け】
最近jsを学習し始めたんだけど、addEventListenerってどうやって使うの? 今回は、js初心者向けに、addEventListenerの使い方を徹底解説していきます。 addEventListenerの記述はかなりよく出てくるので、これを機にしっかりと学習していきましょう。 addE...