HTML/CSS– category –

本記事では、CSSで要素の左上・右上・右下・左下のみ角を丸くする方法について解説しています。 2通りの書き方があるので、使いやすい方を選んでください！ サンプルコード 色付き正方形が表示されるサンプルコードを用意しました。実際に手を動かしながら...

本記事では、borderの線を単色ではなくグラデーションカラーにする方法について解説しています。 グラデーションカラーにする方法 borderの線をグラデーションカラーにする、必要最低限のプロパティは以下のとおりです。 border-width：線の幅の指定 borde...

本記事では、borderプロパティで指定することが線の種類について紹介しています。 線の種類 線の種類・説明を載せたテーブル表を作成したので、ご参考ください！ 値説明solid実線double二重線dotted点線dashed破線groove立体的にくぼんだ線ridge内側全体が...

本記事では、CSSのborderプロパティで表示される枠線を上下左右ばらばらに指定する方法について解説しています。 上にだけ線を表示させる borderの線を上にだけ表示させるには「border-topプロパティ」を使用します。基本的な使い方は以下のとおりです。 /...

本記事では、CSSで要素の角を丸くする方法について解説しています。このテクニックを覚えることで、角ばったボタンから優しい印象の丸形ボタンなどを作れるようになります。 border-radiusの使い方 CSSで要素の角を丸くするには「border-radiusプロパティ...

本記事では、CSSのborderプロパティで表示させた枠線を内側と外側に設定する方法について解説しています。 サンプルコード テキストが改行されるサンプルコードを用意しました。実際に手を動かしながら確認したい人はこちらのサンプルコードをお使いくださ...

先輩！HTMLで画像を表示させる方法を教えてください！ 了解！それじゃあHTMLで画像を表示させる時によく使われる<img>タグの使い方について解説するね！ <img>タグの使い方 <img>タグの基本的な書き方は以下のとおりだよ！ <img src="...

本記事では、PCで表示させるときは文章を改行させ、スマホで表示させるときは文章を改行せずそのまま表示させるテクニックについて紹介しています。 逆パターンのPCは改行させず、スマホでは改行する方法も紹介しているから興味のある人は見ていってね！ P...

本記事では、HTML・CSS・JavaScriptなどでコメントアウトが効かない時の原因と対処法について解説しています。 二重にコメントアウトしている おそらくコメントアウトが効かない多くは、コメントアウトの中に更にコメントアウトを記述していることが原因で...

皆さんはHTML・CSS・JavaScriptでコメントアウトを使う時、いちいち「<!-- -->」「//」「/**/」を手書きで記述していないでしょうか？実は、2つのキーを同時押しすることで一瞬でコメントアウトができるショートカットキーが存在します。 手書きで記...