記事一覧

【CSS】リンク(aタグ)の下線を消す方法

この記事では,CSSでリンクの下線を消す方法について説明します。 リンクの下線を消す方法リンクは特に何も指定していない場合, リンク ↑のように表示されます。下線…

Jun
3週間前
1

【CSS】calcはレスポンシブ対応に便利!

calcとはcalc()とは,プロパティの値を指定する際に計算式を使うことが出来る関数のことです。 単位を揃える必要はなく,px,%,rem,vwなどの相対単位でも,異なる単位…

Jun
3週間前

CSSだけで画像のトリミングができる!「object-fit」の使い方

object-fitとは「object-fit」とは,CSSで画像をトリミングすることができるプロパティです。画像のサイズが実際に表示したいサイズと異なる場合でも,キレイに画像を表示…

Jun
3週間前
2

Flexboxの使い方

Flexboxの基本Flexboxとは Flexbox(Flexible Box Layout Module)とは,親要素に指示を記述することで,複数の子要素についてさまざまなレイアウトの調整をまとめて行うこ…

Jun
3週間前

【無料プログラミング勉強】初心者におすすめの勉強法

私が実際に使用して役に立ったサイトや勉強方法をご紹介します。 参考になれば嬉しいです。 Progate(プロゲート)無料の範囲でも、プログラミングの基礎をしっかり学ぶ…

Jun
9か月前
4

【CSS】リンク(aタグ)の下線を消す方法

この記事では,CSSでリンクの下線を消す方法について説明します。 リンクの下線を消す方法リンクは特に何も指定していない場合, リンク ↑のように表示されます。下線を消したいaタグに対して,以下のように指定してみましょう。 a { text-decoration: none;} そうすると,下線が消えます。 リンクにカーソルを合わせた時だけ下線を表示させる方法カーソルを合わせた時に,リンクの下線を表示させるためには以下のように追加で指定します。 a:hover

【CSS】calcはレスポンシブ対応に便利!

calcとはcalc()とは,プロパティの値を指定する際に計算式を使うことが出来る関数のことです。 単位を揃える必要はなく,px,%,rem,vwなどの相対単位でも,異なる単位の計算式で値を指定することができます。 これは,レスポンシブ対応の時に非常に便利な点です。 なお,calcは calculation(計算)の略称です。 使い方計算式では,四則演算(加算+,減算-,乗算*,除算/)が使用できます。 演算子(+,-,*,/)を半角スペースで区切ります。※乗算や

CSSだけで画像のトリミングができる!「object-fit」の使い方

object-fitとは「object-fit」とは,CSSで画像をトリミングすることができるプロパティです。画像のサイズが実際に表示したいサイズと異なる場合でも,キレイに画像を表示することができます。 記述方法まずは,画像に対して何も設定していない状態を見てみましょう。 HTML <div class="container"> <div class="container-item"> <img src="img/alison-pang-6tpNcE18W-M

Flexboxの使い方

Flexboxの基本Flexboxとは Flexbox(Flexible Box Layout Module)とは,親要素に指示を記述することで,複数の子要素についてさまざまなレイアウトの調整をまとめて行うことができるものです。 Flexboxで出来ること 横並びにする 要素の順番を変える スペースを自由に変える レスポンシブ対応にも便利 記述方法 まずは,Flexboxを使わない場合を想定してみます。 HTML <div class="containe

【無料プログラミング勉強】初心者におすすめの勉強法

私が実際に使用して役に立ったサイトや勉強方法をご紹介します。 参考になれば嬉しいです。 Progate(プロゲート)無料の範囲でも、プログラミングの基礎をしっかり学ぶことができます。 イラスト中心の説明で分かりやすく、すぐに例題で実践できます。 プログラミングを全く勉強したことがない方も、是非一度お試しください。 「なんとなく面白そう」「全く興味が湧かない」など本格的に勉強し始めるか考える判断材料の一つになると思います。 本格的に勉強したい方は有料プランで様々な言語を