このてがろぐのRSSフィードが数日ほどエラーになっていました。現在は復旧しています。
購読いただいている方々にはご迷惑をおかけしてしまい、申し訳ございませんでした。
購読いただいている方々にはご迷惑をおかけしてしまい、申し訳ございませんでした。
HEX値（
- uchū
サイト内のカラー要素をクリックするとコピーができるので、CSSで以下のように記述できます。
また、GitHubの「uchū」リポジトリからCSSファイルをダウンロードして、値をCSS変数（
以下は参考情報です。
#からはじまる16進数のカラーコード値）よりもよりきれいな色を表現できるOKLCH値のカラーパレットサイト。「uchū」は日本語の「宇宙」とのことです。- uchū
サイト内のカラー要素をクリックするとコピーができるので、CSSで以下のように記述できます。
/* CSS記述例 */
p {
color: oklch(95.8% 0.023 354.27);
}また、GitHubの「uchū」リポジトリからCSSファイルをダウンロードして、値をCSS変数（
var()）で指定することも可能です。以下は参考情報です。
てがろぐの投稿フォームにも実装されている「ファイル選択」フォーム。このフォームの「ファイルを選択」というボタン（ブラウザによって「選択」など名称が異なります）は、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
WordPress6.8.3が公開されました。
本バージョンは直近で発見された脆弱性などが修正されているので、WordPressを利用されている方はアップデートすることをおすすめします。
ダウンロード – WordPress.org 日本語
アップデートの際は、事前にWordPress本体とDBのバックアップをお忘れなく。
以下は英語の情報ですが、直近の脆弱性についての情報が掲載されています。ご参考まで。
本バージョンは直近で発見された脆弱性などが修正されているので、WordPressを利用されている方はアップデートすることをおすすめします。
ダウンロード – WordPress.org 日本語
アップデートの際は、事前にWordPress本体とDBのバックアップをお忘れなく。
以下は英語の情報ですが、直近の脆弱性についての情報が掲載されています。ご参考まで。
このコンテンツの右下に表示される「ページ上部へ戻る」ボタンでも表示している三角形は、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の解説ページとブラウザ対応状況です。ご参考まで。
【2025年9月の振り返り】
今月は以下の記事を更新しました。
Basic認証の用途として利用シーンの多い「Basic認証＋IP制限の併用」（記事内では特定のIPアドレスでのアクセスではBasic認証を除外）と、Basic認証下の「特定のディレクトリに対してBasic認証を除外する」方法を追加しています。
また、HTMLハンズオン＆リファレンス（β）については見た目の方を随時調整しています。
内容については1ページの分量が多く読みづらさもあるということを公開後に感じたため（書いてる最中は気づかないものですね…）、もうすこし細分化して1ページを読みやすくするように構成中です。また、追加で補足が必要かもと感じる部分もあるため、こちらもあわせて作業中です。
サイト全般としては、note.parts-tips.comのコンテンツ新設に伴い、サイトトップページの免責事項やサイトマップなどを見直しています。
今月は以下の記事を更新しました。
Basic認証の用途として利用シーンの多い「Basic認証＋IP制限の併用」（記事内では特定のIPアドレスでのアクセスではBasic認証を除外）と、Basic認証下の「特定のディレクトリに対してBasic認証を除外する」方法を追加しています。
また、HTMLハンズオン＆リファレンス（β）については見た目の方を随時調整しています。
内容については1ページの分量が多く読みづらさもあるということを公開後に感じたため（書いてる最中は気づかないものですね…）、もうすこし細分化して1ページを読みやすくするように構成中です。また、追加で補足が必要かもと感じる部分もあるため、こちらもあわせて作業中です。
サイト全般としては、note.parts-tips.comのコンテンツ新設に伴い、サイトトップページの免責事項やサイトマップなどを見直しています。
こんにちは。Parts & Tipsのヤマツです。てがろぐを設置したので、今後はこちらを随時更新していこうと思います。
RSSフィードも配信しているので、よろしければ購読ください。
あまり用途を限定すると制約ができてしまうのですが、サイトのことやサイト制作のことをいろいろ、ゆるくつぶやいていこうと思います。ひきつづきよろしくおねがいいたします。
※Parts & Tips出張所はしばらく残しています（後日サイト内にリンク集として統合予定です）
Parts&Tips 出張所｜しずかなインターネット
RSSフィードも配信しているので、よろしければ購読ください。
- 公開・更新記事の補足
- ちょっとしたサイト制作tips（記事にするほどのものではない軽めのものなど / 後日記事としてまとめる可能性あり）
- 便利サイトなどご紹介（しずかなインターネットの投稿から移行）
- 毎月の振り返り（pixivFANBOXから移行） など
あまり用途を限定すると制約ができてしまうのですが、サイトのことやサイト制作のことをいろいろ、ゆるくつぶやいていこうと思います。ひきつづきよろしくおねがいいたします。
※Parts & Tips出張所はしばらく残しています（後日サイト内にリンク集として統合予定です）
Parts&Tips 出張所｜しずかなインターネット
【note.parts-tips.comについて】
Parts & Tipsの更新情報や記事の補足、ちょっとしたtipsなど、サイト制作に関することをメインに投稿しています。
当コンテンツはParts & Tipsのひとつであり、免責事項などは本サイトに掲載のものが適用されますので、あらかじめご了承ください。
当コンテンツ内の個別記事へのリンクもご自由にしていただいて問題ありません。サイトとしてリンクを貼っていただける場合は、Parts & Tipsトップページにリンクしていただけますと幸いです。
どうぞよろしくおねがいいたします。
Parts & Tipsの更新情報や記事の補足、ちょっとしたtipsなど、サイト制作に関することをメインに投稿しています。
当コンテンツはParts & Tipsのひとつであり、免責事項などは本サイトに掲載のものが適用されますので、あらかじめご了承ください。
当コンテンツ内の個別記事へのリンクもご自由にしていただいて問題ありません。サイトとしてリンクを貼っていただける場合は、Parts & Tipsトップページにリンクしていただけますと幸いです。
どうぞよろしくおねがいいたします。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。内容そのものに変更はありませんが、説明がわかりづらい箇所や読みにくいところ、それぞれの要素について、加筆修正を行なっています。
他のページも見直し・加筆修正中です。
よろしくおねがいいたします。