ウェブ制作

ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その1- 基礎知識編)

はる こんにちは。アイドルが大好き!現役フロントエンドエンジニアのはるです!プロフィールページを作りながら、HTML・CSSをチュートリアル形式で説明していきます。 以前、これからHTML・CSSを勉強始めようと思っている方に「ま...
ウェブ制作

はじめの一歩!HTML・CSS入門者向けのWeb開発環境を用意しよう。

はる こんにちは。推しにガチ恋アイドルオタクで現役フロントエンドエンジニアのはるです!この記事では、HTML・CSSをはじめる入門者向けのはじめの一歩として用意するべき開発環境について紹介します。 この記事では、HTML・CSS・...
ウェブ制作

【Macで無料】検索順位計測ツールSerposcope導入から使い方まで紹介

はる 無料で使える検索順位計測ツールのSerposcopeのインストールから設定と使い方まで紹介します。 最近、Apple Silicon M1 の Mac mini を買い使っています。今回は、その新しいMacに無料の検索順位計...
ウェブ制作

僕のWordPress×dockerのローカル開発環境の使い方を丁寧に紹介します

はる WordPressのdocker開発環境用にカスタマイズしたので、その環境の使い方をできるだけ丁寧に紹介したいと思います。 ブログも放置してましたが、また頑張りたいと思っているはるです!何をやってたかというと、このブログ以外...
ウェブ制作

SNSシェアーボタンaタグ用 別ウィンドウでいい感じのサイズで表示する

aタグで自作のシェアーリンクを作るとき、外部リンクで設定すると思います。それを、シェアーするにはちょうどいいサイズの別ウィンドウにする方法を紹介します。 普段私はBabelを通してjsを書いてるので、そのソースコードでの説明になりま...
ウェブ制作

Macでスクショの保存場所を変更してpngをjpgに変更するまでやっちゃおう

毎回MacPCを新しくして、毎回同じ一連のコマンドをググってやるのが面倒なので、 Macのスクリーンショットの保存場所を変更png保存のものをjpg保存に変更 のコマンドをメモメモ... スクリーンショットの保存場所を変...
ウェブ制作

metaタグのviewportを理解するために簡単な言葉でまとめてみた

レスポンシブ・リキッドレイアウトのサイトを作るにあたって、 <meta name="viewport" content="width=device-width, initial-scale=1.0"> この設定をやってい...
ウェブ制作

Gutenbergのリンク・外部リンク設定の種類と効果をまとめて紹介(WordPress)

はる 外部リンク時の設定の種類と効果について紹介します!WordPressのGutenbergエディターの設定に沿って紹介していきたいと思います! WordPressのGutenbergでリンクを設定する際に、『新しいタブで開く』...
ウェブ制作

ゴーストボタンの背景を左から右へ受け流すアニメーション実装方法【ホバーアニメーション】

はる ボタンをホバーすると左から右へ背景がアニメーションさせるCSSの方法を紹介します。その応用方法も、紹介するので覚えておくとさまざまな場面で使えます。 今回は、CSSアニメーションで、左から右へと背景や線画流れるようなアニメー...
ウェブ制作

最もシンプルなモーダルメニューの作り方【簡単なCSSとJavaScriptで実装】

はる 一番簡単で使う場面が多いモーダルの作り方を紹介します。簡単なモーダルであればこの方法を使えば素早く実装できます。 モーダル表示されるメニューとして紹介しますが、メニューリストの代わりにYouTube動画を埋め込んで、サムネイ...
タイトルとURLをコピーしました