category / HTML&CSS

HTML&CSS

【HTML&CSS】position absoluteを指定したコンテンツを、特定の範囲内で位置を指定する

四角の枠内で丸のコンテンツの位置を指定したいと考えています。 position で absolute を指定し、 top と left を…

続きを読む
2022年07月09日1 分
HTML&CSS

【HTML&CSS】上部を固定した表をスクロールすると、線が消えてしまう問題を解消する

table で表を作成した時、表の上部を固定するために、 thead タグに position: stickey; を設定しました。 このままでは、枠線が二重線になるので、 table に border-collapse: collapse…

続きを読む
2022年06月22日1 分
HTML&CSS

【HTML&CSS】数字の入力欄に出てくる上下のアイコンを削除する

フォームを作成している時、数字の入力欄を作成すると、上下のアイコンが出てきます。 こちらのアイコンを削除するには、CSSで以下の内容を追加します。 画面を確認すると、

続きを読む
2022年06月17日1 分
HTML&CSS

【HTML】フォームの時刻欄を特定の時間おきにする方法

フォームの時刻欄を 3…

続きを読む
2021年07月14日5 分
HTML&CSS

【HTML】日付や時刻をカレンダーやドロップダウンで選択する方法

フォームなどで日付の入力欄を作成するとき、カレンダーで選択できるようにしたい場合、ありませんか? また、時刻の入力欄を作成するとき、ドロップダウンでも選択できるようにしたい場合、ありませんか? 今回は、JavaScript…

続きを読む
2021年07月12日5 分
HTML&CSS

【CSS】特定の段階で、コンテンツを変化させる

続きを読む
2021年07月10日5 分
HTML&CSS

【CSS】コンテンツをゆっくり変化させたり一定に変化させたりする方法

続きを読む
2021年07月09日5 分
HTML&CSS

【CSS】コンテンツを遅らせて変化させる方法

前回は、コンテンツが時間をかけて変化する方法を紹介しました。 今回は、コンテンツを遅らせて変化させる方法を紹介します。 基本のコードは、以下になります。 コンテンツを遅らせて変化させる コンテンツを遅らせて変化させるには、 transition-delay…

続きを読む
2021年07月08日5 分
HTML&CSS

【CSS】コンテンツが時間をかけて変化する方法

前回は、transform…

続きを読む
2021年07月07日5 分
HTML&CSS

【CSS】transformでコンテンツを斜めにする方法

前回は、transform で、特定のコンテンツを拡大・縮小させる方法を紹介しました。 今回は、transform…

続きを読む
2021年07月06日5 分
HTML&CSS

【CSS】transformでコンテンツを拡大・縮小させる方法

前回は、transform で、特定のコンテンツを回転させる方法を紹介しました。 今回は、transform で、コンテンツを拡大・縮小させる方法を紹介します。 基本のコードは、以下になります。 コンテンツを拡大・縮小する コンテンツを拡大・縮小させるには、 transform…

続きを読む
2021年07月05日5 分
HTML&CSS

【CSS】transformでコンテンツを回転させる方法

前回は、transform で、特定のコンテンツを自由に配置させる方法を紹介しました。 今回は、transform で、コンテンツを回転させる方法を紹介します。 基本のコードは、以下になります。 コンテンツを回転させる コンテンツを回転させるには、 transform…

続きを読む
2021年07月04日5 分
HTML&CSS

【CSS】transformで、特定のコンテンツを自由に配置させる方法

続きを読む
2021年07月03日5 分
HTML&CSS

【CSS】擬似要素::before、::afterとは何ですか?

CSS でコーディングしている時、タグやクラスなどのセレクタの後に『::before』『::after』が付いてスタイルが書かれている時があります。 これは一体何なのでしょうか? 今回は、CSS の擬似要素である、::before、::after…

続きを読む
2021年07月01日5 分
HTML&CSS

【CSS】画像のサイズを均等にして、適切な位置に修正する方法

続きを読む
2021年06月30日5 分
HTML&CSS

【CSS】テキストやコンテンツに影をつける方法

今回は、テキストやコンテンツに影をつけて、立体的に見せる方法を紹介します。 基本のコードは、以下になります。 テキストに影をつける テキストに影をつける場合は、 text-shadow で指定します。 ブラウザで確認すると、 テキストに、影がつきました。 今回、 text…

続きを読む
2021年06月28日5 分
HTML&CSS

【CSS】最初や最後、何番目などにスタイルを指定する方法

続きを読む
2021年06月27日10 分
HTML&CSS

【CSS】マウスカーソルを載せると、コンテンツの色や形を変える方法

続きを読む
2021年06月26日5 分
HTML&CSS

【CSS】スタイルに変数を指定する方法

ウェブサイトを制作している時、色やサイズを使い回したいこと、ありませんか? 今回は、CSS でスタイルに変数を指定する方法を紹介します。 基本のコードは、以下になります。 変数の設定方法 CSS…

続きを読む
2021年06月25日5 分
HTML&CSS

【CSS】:root擬似クラスセレクターの使用方法

他の方が制作したウェブサイトを確認すると、CSS に :root で指定している時があります。 :root とは、何なのでしょうか? 今回は、 :root 擬似クラスセレクターの使用方法を紹介します。 基本のコードは、以下になります。 :root は HTML…

続きを読む
2021年06月24日5 分
HTML&CSS

【CSS】webkitやmozって何でしょうか

ウェブを制作していてサイトを調べている時、『webkit』や『moz』が頭についている CSS を見かけます。 これは、ベンダープレフィックスと言って、昔のブラウザで対応していない CSS の機能を対応させるために使用します。 例えば、 background-image: url…

続きを読む
2021年06月23日5 分
HTML&CSS

【CSS】背景画像上に表示しているテキストを見やすくする方法

続きを読む
2021年06月22日5 分
HTML&CSS

【CSS】背景色をグラデーションにする方法

サイト制作のとき、ボタンなどの色をグラデーションにしたい場合、ありませんか? 今回は、背景色をグラデーションにする方法を紹介します。 基本のコードは、以下になります。 背景色をグラデーションする 背景色をグラデーションにするには、 linear-gradient…

続きを読む
2021年06月21日10 分
HTML&CSS

【CSS】画面がスクロールしても背景画像が固定する方法

続きを読む
2021年06月20日5 分
HTML&CSS

【CSS】背景に画像を設定する方法

ウェブサイトを制作している時、背景に色を付けるのは、 background-color…

続きを読む
2021年06月19日10 分
HTML&CSS

【CSS】コンテンツを横に並べることができる、インラインブロックの使い方

続きを読む
2021年06月17日5 分
HTML&CSS

【CSS】box-sizingでスマホのレイアウトデザインが崩れない方法

パソコン画面でデザイン通りサイトを制作しても、スマホ画面時にレイアウトが崩れてしまうこと、ありませんか? 今回は、box-sizing でスマホのレイアウトデザインが崩れない方法を紹介します。 基本のコードは、以下になります。 3 つのボックスがあります。…

続きを読む
2021年06月16日10 分
HTML&CSS

【CSS】Flexboxでコンテンツ全体の位置を指定する方法

前回は、Flexbox で横に増えたコンテンツを折り返す方法を紹介します。 今回は、Flexbox でコンテンツ全体の位置を指定する方法を紹介します。 Flexbox とは Flexbox とは、コンテンツを簡単に整列することができる CSS のモジュールです。 Flexbox…

続きを読む
2021年06月11日15 分
HTML&CSS

【CSS】Flexboxで横並びのコンテンツを折り返す方法

前回は、Flexbox でコンテンツを個別に整列する方法を紹介しました。 今回は、Flexbox で横に増えたコンテンツを折り返す方法を紹介します。 Flexbox の構造は、下の図の通りです。 親要素である Flex コンテナーがあり、その中に子要素である Flex…

続きを読む
2021年06月10日5 分
HTML&CSS

【CSS】Flexboxでコンテンツを個別に整列する方法

前回は、Flexbox の設定やコンテンツ全体を整列する方法を紹介しました。 今回は、Flexbox でコンテンツを個別に整列する方法を紹介します。 Flexbox の構造は、下の図の通りです。 親要素である Flex コンテナーがあり、その中に子要素である Flex…

続きを読む
2021年06月09日15 分
HTML&CSS

【CSS】Flexboxでコンテンツを簡単に整列する方法

Flexbox とは Flexbox とは、コンテンツを簡単に整列することができる CSS のモジュールです。 Flexbox の構造は、下の図の通りです。 親要素である Flex コンテナーがあり、その中に子要素である Flex…

続きを読む
2021年06月08日15 分
HTML&CSS

CSSで上付きや下付きの文字を整える方法

ウェブサイトを制作しているとき、平方メートルを表示しようとしたら、『15m2』となってしまったこと、ありませんか? また、化学式を表示しようとしたら、『CO…

続きを読む
2021年06月07日5 分
HTML&CSS

CSSで、特定のセクションのみ左右のスペースをなしにする方法

通常は、サイトの左右にスペースがある状態にしたいけれど、特定のセクションのみ横いっぱいに広げたいこと、ありませんか? 今回は、特定のセクションのみ左右のスペースをなしにする方法を紹介します。 例えば、次の画像のレイアウトがあるとします。 このレイアウトは、左右に margin…

続きを読む
2021年06月02日10 分
HTML&CSS

CSS Gridレイアウトでコンテンツに合わせてサイズ指定をする方法

前回は、Grid レイアウトで Grid エリアを使ってコンテンツを配置する方法を紹介しました。 今回は、Grid レイアウトでコンテンツに合わせてサイズ指定をする方法を紹介します。 基本のコードは、以下になります。 サイズを固定する方法は、 grid-template-rows…

続きを読む
2021年05月31日10 分
HTML&CSS

CSS Gridエリアを使ってコンテンツを配置する

前回は、Grid レイアウトでコンテンツの位置を調整する方法を紹介しました。 今回は、Grid レイアウトで Grid…

続きを読む
2021年05月30日10 分
HTML&CSS

CSS Gridレイアウトでコンテンツの位置を調整する

前回は、Grid レイアウトで作成したコンテンツの中に、さらに Grid レイアウトでコンテンツを作成する方法を紹介しました。 今回は、Grid レイアウトでコンテンツの位置を調整する方法を紹介します。 こちらを使用することで、グリッドの中一杯に広がっているコンテンツを、Grid…

続きを読む
2021年05月29日15 分
HTML&CSS

CSS Gridレイアウトの中に、さらにGridレイアウトでコンテンツを作成する方法

前回は、Grid レイアウトでコンテンツを自由に配置する方法を紹介しました。 今回は、Grid レイアウトで作成したコンテンツの中に、さらに Grid レイアウトでコンテンツを作成してみます。 基本のコードは、以下になります。 左上のコンテンツに、a から d…

続きを読む
2021年05月28日10 分
HTML&CSS

CSS Gridレイアウトでコンテンツを自由に配置する方法

前回は、Grid レイアウトの縦並びと横並びを紹介しました。 今回は、グリッドの線を使いグリッドの位置を指定して、コンテンツを配置する方法を紹介します。 こちらを使用することで、コードの記述順に囚われずにコンテンツを配置することができます。 グリッドの線の考え方 例えば、行が…

続きを読む
2021年05月27日15 分
HTML&CSS

CSS Gridレイアウト 基本編

今回は、Grid レイアウトを紹介します。 Grid レイアウトを使いこなすことができれば、コーディングが簡単を簡単にすることができます。 Grid レイアウトとは Grid…

続きを読む
2021年05月26日10 分
HTML&CSS

トップビューの画像をちょっと斜めにしてみる

トップビューの画像の形に趣向を凝らして、いつもと違った雰囲気にしたくなること、ありませんか? 今回は、トップビューの画像を斜めにする方法を紹介します。 例えば、次のトップビューがあったとします。 この画像を斜めにするには、トップビューの クラスに clip-path…

続きを読む
2021年05月22日10 分
HTML&CSS

Safariだけ、なぜかずれるスタイルを修正する方法

サイトを制作している時、Chrome と Safari でスタイルがずれてしまうこと、ありませんか? 今回は、Safari のみスタイルを修正する方法を紹介します。 例えば、下の画像では、CSS で全く同じスタイルを指定しているのですが、『Powered by Azukipan…

続きを読む
2021年05月19日10 分
HTML&CSS

テーブル表示のコンテンツを、スマホ画面は縦並びにする方法

サイト制作で table…

続きを読む
2021年05月18日10 分
HTML&CSS

HTMLを使って、狙った場所にリンクする方法

ウェブサイトで他のページに飛びたい場合、リンク元のタグに href="" を使ってリンク先を指定しています。 では、同じページ内の特定の場所にリンクしたい場合はどうすればいいでしょうか? 同じページ内の特定の場所にリンクする場合も、 href…

続きを読む
2021年05月06日10 分
HTML&CSS

tableタグを使わずに、表を作成する方法

HTML で表を作成している時、何らかの事情で table タグが使えない状況に出くわしたことは、ありませんか? その状況で、表を作成しなければならなくなったことは、ありませんか? 今回は、table タグを使わずに、表を作成する方法を紹介します。 table…

続きを読む
2021年05月02日10 分
HTML&CSS

文字などをCSSで上下・左右に寄せる方法

CSS で文字を text-align:center; や vertical-align:middle; で寄せてみたけれど、中央に寄らなかったことはありませんか? 今回は、CSS…

続きを読む
2021年04月21日15 分