ソースコードに関する特設ページ

ファンサイト制作のためのアトリエ

ライザとアナデンのコラボは素晴らしかったと思います！
fear戦のBGMなんか、ぶっ飛んでたよ。
もう何度も何度も聞いてます。
これはテンションが上がってしまったので、単なる感想文であったり、はたまた攻略一辺倒な記事とは一線を画すようなWebページを作りたいと強く感じました。
そこで何をやろうか考えていたのですが…ネタバレの懸念もありますし…

まず、ライザのアトリエに関する公式サイトには次のようなものがありますね。

ライザ、めっちゃ可愛いよね✨

さてさて、せっかくこのように自由にUIを実装できるファンサイトを作っているのですから、それを最大限活かしていきましょう！
アナザーエデンのゲーム内 ─ 具体的にはステータス画面 ─ にも登場するようなタブUIを実装しつつネタバレを回避し、私個人としても柔軟にゲームのことを書けるような…

そういう、ファンサイトの制作プロセスを作れる「アトリエ」を、ここに実装します。

「何を入れるのがいいかなぁー」
「これでいいかな！」
「やったぁー！できた！」
みたいな感じで、ライザみたいにWebサイトを調合しようかと！

関連ページ：アナザーエデンのプログラミングを個人サイトで試す

🌟ソースコードのアトリエ

このサイトを構成するのに必要なコード・リストと、それらの解説ページへジャンプできるリンクです。
どっちみち全てのコードについて学生時代のノートから移してくるつもりなので、基盤システムを書いてあるページと行き来できるようにしてあります。
学生時代はこういうことができなかったのですよ。
自分がやりやすいようなUIを整えた上で、システムとソースコードの管理を行う。
これができなかった…

でもこれからは違います。
アナデンライザコラボは、私にとって大切な思い出となりましたね！
錬金術やってるライザを見なければ、こういう方向の着想に至らなかった。

「ないなら作ればいい！」
この姿勢、めっちゃかっこいいです！

このサイトを作っているコード

CSS

JavaScript

Python

リンクをタップすると、コードの解説ページへジャンプします。

基礎デザインをまとめるstyle.css

カテゴリー分けしたcss

pdf.css デフォルトでPDFをプレビュー表示する
addpdf.css 複数のPDFがある場合
video.css（通常版・Google Drive版）動画を掲載する
flower.css 写真を飾る
album.css イラストアルバムを作る
collapsible.css 折り畳みエリアを作る
symbol.css バナーをCSSで作成する

編集中のcss

colors.css
feinheadline1.css
feinpan.css
footer.css
header.css
imgcut.css
lua.css
menu.css

システムの解説ページ👉：基礎的なシステムとルール

リンクをタップすると、コードの解説ページへジャンプします。

pdf.js デフォルトでPDFをプレビュー表示する
addpdf.js 複数のPDFがある場合
video.js（通常版・Google Drive版はJS不要）動画を掲載する
album.js イラストアルバムを作る
collapsible.js 折り畳みエリアを作る
feinfade.js 画像のフェードイン＋アウトのアニメーションを作る
feinScroll.js スクロールを追いかけるボタンを実装する
※及びトップ画像のスクロールアニメーション

color.js
common.js
feinheadline1.js
imgcut.js
menu.js
tab.js
underline.js

brython.js（このページにもあるJSツール）
brython_stdlib.js（このページにもあるJSツール）
fengari-web.js（このページにもあるJSツール）

システムの解説ページ👉：基礎的なシステムとルール

リンクをタップすると、コードの解説ページへジャンプします。

pdfimg.py PDFを高解像度の画像に変換する
※昔から作ってきたアナデンのPDFレポート。
あれで大活躍していたスクリプトです。
105trimming.py 左側のみ105ピクセル分トリミングする
file_list.py 画像のファイル名をまとめて確保する
image_aspect_compression_middle50.py 画像のサイズをまとめて縮小する
別コードパターンの解説
mp4mini.py 動画をエンコードする
jpgpng.py jpgをまとめてpngにする
1hide.py １つの画像にメッセージを隠す
hidemessage.py 隠されたメッセージを確認する
all_hide.py フォルダ内の画像全てにまとめてメッセージを隠す
all_hidemessage.py フォルダ内にある全て画像に隠されたメッセージを確認する
sliceimg.py 画像をスライスしてhtmlも出力する
pngmetadata.py メタデータをまとめて入力するプログラム
pngmetacheck.py メタデータをまとめてチェックする
textnoise.py ノイズを加えるプログラム
table.py Excelの表をhtmlにする
pdf.py PDFをまとめて圧縮する
pdfocr.py PDFがテキストベースになっているかチェックする
pdfhtml.py 大量のハイパーリンクをまとめて記述する
pdfpreview.py PDFプレビューボタンhtmlを書く
image_size.py 複数画像の大きさをまとめて調査する
flower_resize.py 複数画像のファイルサイズをまとめて変更する
image_aspect_compression_big80.py 複数画像をまとめて80%小さくする
image_aspect_compression_small20.pyは数字を変えるだけです
image_add.py 複数の画像が並ぶWebページを作成する

file_space.py
file_sum.py
htmlall.py

システムの解説ページ👉：基礎的なシステムとルール

このタブUIですが、既にこのページのいろんな所に使われています。
当然のことながら、既にAI学習や無断転載を防ぐプログラムの小ネタ集にて実装している青色のタブUIとともに、今後もいろんなページで使えるものとなりました。
ただ単にPython使うなら、FlaskやDjangoのほうが一般的なんだけどね。
でもそれだとWebサイトの引っ越ししたくなった時に支障が出る可能性もあるのです。

ビジュアルアトリエコード

私の開発環境は「ビジュアルアトリエコード」です🎨✨
なーんて、半分冗談なんだけどね。
でもAtelierとStudioは同じような意味だから、言語が混ざっているだけで通りますよ。
実際はVisual Studio Codeをカスタマイズしただけです。
リアルの私は錬金術を使えないので、せめてWeb制作でライザごっこをしてみようかと！

Visual Studio CodeはMicrosoftのコードエディターですが、拡張機能のインストールと設定ファイルの記述で背景画像を付けられます。

Visual Studio(Atelier) Codeのsettings.json

settings.jsonはVS Codeの設定ファイルです。
Windowsなら多くの場合、C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json という位置にあると思います。
ここの編集が必要なんだよね。
今回、自分の開発環境でライザごっこをするにあたり、次のようにコードを編集しました。


{
 "extensions.ignoreRecommendations": true,
 "editor.fontFamily": "'Yu Gothic UI', 'Courier New', monospace",
 "workbench.settings.applyToAllProfiles": [
  "editor.fontFamily"
 ],
 "editor.fontLigatures": false,
 "editor.wordWrap": "on",
 "files.insertFinalNewline": true,
 "editor.formatOnSave": true,
 "files.trimFinalNewlines": true,
 "files.trimTrailingWhitespace": true,
 "breadcrumbs.enabled": true,
 "workbench.tree.renderIndentGuides": "always",
 "editor.tabSize": 1,
 "editor.insertSpaces": true,
 "editor.autoIndent": "none",
 "editor.detectIndentation": false,
 "background.fullscreen": {
  "images": [
   "file:///C:/Users/ユーザー名/OneDrive/_fein/英数字.jpg"
  ],
  "opacity": 0.1,
  "size": "900 900",
  "position": "center",
  "interval": 0
 }
}

普段使いするツールの設定ファイルだから、コメントアウトは付けていないです。
ここも詳説しようかと思ってたけど、VS Codeを扱うレベルの人なら大丈夫でしょう。
CSSとの共通点も多いです。

参考サイト一覧

勉強になりました。ありがとうございます。

道具を組み合わせるWeb制作と錬金術

ライザの様子を見ていて思ったのは、Web制作と錬金術って似ている側面が多いなということなんです。
どちらも材料を組み合わせて調合し、何かしらの形を作っていきます。
何を選ぶかは自由が利くこともあるし、そうでないこともある。
レベルが上がれば上がるほどいろんなことができるようになって…
そんなことを感じながらアナデンのライザコラボを夢中でプレイしていました。

せっかくなら、思いっきりライザにあやかったWebページの在り方にしてみたいと思ったんだよね。

何を入れるのがいいかなぁー

ここは2段構えでいきたいんですよね。

錬金術はできないけど、その代わりにWeb制作のジャンルでライザごっこ
ライザのアトリエコラボのゲームコンテンツ

HTML・CSS・JavaScript・Python・Lua、Google Cloud App Engine・Azure Static Web Appsなどなど。
Web制作に使える材料はたくさんあります。
その中から必要なものを選んで錬成していく過程は、ライザごっこにぴったりじゃない？！

これでいいかな！

ちゃんと裏ボスなりストーリーなり、直接ゲームのことも書くからね？
フォロワーさんの中には「忙しくてまだプレイできていない…」という人もいたから、まずはWeb制作について書いていきます。

何より私がライザごっこやりたくて仕方ないからね😆ww
錬金術はファンタジーですが、Web制作と重なる部分がとても多いと感じるんだよ。
大きな鍋がWebサーバーだもん。

ゲーム部分の攻略等は、時間を経るとどうしても色褪せてしまいます。
ライブサービスゲームだからそれは仕方ないんだけど、旬なうちに楽しむということは、旬が過ぎればそれまでということでもある。
ネタバレの懸念も薄まるように、そして自分にとって良い思い出となるように、時間の経過を見つつ順次ゲームネタを書いていきましょう。

やったぁー！できた！

Pythonのコードネタは学生時代の勉強ノートから引っ張ってきたものです。
当時はコードを書けても、私がフロントエンド・バックエンドの関連性を十分に理解できておらず、実装することができなかったのですよ。
自分のパソコンで動作させるのが精一杯。
こうしてWeb公開にまで至らなかった。

せっかくですから、このWebページの紹介文をタブUIに書いてみましょう。

このページのご案内

構成

内容

将来

このページの構成としては、次の通りです。

ライザごっこをしながら、Webサイトのパーツを次々と作ります
まるで錬金術をしているみたいに、いろんな技術の組み合わせを試みます
アナデンのライザコラボについて、ストーリーの感想や裏ボス撃破の様子なども添えていきます

ゲームネタだけだと、どうしてもWebページの寿命が短くなってしまいます。
でもWebサイトのパーツを作るための「アトリエ」としての機能を持たせるなら、推しのライザと自分の好きな活動を結び付けつつ、寿命も長いWebページにできるじゃない。

このページの具体的な内容としては、まずはPythonを使ってタブUIの実装を試みます。
今ご覧になっているようなUIのことです。
このようなタブUIは、既存のホームページ作成サービスやブログ作成サービスではなかなか見られません。
機能そのものが実装されていないんだよね。
プルダウンメニューとかはよく見るけど、タブを作った上でコンテンツを詰め込めるような動きが機能として添えられているものが少ないです。

こういうちょっと凝ったUIの実装は、手書きコードによる静的ウェブサイトならではだと思います。

将来と言っても…何でもできると思いますね。
Web制作のアトリエとして機能させるページとするのは変わりませんが、細かい中身に関しては次々と他ページへ移動させたって良いのだから。
それこそ、アナザーエデンがエンディングを迎えた後であっても、活きたWebページとして運用し続けることができますよ。
あれもやってみよう。これもやってみよう。みたいな、技術的な「冒険」を試みていくページにすればいい。
そんなアトリエの片隅にライザと冒険したときの思い出が書いてあるわけです。

ゲームの攻略情報としては色褪せていくけど、こういうページを作れたきっかけとして、その場に置いておけるってことですね。

PythonでタブUIを実装する

ライザのアトリエと言うからには、試行錯誤の上での調合とその成功をテーマにしていきたいですね。
ルドヴィカの物語は多くのユーザーの気持ちを掴んだのでは？
まずはストーリーに直接触れなくて済む、タブUIの「調合」を、このアトリエで試みます。

ここで重要な「調合アイテム」は、Brython（ブリトン）です。
Pythonのシンプルな文法を使ってフロントエンドの機能を実装でき、JavaScriptを深いレベルで学ぶ必要がなくなります。
Pythonの知識だけでフロントエンド開発ができるツールなんですよね。
JavaScriptに比べると若干パフォーマンスが劣るようですが、軽微なUIなら支障はありません。
Pythonライブラリや機能にしても、全てを扱う必要はないのですから。

Brython（Browser Pythonの略）について

Pythonのコードを直接ブラウザ上で実行するためのライブラリです。
JavaScriptの代わりにPythonを使用してフロントエンド開発を行うことができます。
BrythonはPython 3の多くの機能をサポートしており、Pythonの標準ライブラリの一部も使用できます。
方法は単純で、アナデンで使われているLuaを動かした時と同じように、HTMLファイルにスクリプトタグを追加するだけです。

さっそくコードを見てみましょう。

BrythonのJSファイルを取得して関連付ける

アナデンで使われているLuaを実装した時と似ています。
ひとまず実行環境を用意してあげないと、Pythonがブラウザ上で動作しません。

Brythonをhtmlファイルと関連付けるコード


<head>
 <script src="/script/brython.js"></script>
 <script src="/script/brython_stdlib.js"></script>
</head>

もうHTML・CSS・JavaScriptによるサイト構築の基礎についてはご存じのものとして話を進めます。
ここはコード紹介というより、ライザにあやかってファンサイトのUIを作っていくアトリエだからさ。

上記のように設定することで、Brythonの主要な機能と標準ライブラリを含めることができます。
両方のファイルを使うとBrythonをフルに活用することができますよ。
JavaScriptファイルの設置場所は御自身のサイトに合うようにパスを修正してください。

まず、Brython公式サイトから、githubのBrythonリリースページへ移動します。
そのサイトから「Brython-3.13.0.zip」をダウンロードします。
zipを解凍すると、次のファイルが出てきます。

brython.js: Brythonの主要なスクリプトで、PythonコードをJavaScriptに変換して実行します。
これがなければ、Brythonは動作しません。
brython_stdlib.js: Brythonの標準ライブラリを含むスクリプトです。
Pythonの標準ライブラリの機能をブラウザ上で利用するために必要です。

インターネット越しにBrythonを使うこともできますが、自分のサイトのディレクトリに入れちゃった方が後がラクかと思います。

HTMLの中にPythonを含める

長くなるから、まだここではPythonまでは書かれていません。
いったんhtml部分のみ記載しています。
ポイントとなるのは、Brythonを使用してブラウザ内でPythonコードを実行しているところです。
DOMの操作やイベントハンドリングを行う構成としてみました。
JavaScriptはBrythonの初期化を行っているだけなので、主なロジックはPythonスクリプトに依存しています。

タブUIの骨組みとなるhtmlコード


<div class="atelier-container">
 <div class="atelier-tabs">
  <div class="atelier-tab" data-tab="1">Tab 1</div>
  <div class="atelier-tab" data-tab="2">Tab 2</div>
  <div class="atelier-tab" data-tab="3">Tab 3</div>
 </div>
 <div class="atelier-tab-content" data-content="1">Content for Tab 1</div>
 <div class="atelier-tab-content" data-content="2">Content for Tab 2</div>
 <div class="atelier-tab-content" data-content="3">Content for Tab 3</div>
</div>

<div class="atelier-container">
 <div class="atelier-tabs">
  <div class="atelier-tab" data-tab="4">Tab 4</div>
  <div class="atelier-tab" data-tab="5">Tab 5</div>
  <div class="atelier-tab" data-tab="6">Tab 6</div>
 </div>
 <div class="atelier-tab-content" data-content="4">Content for Tab 4</div>
 <div class="atelier-tab-content" data-content="5">Content for Tab 5</div>
 <div class="atelier-tab-content" data-content="6">Content for Tab 6</div>
</div>

<script type="text/python">
python部分はここではいったん省略
</script>

<script>
 window.addEventListener('load', () => {
  brython({ debug: 1, selector: ".atelier-container" });
 });
</script>

このコードの概要をざっと説明します。

HTMLの構造

タブコンテナ（.atelier-container）: 2つのタブコンテナがあり、それぞれに複数のタブ（.atelier-tab）とタブコンテンツ（.atelier-tab-content）が含まれています。
タブ（.atelier-tab）: 各タブは data-tab 属性で識別され、クリックすると対応するコンテンツが表示されます。
タブコンテンツ（.atelier-tab-content）: 各タブに対応するコンテンツで、data-content 属性によってどのタブに対応するかが示されています。

Pythonスクリプト（省略されている部分）

タブのクリックイベントを処理し、対応するタブコンテンツの表示・非表示を制御するロジックなどが含まれています。（後述します）

JavaScriptの部分

ページの読み込み時にBrythonが初期化され、.atelier-container 内でPythonコードが実行されます。
動作の流れとしては、次のような感じです。

ページが読み込まれると、Brythonライブラリが初期化されます。
各タブをクリックすると、Pythonスクリプトによって対応するタブコンテンツが表示されます。
非アクティブなタブコンテンツは非表示になります。

Pythonコードの紹介

いよいよここからPythonコードです。
個人的にはJavaScriptでタブUIを作るよりラクだと感じるけど、まぁ好みかな？
まずは簡単にさらーっと説明しますね。

タブ切り替えの説明

このコードは、タブをクリックすると、それに対応するコンテンツ（中身）を表示するものです。

タブを準備: タブ（ボタンみたいなもの）とその中身（コンテンツ）をまとめておきます。
タブをクリックすると: クリックされたタブを「アクティブ（選ばれた）」状態にして、そのタブの中身を表示するために準備します。
アニメーションをつける: タブの中身がスライドして出てくる動きをつけます。

全体の流れ

ページを読み込むときに、最初のタブとその中身を表示します。
それぞれのタブにクリックしたときの動きを設定します。
タブをクリックすると、そのタブの中身がスライドして出てきます。

これで、タブを切り替えるたびに対応する中身がアニメーションと一緒に表示されるようになります。

タブUIを作るPythonコード


from browser import document, timer

def show_tab(event):
 container = event.target.closest('.atelier-container')
 tabs = container.select('.atelier-tab')
 contents = container.select('.atelier-tab-content')

 for tab in tabs:
  tab.classList.remove('atelier-active-tab')
 for content in contents:
  content.classList.remove('atelier-active-content')
  content.style.transition = 'transform 1s ease-in-out, opacity 1s ease-in-out'
  content.style.transform = 'translateX(-100%)'
  content.style.opacity = '0'
  content.style.visibility = 'hidden'

 event.target.classList.add('atelier-active-tab')
 tab_id = event.target.getAttribute('data-tab')
 active_content = container.select(f'[data-content="{tab_id}"]')[0]
 active_content.classList.add('atelier-active-content')

 def show_content():
  active_content.style.visibility = 'visible'
  active_content.style.opacity = '1'
  active_content.style.transform = 'translateX(0)'

 timer.set_timeout(show_content, 50)

for container in document.select('.atelier-container'):
 tabs = container.select('.atelier-tab')
 if tabs:
  tabs[0].classList.add('atelier-active-tab')
  container.select('.atelier-tab-content')[0].classList.add('atelier-active-content')
  for tab in tabs:
      tab.bind('click', show_tab)

アニメーションについてはCSSでやっても良いと思うのですが、Luaと違ってPythonなら多少は慣れているので。
せっかくだからやってみましたよ。
ちなみにこのタブUIで用いられるJavaScriptとPythonコードは、１つのWebページにつき１カ所に書かれていれば良いです。
複数のタブを１つのWebページに実装しても、正常動作するようにしてあります。
では、ここからは少し詳しくいきます。

必要なモジュールをインポート


from browser import document, timer

document: ウェブページのDOM（Document Object Model）にアクセスするためのモジュールです。
timer: 時間を指定して関数を実行するためのモジュールです。

タブを表示する関数を定義


def show_tab(event):
    container = event.target.closest('.atelier-container')
    tabs = container.select('.atelier-tab')
    contents = container.select('.atelier-tab-content')

show_tab関数: タブがクリックされたときに呼び出されます。
event.target: クリックされたタブ要素を指します。
closest('.atelier-container'): クリックされたタブの親要素であるコンテナを取得します。
tabs: コンテナ内のすべてのタブを取得します。
contents: コンテナ内のすべてのタブコンテンツを取得します。

現在のアクティブなタブとコンテンツを非アクティブにする


for tab in tabs:
    tab.classList.remove('atelier-active-tab')
for content in contents:
    content.classList.remove('atelier-active-content')
    content.style.transition = 'transform 1s ease-in-out, opacity 1s ease-in-out'
    content.style.transform = 'translateX(-100%)'
    content.style.opacity = '0'
    content.style.visibility = 'hidden'

for tab in tabs: すべてのタブからatelier-active-tabクラスを削除します。
for content in contents: すべてのタブコンテンツからatelier-active-contentクラスを削除します。

ここで、タブコンテンツに対してアニメーション（スライドアウトとフェードアウト）を設定します。

クリックされたタブをアクティブにし、対応するコンテンツを表示


event.target.classList.add('atelier-active-tab')
tab_id = event.target.getAttribute('data-tab')
active_content = container.select(f'[data-content="{tab_id}"]')[0]
active_content.classList.add('atelier-active-content')

event.target.classList.add('atelier-active-tab'): クリックされたタブをアクティブにします。
tab_id: クリックされたタブのdata-tab属性の値を取得します。
active_content: 対応するタブコンテンツを取得します。
active_content.classList.add('atelier-active-content'): 対応するコンテンツをアクティブにします。

遅延してコンテンツを表示


def show_content():
    active_content.style.visibility = 'visible'
    active_content.style.opacity = '1'
    active_content.style.transform = 'translateX(0)'

timer.set_timeout(show_content, 50)

show_content関数: アクティブなタブコンテンツを表示するためのものです。
timer.set_timeout(show_content, 50): 50ミリ秒後にshow_content関数を実行します。

最後のforから始まっている部分


for container in document.select('.atelier-container'):
 tabs = container.select('.atelier-tab')
 if tabs:
  tabs[0].classList.add('atelier-active-tab')
  container.select('.atelier-tab-content')[0].classList.add('atelier-active-content')
  for tab in tabs:
   tab.bind('click', show_tab)

ここなんだよねー
これはですねー…ウェブページ内のすべての「atelier-container」をループしているのです。
アナザーエデンで言うところの、ループ攻略ですよ！

ちょっと詳しめにいきましょう。

ウェブページ内のすべてのatelier-containerをループ


for container in document.select('.atelier-container'):

このコードはウェブページ内にあるすべての .atelier-container クラスを持つ要素を見つけて、それぞれに対して同じ処理を行うためのループです。
簡単に言うと、ページにあるすべての「タブコンテナ」を順番に処理します。

初期設定として、最初のタブとタブコンテンツをアクティブに


if tabs:
    tabs[0].classList.add('atelier-active-tab')
    container.select('.atelier-tab-content')[0].classList.add('atelier-active-content')

このコードはタブコンテナ内にタブ (.atelier-tab) が存在するかを確認しています (if tabs:)。
もしタブが存在する場合、最初のタブ (tabs[0]) に atelier-active-tab クラスを追加して、それをアクティブ（選択された状態）にします。
同様に、最初のタブコンテンツにも atelier-active-content クラスを追加して表示されるようにします。
このコードがないと、ページがロードされたときに最初のタブとその内容が表示されなくなってしまうのです。

各タブにクリックイベントをバインドし、タブがクリックされたときに show_tab 関数を実行します


for tab in tabs:
    tab.bind('click', show_tab)

このコードはコンテナ内のすべてのタブ（.atelier-tab）に対して、クリックイベント（クリックされたときに起こる処理）を設定しています。
tab.bind('click', show_tab) は、各タブをクリックしたときに show_tab 関数を実行するように設定しています。
つまり、タブがクリックされると、そのタブに対応するコンテンツを表示する処理が実行されるってこと。

装飾要素のCSSコード

CSSはプログラミング風に考えると余計にこんがらがるので、単純にコメントアウトを付けてコードを紹介します。

タブUIを装飾するcss


/* タブのスタイル */
.atelier-tab {
 display: inline-block; /* タブをインラインブロックに設定 */
 margin: 0 5px; /* タブ間の左右マージンを5pxに設定 */
 padding: 10px 20px; /* タブ内のパディングを上下10px、左右20pxに設定 */
 border: 1px solid #ccc; /* タブの境界線を1pxの実線で#cccの色に設定 */
 cursor: pointer; /* マウスカーソルをポインターに変更 */
 border-top-left-radius: 10px; /* 左上の角を10pxの円弧に設定 */
 border-top-right-radius: 10px; /* 右上の角を10pxの円弧に設定 */
 background-color: rgba(144, 238, 144, 0.5); /* 背景色を半透明のライトグリーンに設定 */
}

/* タブコンテンツのスタイル */
.atelier-tab-content {
 display: none; /* デフォルトでは表示しない */
 padding: 20px; /* コンテンツ内のパディングを20pxに設定 */
 border-top: none; /* 上部の境界線をなしに設定 */
 border: 1px solid #ccc; /* コンテンツの境界線を1pxの実線で#cccの色に設定 */
 border-radius: 10px; /* 角を10pxの円弧に設定 */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* コンテンツに影を付ける */
 background-color: #fff; /* 背景色を白に設定 */
}

/* アクティブなタブのスタイル */
.atelier-active-tab {
 background-color: rgba(144, 238, 144, 1); /* 背景色を不透明のライトグリーンに設定 */
}

/* アクティブなタブコンテンツのスタイル */
.atelier-active-content {
 display: block; /* アクティブなコンテンツを表示 */
}

要するに、このCSSは「タブ」と「タブの中身」について、それぞれデザインしているのです。
AI学習や無断転載を防ぐプログラムの小ネタ集ではJavaScriptを用いて青色のタブUIを実装しました。
ここではPythonだから、緑色のタブUIにしてみたんだよね。

PythonでタブUIができたー！！

念願の「ライザごっこ」ができて、大変満足しております😆ww

html・css・JavaScriptでタブUIを作るのは一般的過ぎて退屈だから、このサイトの環境であるPythonを使って、フロントエンドで錬成してみました。
ライザはアトリエで錬金術を使っていますが、リアルの私はそんなことできません。
でも、こうしていくつかのWeb言語を「調合」し、Webサイトに自由なUIを「錬成」することならできます。