ウェブ制作【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作（その２-HTMLの雛形）
はるこんにちは。現役フロントエンドエンジニアのはるです！はじめてのHTMLを書いていきましょう！前回、このチュートリアルで作成するWebサイトについてとHTMLの基礎知識を説明しました。ぜひ、完成するWebサイトはどんなものか確認してからチ...
ウェブ制作
ウェブ制作
ウェブ制作【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作（その１- 基礎知識編）
はるこんにちは。アイドルが大好き！現役フロントエンドエンジニアのはるです！プロフィールページを作りながら、HTML・CSSをチュートリアル形式で説明していきます。以前、これからHTML・CSSを勉強始めようと思っている方に「まず何を用意した...
ウェブ制作はじめの一歩！HTML・CSS入門者向けのWeb開発環境を用意しよう。
はるこんにちは。推しにガチ恋アイドルオタクで現役フロントエンドエンジニアのはるです！この記事では、HTML・CSSをはじめる入門者向けのはじめの一歩として用意するべき開発環境について紹介します。この記事では、HTML・CSS・JavaScr...
ウェブ制作【Macで無料】検索順位計測ツールSerposcope導入から使い方まで紹介
はる無料で使える検索順位計測ツールのSerposcopeのインストールから設定と使い方まで紹介します。最近、AppleSiliconM1のMacminiを買い使っています。今回は、その新しいMacに無料の検索順位計測ツールSerposcop...
ウェブ制作僕のWordPress×dockerのローカル開発環境の使い方を丁寧に紹介します
はるWordPressのdocker開発環境用にカスタマイズしたので、その環境の使い方をできるだけ丁寧に紹介したいと思います。ブログも放置してましたが、また頑張りたいと思っているはるです！何をやってたかというと、このブログ以外にアイドル情報...
ウェブ制作SNSシェアーボタンaタグ用 別ウィンドウでいい感じのサイズで表示する
aタグで自作のシェアーリンクを作るとき、外部リンクで設定すると思います。それを、シェアーするにはちょうどいいサイズの別ウィンドウにする方法を紹介します。普段私はBabelを通してjsを書いてるので、そのソースコードでの説明になります。リンク...
ウェブ制作Macでスクショの保存場所を変更してpngをjpgに変更するまでやっちゃおう
毎回MacPCを新しくして、毎回同じ一連のコマンドをググってやるのが面倒なので、Macのスクリーンショットの保存場所を変更png保存のものをjpg保存に変更のコマンドをメモメモ...スクリーンショットの保存場所を変更defaultswrit...
ウェブ制作metaタグのviewportを理解するために簡単な言葉でまとめてみた
レスポンシブ・リキッドレイアウトのサイトを作るにあたって、<metaname="viewport"content="width=device-width,initial-scale=1.0">この設定をやっていれば問題なく作れますが、今回v...
ウェブ制作Gutenbergのリンク・外部リンク設定の種類と効果をまとめて紹介(WordPress)
はる外部リンク時の設定の種類と効果について紹介します！WordPressのGutenbergエディターの設定に沿って紹介していきたいと思います！WordPressのGutenbergでリンクを設定する際に、『新しいタブで開く』・『nofol...
ウェブ制作ゴーストボタンの背景を左から右へ受け流すアニメーション実装方法【ホバーアニメーション】
はるボタンをホバーすると左から右へ背景がアニメーションさせるCSSの方法を紹介します。その応用方法も、紹介するので覚えておくとさまざまな場面で使えます。今回は、CSSアニメーションで、左から右へと背景や線画流れるようなアニメーションの方法を...
ウェブ制作最もシンプルなモーダルメニューの作り方【簡単なCSSとJavaScriptで実装】
はる一番簡単で使う場面が多いモーダルの作り方を紹介します。簡単なモーダルであればこの方法を使えば素早く実装できます。モーダル表示されるメニューとして紹介しますが、メニューリストの代わりにYouTube動画を埋め込んで、サムネイル画像用意しク...
ウェブ制作ページ表示時にYouTubeのiframe埋め込みを自動再生させる方法
はるYoutubeのiframe埋め込みして、自動で再生させたい時の設定方法と、できる条件についてまとめました。特定条件なら自動再生させることができるので紹介します！ページ表示に、iframe埋め込まれたYouTube動画を再生させる方法と...