技術書典19出展用の原稿を脱稿しました。審査に出しているので、問題なければ会期中は技術書典のマーケットからお求めいただけます。
会期後はBOOTHでの通頒を予定しています。
詳細は改めますが、とりいそぎ。
会期後はBOOTHでの通頒を予定しています。
詳細は改めますが、とりいそぎ。
本日以下のページを更新しました。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
内容そのものに変更はありませんが、これまでひとまとめにしていたリセットCSSとベースのページは、それぞれでページを分けました。そのほかのページも若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。
また、ページを分けたので、サンプルコードの配布ファイルも構成を変更しています。内容そのものに変更はありませんが、必要であればダウンロードのし直しをお願いします。
本日の更新をもって、ハンズオン「1ページの簡易プロフィールページを作成する」はいったん更新終了となります。
また時間はかかってしまいますが、別のハンズオン記事も製作中です。引き続きよろしくお願いいたします。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
- 3. スタイルシートを書く
- 3-1. リセットCSSを準備する
- 3-2. ベースをつくる
- 3-3. header部分のCSSを書く
- 3-4. main部分のCSSを書く
- 3-5. footer部分のCSSを書く
- 3-6. スマホでの見た目を調整する
- おわりに
内容そのものに変更はありませんが、これまでひとまとめにしていたリセットCSSとベースのページは、それぞれでページを分けました。そのほかのページも若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。
また、ページを分けたので、サンプルコードの配布ファイルも構成を変更しています。内容そのものに変更はありませんが、必要であればダウンロードのし直しをお願いします。
本日の更新をもって、ハンズオン「1ページの簡易プロフィールページを作成する」はいったん更新終了となります。
また時間はかかってしまいますが、別のハンズオン記事も製作中です。引き続きよろしくお願いいたします。
10月の振り返りができていないのですが、11月分とまとめて振り返ります。
てがろぐ用スキンなどを配布されているpipiのひたきさまが主催されている「個人サイトを語ろう Advent Calendar 2025」の21日目（12/21）に参加させていただきます。
当サイトのことや今後予定していることなどを書く予定です。
とのことなので、個人サイトを持っていて興味がある方はぜひ。
個人サイトを語ろう Advent Calendar 2025 - Adventar
当サイトのことや今後予定していることなどを書く予定です。
ご自分の創作性によって作られた一次創作/二次創作を取り扱っている個人サイトをお持ちの方。創作のジャンルは問いません。
とのことなので、個人サイトを持っていて興味がある方はぜひ。
個人サイトを語ろう Advent Calendar 2025 - Adventar
@12
技術書典は技術書オンリーの同人誌即売会です。個人のほか、大学のサークルやIT系企業などもサークル参加や協賛などされています（とらのあなさんなど）
今期は11/15 (土) 〜11/30（日）で開催されます。会期中はオンラインと、実地イベントは11/16（日）に池袋・サンシャインシティの展示ホールで開催されます。
サイトの作り方というようなものよりは、どちらかといえば技術的にも専門的なIT寄りのものや電子工作・ガジェット的なものが多いですが、マーケットを眺めているだけでも楽しいと思います。
技術書典は技術書オンリーの同人誌即売会です。個人のほか、大学のサークルやIT系企業などもサークル参加や協賛などされています（とらのあなさんなど）
今期は11/15 (土) 〜11/30（日）で開催されます。会期中はオンラインと、実地イベントは11/16（日）に池袋・サンシャインシティの展示ホールで開催されます。
サイトの作り方というようなものよりは、どちらかといえば技術的にも専門的なIT寄りのものや電子工作・ガジェット的なものが多いですが、マーケットを眺めているだけでも楽しいと思います。
本日以下のページを更新しました。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。内容そのものに変更はありませんが、説明がわかりづらい箇所や読みにくいところ、それぞれの要素について、加筆修正を行なっています。
他のページも見直し・加筆修正中です。
また、Blueskyのアカウントにておしらせのとおり、本ハンズオンの内容（今後残りの加筆修正文を含む）を書籍としたものを技術書典19にて頒布予定です。
書籍用にレイアウトが変わるのみで、内容そのものはサイトに掲載中とものとほぼ同様、また有料での頒布となりますが、お手元に置いておきたいという場合にご利用いただけますと幸いです。
オンラインでのサークル参加、物理本とPDF形式で頒布になります。
詳細決まりましたら改めてご連絡いたします。
よろしくおねがいいたします。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。内容そのものに変更はありませんが、説明がわかりづらい箇所や読みにくいところ、それぞれの要素について、加筆修正を行なっています。
他のページも見直し・加筆修正中です。
また、Blueskyのアカウントにておしらせのとおり、本ハンズオンの内容（今後残りの加筆修正文を含む）を書籍としたものを技術書典19にて頒布予定です。
書籍用にレイアウトが変わるのみで、内容そのものはサイトに掲載中とものとほぼ同様、また有料での頒布となりますが、お手元に置いておきたいという場合にご利用いただけますと幸いです。
オンラインでのサークル参加、物理本とPDF形式で頒布になります。
詳細決まりましたら改めてご連絡いたします。
よろしくおねがいいたします。
ヘッダーやサイドのメニューなど、画面スクロール時に特定の要素を固定したいという場合、これまではJavaScriptを使用して実装する必要がありましたが、現在はCSSのみで実装することが可能です。
以下はそれぞれ「ヘッダーを固定」「サイドメニューを固定」するHTMLとCSSのサンプルコードです。
【ヘッダー固定】
【サイドメニュー固定】
サンプルコードのCSSはレイアウトやデザインも含んでいますが、要素固定の鍵となるのは、それぞれ
サンプルコードでは位置を
なお、現時点では
以下は参考情報です。
以下はそれぞれ「ヘッダーを固定」「サイドメニューを固定」するHTMLとCSSのサンプルコードです。
【ヘッダー固定】
<div class="wrapper">
<header>
<h1>header</h1>
</header>
<main>
<p>main</p>
</main>
<footer>
<p>footer</p>
</footer>
</div>header {
margin-bottom: 2em;
padding: 1em;
background-color: #758a93;
position: sticky;
top: 0;
}
h1 {
color: #ecd5bc;
font-size: 1.5em;
text-align: center;
}
main {
margin-inline: auto;
padding: 1em;
color: #ecd5bc;
text-align: center;
background-color: #c66e52;
width: 90%;
height: 1000px;
}
footer {
margin-top: 2em;
padding: 1em;
color: #ecd5bc;
text-align: center;
background-color: #758a93;
}【サイドメニュー固定】
<div class="wrapper">
<header>
<h1>header</h1>
</header>
<main>
<div class="box_left">
<p>main</p>
</div>
<div class="box_right">
<p>side</p>
</div>
</main>
<footer>
<p>footer</p>
</footer>
</div>header {
margin-bottom: 2em;
padding: 1em;
background-color: #758a93;
}
h1 {
color: #ecd5bc;
font-size: 1.5em;
text-align: center;
}
main {
margin-inline: auto;
color: #ecd5bc;
text-align: center;
width: 90%;
display: flex;
align-items: flex-start;
}
.box_left {
margin-right: auto;
padding: 1em;
background-color: #c66e52;
width: 70%;
height: 1000px;
}
.box_right {
padding: 1em;
width: 20%;
background-color: #e9b63b;
position: sticky;
top: 0;
}
footer {
margin-top: 2em;
padding: 1em;
color: #ecd5bc;
text-align: center;
background-color: #758a93;
}サンプルコードのCSSはレイアウトやデザインも含んでいますが、要素固定の鍵となるのは、それぞれ
headerと.box_rightに記述している以下のCSSです。
position: sticky;
top: 0;positionは要素の配置を設定するプロパティで、stickyは「粘着性がある」という和訳のとおり、付箋のようなイメージです。初期配置は他の要素と同様ですが、画面が下方向にスクロールし position: sticky;が指定された要素に到達すると、その要素は指定した位置にとどまります。この状態で画面が上方向にスクロールされ、 position: sticky;が指定された要素が本来の表示位置に到達すると、以降上方向スクロール時は通常の要素と同様の挙動になります。サンプルコードでは位置を
top: 0;と指定しているので画面上部にピタッと吸い付きますが、上（top）、下（bottom）、左（left）、右（right）、あるいはまとめて（inset）位置指定が可能です。なお、現時点では
position: sticky;を指定した要素が「固定された状態」の場合にCSSを変更する（固定されたら背景色を変えるなど）ことができないので、この場合は position: sticky;を使用せず、JavaScriptを使用して固定する必要があります。以下は参考情報です。
- position - CSS: カスケーディングスタイルシート | MDN
- CSS position:sticky | Can I use... Support tables for HTML5, CSS3, etc
本日以下のページを更新しました。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。内容そのものに変更はありませんが、説明がわかりづらい箇所や読みにくいところ、それぞれの要素について、加筆修正を行なっています。
他のページも見直し・加筆修正中です。
よろしくおねがいいたします。
HTMLハンズオン＆リファレンス（β）「1ページの簡易プロフィールページを作成する」
若干の構成の見直し、情報の補足および加筆修正、誤字修正などを行なっています。内容そのものに変更はありませんが、説明がわかりづらい箇所や読みにくいところ、それぞれの要素について、加筆修正を行なっています。
他のページも見直し・加筆修正中です。
よろしくおねがいいたします。
このてがろぐのRSSフィードが数日ほどエラーになっていました。現在は復旧しています。
購読いただいている方々にはご迷惑をおかけしてしまい、申し訳ございませんでした。
購読いただいている方々にはご迷惑をおかけしてしまい、申し訳ございませんでした。
技術書典19に「宙駆ける出張所」というサークル名でオンラインサークル参加しています。
どうぞよろしくおねがいします。
頒布ページのサンプルは目次までしか載せられなかったので、章ごとのページも含んだサンプルPDFを用意しました。17MBほどあります。
https://note.parts-tips.com/assets/tech19_sample.pdf
物理本を購入いただくとPDFもついてきます。
■留意事項
どうぞよろしくお願いします。