友人がselectnaviという個人ブログを作りました。https://www.selectnavi.site/ 仕事に関する情報メディアです。
友人がselectnaviという個人ブログを作りました。https://www.selectnavi.site/ 仕事に関する情報メディアです。
本日のテーマは、 フォームのプレースホルダーの文字色を変更する方法です！ placeholder属性とは？ inputタグで実装できる入力フォーム内に 表示する文字のことです。 ＜サンプルコード＞ <input type="text" placeholder="Email Address"> 通常、placeholder属性で指定した文字の色は、 グレーっぽい色をし…
本日のテーマは、 アコーディオンをHTMLだけで実装する方法です！！ アコーディオンとは？ クリックすると隠されたメニューがヌルッと表示されることです！ ホームページとかではメニューの一覧を表示する際に使用してます。 実装方法 detailsとsummaryタグ…
本日のテーマは、 文章の下に波線を引く方法です！ 実装方法 CSSで「 table-layout: fixed;」を使用すればOKです！ 実際の使い方は下記の通りです。 sample{ table-layout: fixed;} この記述でセルの長さが均等になります。 この記述をしてないと、セルの長…
本日のテーマは、 文章の下に波線を引く方法です！ 実装方法 CSSで「text-decoration: underline wavy 色」を使用すればOKです！ 実際の使い方は下記の通りです。 sample{ text-decoration: underline wavy #ffff66;} アンダーラインを引くのは文章の一部だ…
本日のテーマは、 CSSで計算式を書く方法です！ 実装方法 CSSで「calc()」を使用し、カッコの中に計算式を書けばOKです！ 実際の使い方は下記の通りです。 sample{ width: calc(100% / 3 - 60px);} calc()を使用すれば 複雑な幅の設定も可能になるかと思いま…
本日のテーマは、 画像をトリミングする方法です！ 実装方法 CSSとして「object-fit: cover;」を指定すればOKです！ sample{ object-fit: cover; } このCSSを使えば画像をトリミングすることができます。
本日のテーマは、 ページ内リンクをクリックするとスクロールが スルスル動く方法です！！ 通常ページ内リンクを移動する際は、 一瞬でリンク先の表示へ変わります。 今回の方法では、 この一瞬で切り替わる動きを 画面がスルスルと移動するような動きに帰る…
本日のテーマは、 ul要素でリストマークの位置を指定する方法です！ 実装方法 結論、ul要素の属性値として 「list-style-position:outside;」か 「list-style-position:inside;」を指定すればOKです。 両者の違いを説明します。 「list-style-position:outsi…
本日のテーマは、 アニメーションの発動時間を指定する方法です。 CSSで「:hover」「:active」などを使用し要素に動きをつける際に、 要素がどれだけの時間をかけて動くのかを指定する方法です。 使用するプロパティ 結論から言うと、 transitionプロパティ…
本日のテーマは、 フォルダ名が日本語の場合に起きる問題とその対処方法についてです！ どのような問題が起こるのか？ 結論から言うと、 img要素などで画像を使用する場合にスクショのURLを認識しなくなります。 日本語を含む場合と含まない場合のURLは 下記…
本日のテーマは 要素を均等に並べる方法です！ 要素を均等に並べる方法 使うCSSは「justify-content:space-around;」です。 ＜サンプルコード＞ .sample{ display:flex; justify-content:space-around;} ※使用する際は「display:flex;」を使用することが必須…
本日のテーマは 要素を中央に寄せる方法3つです！ 要素を中央に寄せる方法3つ 要素を中央に寄せる方法は3つです！ パターン①：justify-content:center; パターン②：text-align:center; パターン③：margin:0 auto; それでは1つ使い方を見ていきます！ パター…
本日のテーマは 要素の横幅の上限を指定する方法です！ 実装方法 max-widthプロパティを使用すればOKです！ .sample{max-width:1170px;} max-widthを使用せずにいると 幅が大きくなると要素の幅もつられて伸びてしまいます。 それを防ぐためにmax-widthが有…
本日のテーマは 同じページの特定箇所へ移動する方法についてです！ 実装方法 <a href="#Sample">Sample</a><div id="Sample">Sample</div> まずはa要素でリンクを作ります。 要素内でリンクの移動を先を指定します。 指定の仕方は「#」をつけて「＃」の後に任意の名前をつけましょう。 次に移動先の要素を…
本日のテーマは 重なり順が下の要素をクリックする方法です！ どう言う時に使用するのか？ z-indexなどを使用して要素を前面に出した際に 背面になった要素が機能しなくなることがあります。 ※ボタンが反応しない、a要素が反応しないなど 使用するCSS（サン…
本日のテーマは フォントサイズの単位である「px」「em」の違いです。 px(ピクセル)とem(エム)の違いは？ 結論から言うと、 px(ピクセル)は絶対値のことで、em(エム)は相対値のことです。 pxで指定すれば、どんな状況でもフォントは指定した数値です。 一方…
本日のテーマは floatプロパティの解除方法です。 前提（floatプロパティ使用の注意点 通常、親要素の長さは子要素全体の長さになります。 ただし、floatをしようすると親要素の高さが0になります。 ※floatが「浮かす」という意味から小要素の長さが0になり…
本日のテーマは 画面の幅の上限を指定する方法です！！ 実装方法 max-wudthプロパティを使用すればOKです！ .sample{ max-width:960px; }
本日のテーマは Webページ全体を１枚のスクショに収める方法です！ 方法 以下の手順で操作してください。 １、スクショしたいページにいく ２、「F12」か「command」と「option」と「P」を押す ３、「command」と「shift」と「I」を押す ４、fullと入力→ente…
本日のテーマは、 要素が画面の横幅に収まらない場合の対処方法についてです。 ※本日のテーマはあくまで1つのケースのことです。 要素が画面に収まらない原因は他にもある可能性はあります。 どういう時に収まらなくなるのか？ 結論、paddingプロパティを使…
本日はメディアクエリについて書きます！！ メディアクエリとは？ メディアクエリとは、レスポンシブデザインを実装する時に使う言葉で 指定した画面の大きさの時に適応させたいCSSを記述するための機能です。 画面の大きさに応じて適応するCSSを調整できる…
本日は要素同士の重なりを調整する方法について 書きたいと思います！！ ある要素を画面上に固定などした時に 要素同士がかぶって表示される時があると思います。 そのような時の対処方法です。 実装方法 使用するプロパティはz-indexです。 z-indexプロパテ…
本日はレスポンシブデザインが上手く反応しない場合の対応について 書きたいと思います！ 確認すること①（viewportの記述がない） htmlのheadタグの中にviewportの設定してない場合は、 レスポンシブデザインは反応しないです。 もし設定してない場合は、以…
本日は要素をクリックした時にのみCSSを適応させる方法について 書きたいと思います！！ 実装方法 結論から言うと、セレクタに:activeを付ければOKです。 下記のようにします。 .sample:active{ background-color:red;}
本日はマウスを当てるとカーソルを変更する方法について 書きたいと思います！！ カーソルを変更するとは？ 例えば、矢印の形をしたカーソルをリンクに当てると カーソルの形が指の形に変わることはないでしょうか？ 実装方法 今回は3つのパターンを紹介しま…
本日はインライン要素を使用する際の注意点について 書きたいと思います！ インライン要素とは？ インライン要素は画面に横並びで表示される要素のことです。 よく使う要素で言えば、span要素やa要素などです。 横並びで表示されるというのがどう言うことか…
本日はHTML/CSSで要素の一部分だけを指定する方法について 書きたいと思います！ ■方法 span要素を使用すればOKです。 <h1>私は<span class="apple">りんご</span>です。</h1> 以上です。
本日は背景画像が繰り返し表示されるのを防ぐ方法について 書きたいと思います！ ■内容 background-imageなどで背景に画像を挿入しようとした時に 画像が繰り返し表示される時があるかと思います。 ※図1参照 ＜図1＞ ■対応方法 下記のプロパティを使用すれば…
