CSS transitionを最速でマスター！効かない原因も即解決！
Web制作でCSSのtransitionプロパティを使うことでスムーズなアニメーション効果を作ることができます。 この記事ではtransitionの基本的な使い方や、実際によくある実装方法をサンプル…
2023 / 04 / 24
コーディング
コーディング方法
CSSで縦書きテキストを簡単に実現！和風Webサイトもサクサク作る方法
和風の高級感のあるWebサイトなどで多用される縦書きのやり方をわかりやすく解説します。 HTMLで入力したテキストは通常横書きになりますが、CSSのを使えば一発で縦書きになります。 縦書きにした場合…
2023 / 04 / 20
HTMLでセレクトボックスの初期値やデザインのカスタマイズ方法
HTMLでセレクトボックス（ドロップダウンリスト）の初期値やサイズ、スタイルのカスタマイズ方法を紹介します。 セレクトボックスは比較的CSSでスタイルしやすいですが、矢印や複数選択の場合のデザインが…
2023 / 04 / 19
HTML ラジオボタンのデザインをカスタマイズする方法
HTMLでラジオボタンのデザインやラベルの作成方法と初期値の設定方法を解説します。 ラジオボタンのデザインをブラウザごとのデフォルトスタイルから画像に変えることができます。 ただCSSで直接スタイル…
2023 / 04 / 18
HTML チェックボックスのカスタマイズ方法
HTMLでチェックボックスのデザインやラベルのカスタマイズ方法と初期値の設定方法を解説します。 チェックボックスのデザインをアイコンに変えたり、画像に変えたり、チェックされたタイミングでスタイルを変…
2023 / 04 / 17
2023 VSCodeのおすすめテーマはこれだ！
VSCode(VisualStudioCode)の外見を変えて画面を見やすく&おしゃれにカスタマイズできる配色テーマを集めました。 テーマは新しいものが次々に公開されているので、ずっと使ってるテーマ…
2023 / 04 / 14
HTMLでJavascriptを読み込む方法と読み込めない場合の原因と対策
HTMLファイルにJavascriptを読み込む方法を解説します。 JavascriptはHTMLファイルに直接書いたり外部ファイル化してタグで読み込むこともできます。 Javascriptの実行タ…
2023 / 04 / 13
HTMLでコメントアウトする方法とショートカットや拡張機能のおすすめ
HTMLでコメントアウトして表示を隠す方法とコメントアウトしやすいエディターや拡張機能のおすすめをまとめて紹介します。 コメントアウトは名前の通りコメントを残しておく用途以外にも、一時的にコンテンツ…
2023 / 04 / 12
HTMLで背景画像を全画面にしたり透過させる方法を事例と合わせて解説
HTMLでCSSを使って背景画像を全画面表示したり、透過させたりする方法を実際の事例と合わせて紹介します。 背景画像はメインビジュアルなどの重要な場所で使われることが多く、全画面以外にもサイズを変え…
2023 / 04 / 11
HTMLとCSSで背景色の幅や高さを変えたりグラデーションにする方法
HTMLとCSSで背景色をつける基本的な方法から、幅や高さを調整したりグラデーションを使う方法を解説します。 背景色はHTMLタグやCSSセレクタに対してカラーコードを指定することで指定した色にでき…
2023 / 04 / 10
HTMLでCSSファイルを読み込む方法とうまくいかない場合の対策
今回はHTMLファイルに外部スタイルシート(CSSファイル)を読み込む方法を解説します。 HTMLファイルからCSSファイルをリンクすることでホームページに スタイルを当てることができます。 リンクの…
2023 / 04 / 07
HTMLで空白や改行を入れたり余計な空白を削除する方法
Webサイトの空白をマスターすれば自由自在に文字間を調整したり、スマホだけ改行したりもできるよ！ あとホームページ作ってると謎の空白や意図しない場所で改行が入る原因と対策方法もまとめました。 このペ…
2023 / 04 / 06
HTML 文字を太字にしたり赤色で強調する方法とサンプルコード
HTMLで書いた文字を太字にしたり赤字や下線で強調する方法をサンプルコードと合わせて紹介します。 文字の装飾は文章全体に当てる場合と一部の文字だけカスタマイズする方法もあります。 やり方が少し違うの…
2023 / 04 / 05
初めてでもできる！HTMLで画像挿入とカスタマイズする方法
HTMLで画像を挿入したり、挿入した画像のサイズや位置をカスタマイズする方法を紹介します。 画像の挿入はタグにURLを入力するだけなので一度わかればあとは簡単。 でも最初はうまく表示できなかったりす…
2023 / 04 / 04
HTMLで表の作り方をサンプルコードと合わせて解説
HTMLで表形式のレイアウトやコンテンツを作成する方法をサンプルコードと合わせて紹介します。 ヘッダーの位置を変えたり、セルの連結方法やスマホ対応（レスポンシブ）の表の作り方について も解説します。 …
2023 / 04 / 03
HTMLテーブルの枠線を一部にだけ付ける、消すなどの実装方法
HTMLテーブルの枠線をCSSを使ってカスタマイズする方法を紹介します。 HTMLテーブルは全体の枠線をつけるだけでなく、行ごとに下線を引いたり、一部のセルにだけスタイルをつけるといったこともできま…
2023 / 03 / 30
HTMLとCSSでおしゃれな問い合わせフォームを作る方法
HTMLとCSSでおしゃれな問い合わせフォームを作る方法を紹介します。 問い合わせフォームはHTMLタグの中でも特殊なタグの集まりで、ブラウザごとに見た目も違ってくるのですがCSSを使ってデザインす…
2023 / 03 / 28
HTMLでコピーライトを書く方法と年代の自動更新方法
作成したWebサイトにHTMLで書く方法と2023などの年代を自動更新する方法を解説します。 Webサイトに必ず表示されているコピーライト。仕事柄たくさんのサイトを見ているのですが、たまに表記方法が…
2023 / 03 / 23
CSSでtext-alignが効かないときの対策と中央揃えのコツ
CSSのtext-alignが効かないときの原因と対策方法を解説します。 通常ブロック要素なら問題なくtext-alignが効くのですが、インライン要素にしていたり、別の場所で書いたCSSコードが原…
2023 / 03 / 22
HTMLリンクを別ウィンドウやタブで開く方法とうまくいかない時の対処法
HTMLのリンクを別タブで開く方法とJavascriptを使った代替方法について紹介します。 HTMLのリンクは通常同じタブ内でページが開くようになっていますが、別タブや別ウィンドウで開きたい場合は…
2023 / 03 / 21