てがろぐの投稿フォームにも実装されている「ファイル選択」フォーム。このフォームの「ファイルを選択」というボタン（ブラウザによって「選択」など名称が異なります）は、CSSでスタイルの装飾が可能です。
以下はサンプルコードです。
ファイル選択フォーム（
以下は参考情報です。
以下はサンプルコードです。
<!-- HTML記述 -->
<input type="file" class="btn_custom">/* CSS記述 */
.btn_custom::file-selector-button {
padding: 0.25em;
color: #fff;
background-color: #000;
border: 1px solid #000;
border-radius: 5px;
}
.btn_custom:hover::file-selector-button {
color: #000;
background-color: #ccc;
}
ファイル選択フォーム（
<input type="file">）に対して、擬似要素である::file-selector-buttonを追加することで、そのスタイルを変更することが可能です。以下は参考情報です。
- ::file-selector-button - CSS: カスケーディングスタイルシート | MDN
- CSS selector: `::file-selector-button` | Can I use... Support tables for HTML5, CSS3, etc
このコンテンツの右下に表示される「ページ上部へ戻る」ボタンでも表示している三角形は、CSSで実装しています。
以下はそのサンプルコードです。
三角形のサイズ調整は
三角形の形は、
数値を変えたりすると三角形ではなくなりますが、それはそれで様々な形が生まれておもしろいので、いろいろ試してみてください。
以下は参考情報です。
以下はそのサンプルコードです。
<!-- HTML記述 -->
<div class="triangle"></div>/* CSS記述 */
.triangle {
background-color: #000;
width: 40px;
height: calc(tan(60deg) * 40px / 2);
clip-path: polygon(50% 0, 100% 100%, 0 100%); /* 上向き */
clip-path: polygon(0 0, 100% 50%, 0 100%); /* 右向き */
clip-path: polygon(0 0, 100% 0, 50% 100%); /* 下向き */
clip-path: polygon(0 50%, 100% 0, 100% 100%); /* 左向き */
}
.triangle { /* 正三角形 */
background-color: #000;
width: 40px;
height: calc(40px / 2 * tan(60deg));
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}三角形のサイズ調整は
40pxの部分を変更します。heightはcalc()に式を入れて、自動算出します（三角関数を使用します）三角形の形は、
clip-pathを使用します。このプロパティは対象の要素を指定した形でクリッピングします。三角形の場合はpolygon()（多角形）を使用し、三角形を定義します。数値を変えたりすると三角形ではなくなりますが、それはそれで様々な形が生まれておもしろいので、いろいろ試してみてください。
以下は参考情報です。
- clip-path - CSS: カスケーディングスタイルシート | MDN
- polygon() - CSS: カスケーディングスタイルシート | MDN
- CSS clip-path property (for HTML) | Can I use... Support tables for HTML5, CSS3, etc
このコンテンツの右下に表示される「ページ上部へ戻る」ボタンもそうですが、クリック（タップ）するとスルスルっと流れるようなアニメーションで画面がスクロールする挙動は、CSSで実装が可能です。
以下、そのコードです。
基本的にはそのページのページ内リンク全体に対してのスクロールの挙動となるため、
以前はJavaScriptで実装していたものですが、すこしまえのバージョンのブラウザからすでに対応済みなので、安心して実装できると思います。
ただスクロールアニメーションが追加されるだけでもサイトがいい感じに見えるので、ぜひ。
以下はこのプロパティのMDNの解説ページとブラウザ対応状況です。ご参考まで。
以下、そのコードです。
html {
scroll-behavior: smooth;
}scroll-behaviorはページ内リンクなどでスクロールが発生した際、その挙動を指定するプロパティです。初期値はautoです（初期値だとクリックするとアニメーションなくその箇所にすぐ移動します）基本的にはそのページのページ内リンク全体に対してのスクロールの挙動となるため、
html要素に対してCSSをあてます。以前はJavaScriptで実装していたものですが、すこしまえのバージョンのブラウザからすでに対応済みなので、安心して実装できると思います。
ただスクロールアニメーションが追加されるだけでもサイトがいい感じに見えるので、ぜひ。
以下はこのプロパティのMDNの解説ページとブラウザ対応状況です。ご参考まで。
以下はそれぞれ「ヘッダーを固定」「サイドメニューを固定」するHTMLとCSSのサンプルコードです。
【ヘッダー固定】
【サイドメニュー固定】
サンプルコードのCSSはレイアウトやデザインも含んでいますが、要素固定の鍵となるのは、それぞれ
headerと.box_rightに記述している以下のCSSです。positionは要素の配置を設定するプロパティで、stickyは「粘着性がある」という和訳のとおり、付箋のようなイメージです。初期配置は他の要素と同様ですが、画面が下方向にスクロールしposition: sticky;が指定された要素に到達すると、その要素は指定した位置にとどまります。この状態で画面が上方向にスクロールされ、position: sticky;が指定された要素が本来の表示位置に到達すると、以降上方向スクロール時は通常の要素と同様の挙動になります。サンプルコードでは位置を
top: 0;と指定しているので画面上部にピタッと吸い付きますが、上（top）、下（bottom）、左（left）、右（right）、あるいはまとめて（inset）位置指定が可能です。なお、現時点では
position: sticky;を指定した要素が「固定された状態」の場合にCSSを変更する（固定されたら背景色を変えるなど）ことができないので、この場合はposition: sticky;を使用せず、JavaScriptを使用して固定する必要があります。以下は参考情報です。