「CSS」に関する日記

次>

バイオハザード レクイエムとAmazonストアフロントとQiita

バイオハザード レクイエム



動画投稿しました。
内容は同一です。
ゲーム音声と実況音声の音量バランスは調整したけど全体の音量調整してなかったなァ。
前回は出力設定で無茶して紙芝居になったし、動画作成手順をまとめておかないと。

Amazonストアフロント

アンパンマンDBから爆速で商品情報入れる方法思いついたので試してみた…けど、半分しか保存されてなかった!
どうやらこまめに確定させていく必要があるみたいだ。

Qiita

昔書いた記事の続編、今更書きました。
今アンパンマンDBで使っているコードほぼそのままです。
CSS、今も発展を続けているはずだけど、このCSSももっといい書き方が生まれてるのかなぁ。

あと、もう一つ別の記事も執筆中。
.NETです。

アンパンマン日替わり紹介botとスタイルシート

アンパンマン日替わり紹介bot

2025年の分、最新版に更新しました。
思い出したときに不定期更新です。

スタイルシート

YouTubeの埋め込みがスマホとかの狭い横幅の環境で横にはみ出てしまうので、調整しました。

逆に極端に横長で高さの足りない環境でもはみ出しは発生しますが、そっちは放置の方向です。
あまり起こらないだろうし、縦スクロールはもともと普通ですしね。

ドラゴンクエスト10とアキタラヤメル[ただの乱数表]とCSS

ドラゴンクエスト10(しろいコキン)

  • クエスト「ロード・オブ・どうぐ使い/どうぐを愛した男」をクリアした!

またほんのちょっと道具使い強くなったぞ!

りんごのゆかた

  • クエスト「七夕デート大作戦!」をクリアした!

しろいコキンも七夕イベントクリア!

他の写真は以下から。
写真置き場「2025/07/03」

アキタラヤメル[ただの乱数表]

わざわざ告知するほどでもないのでここで言いますが、ダークモード対応しました。
地味に我がサイトで初の快挙です!

CSS(Today I Learned)

@media (prefers-color-scheme: dark)
これがダークモード対応用のCSS。
メディアクエリで囲います。
CSS全文はこれ。

CSS 入れ子の使用 - CSS: カスケーディングスタイルシート | MDN
今、CSSってネストできるんですね。

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
ダークモード対応のほうのドキュメントはこれ。

PHPとCSSとアンパンマンDB

PHP

[PHP]DateTimeのtimezone_typeって何だ? #PHP - Qiita
記事投稿しました。
アンパンマンDBで日時の出力をDateTimeそのままjson_encodeしてみたら見たことないプロパティが出て来たんで不思議だったんですよね。
で、json_encodeに限らず出てくるので、題材としては変数の中身を見るためにより広く使われるvar_dumpのほうを挙げた次第です。
それはそうと…

【PHP】Qiita デイリーいいね数ランキング【自動更新】 #LGTM - Qiita
なんか1位になってました。
他誰もいないけどな!
鶏口となるも牛後となるなかれということわざがあるけど、鶏どころか単細胞生物ですな。

CSS

古いスタイルシート整理してました。
レスポンシブ対応前の古いページ用の古いスタイルシートもまだ残しているんですが、さすがに数が少なくなってきたので名前を変えたり。

アンパンマンDB(システム)

コメントに関するちょっとした機能実装中。
関係あるのは一部の人に限られますが。

アンパンマンDBとデザイン

アンパンマンDB(記事更新)

コラムから転記。

デザイン

入力フォーム類の文字サイズを大きくしました。
もともとはデフォルトサイズで、周囲の文字より一回り小さい設定だったのですが、周囲と同じ大きさに合わせました。
正直、文字サイズそのものとしては、周囲の文字がデフォルトのちょっと大きめサイズなので、もともと読みにくくはなかったのですが、なぜかIMEのUIが潰れてしまって漢字変換に支障が出ていたので、つぶれないサイズまで大きくしたのです。
もともと野暮ったかったうちのデザインが、ますますダサくなった気はしますが、個人的には扱いやすくなったし、より読みやすくもなったはずなので、とりあえずこれで良しとします。
取り急ぎでアップした部分もあるので、どこかに不統一とかデザイン崩れとかもあるかもしれません。
このあたりの確認は、まだ終わってないHTMLアップロードのついでにでもやっておこうかと思っています。

highlight.js

highlight.js
シンタックスハイライト調整、以前から使っていたものではありますが、highlight.jsを使うことにしました。
ただし、今度は最新版の11.10.0。
ちょっと使い方が変わっていました。

で、動作確認も兼ねて「言語ごとに空ループ&バブルソートの速度比較」を書き直していたのですが、C#のバブルソートのコードが動かないものだったので、書き直しました。
そもそもバブルソートかすら怪しいけど。
確認してから明日アップする予定です。

デザイン

引き続き新デザイン化やってたけど、プログラムのシンタックスハイライト周りが怪しいので調整中。
HTMLで直接書くのがしんどいので、ここらへんはある程度自動化しようかと。

デザイン

古いページを最新デザインに置き換えるやつ、できているところまで全部アップしました。
HTML 4.01からHTML Living Standardに上げた都合で、HTMLとして不正になってしまった部分も多々ありますが、それは追々直していこうと思います。
一方で、共通デザインが持っている共通ナビとかも自動で付くようになったので、訪問者にとっては純粋に使い勝手が上がっていると思います。

デザイン

古いページを最新デザインに置き換えたり、ワンタイムメッセージ(コメント投稿したときなどに上に出てくるやつ)の色を調整したりしてました。
…が、パソコンの調子が悪く、途中までしかアップできていません。

QiitaとアンパンマンDB

Qiita

見出しとかの日本語をいい感じの塊で自動改行するCSS #CSS - Qiita
やっと投稿できました。
まあひとまずはこの記事で書きたいことは書けたので満足。
他にもいろいろ書けるネタはありそうなんで、スピードアップしてもっと書いていきたいですね。

アンパンマンDB(記事更新)

訃報。
最近アンパンマンDBの更新はこういうのばっかりですね…。
前向きな更新もいろいろしたいので、スピードアップしてもっと書いていきたいですね。

プロフィールとCSS

プロフィール

一覧ページに検索機能を追加しました。
質問数もずいぶん増えたし、回答時に他の回答を参照したいこともあるし、検索できてもいいかなーって。

CSS

だいぶ書けてきたけどまだ完成じゃない。
こういうの毎日アウトプットしている人本当にすごいなァ。

CSS

先日作ったCSSの件、Qiitaに書き始めてます。
一応、一番大事な部分は書けましたが、説明とかもいろいろ書きたいので、もうちょっと頑張ります。

ドラゴンクエスト10とアンパンマンDB

ドラゴンクエスト10

大型アップデート情報 バージョン7.1 (2024/7/10 更新)|目覚めし冒険者の広場
大型アップデート!!

毎月10日はDQXで遊ぼう! ~果ての大地ゼニアス 探索おうえんアイテムプレゼント!~ (2024/7/10更新)|目覚めし冒険者の広場
テンの日!!

イベントの重なった日だからさぞかしゲームに忙しかっただろうと思いきや、テンの日の最低限のアイテム回収しかしてませんでした。
というのも…

アンパンマンDB(システム)


タイトルをいい感じに改行する機能作ってました。
先日のレイアウト崩れの件もあるので早々にリリースして、映画のタイトルを一通り対応させました。

このやり方もQiitaに書いてもいいかな。
ツイートでは事細かに処理を書いていますが、これを自動でやってくれるHTML/CSSがあるのです。
JavaScriptは使ってないよ。

アンパンマンDB(システム)

サブタイトルもなんですが、タイトル本体(h1タグによる大見出し)のほうの見え方も工夫したいなと思っているところです。
スマホなど、横方向が狭い端末だと、タイトルが改行されるわけです。
改行されるのはいいんですが、中途半端な位置で改行されて、例えば「しょくぱんまんといちごだいふくちゃん」が、

1行目:しょくぱんまんといちごだ
2行目:いふくちゃん

みたいになって、しょくぱんまんと苺について述べた後、謎の新キャラ「衣服ちゃん」が爆誕してしまったりします。
だからと言って、ちょうどいい位置にbrタグを置いて強制改行させると、PCとかの横長環境だと無駄に縦に長い見出しになってしまうわけです。

そういうわけで、縦長環境、横長環境両対応できるいい感じの自動改行を求めて調べものと実験をしていました。

自動改行の基本的な考え方を以下の記事を参考に。
Webブラウザの日本語改行問題 -改行を実現するHTML/CSS-(1) #JavaScript - Qiita

折り返しの細かいところは以下の記事を参考に。
文章の折り返し指定のCSS最新版 - ICS MEDIA

ドラゴンクエスト10と日記とスタイルシート

ドラゴンクエスト10

マーメイドハープ
ウェルカムギフト バージョン7こんにちはキャンペーン (2024/3/15)|目覚めし冒険者の広場
バージョン7ログボ全部集まりました!
最後のアイテムはオルゴール家具のマーメイドハープ。
室内BGMを海の音楽に変えられます。

マーメイドハープ 動作中
動作させたらこんな感じ。

ログボ限定のアイテムは他にウパソルボードプリズムなんてのもあったのですが、ドルボードは今使っているデザインが好きだったので、デコリーに渡すだけ渡して変更はしていません。

日記

管理画面側の地味な機能なんですが、タイトルの自動生成機能を実装しました。
毎度毎度、今日の日記なら「ドラゴンクエスト10と日記とスタイルシート」というふうにタイトルを付けているのですが、これ、日記内の見出しから機械的に付けられているんですよね。
機械的にできるなら機械にやらせろって話なのです。

ちなみに、昔はちょっとはひねったタイトルを付けていたんですが、今はTwitterやMisskeyに書いた報告を出しているので、ここはわかりやすさ重視がいいかなと思って機械的な付け方にしています。

スタイルシート

現状使われているCSSファイルを棚卸しして、1年以上使われていないCSSを削除しました。
CSSファイルとJSファイルに関しては、キャッシュが最大限効くように、中身を変更したらファイル名も変更して、同じファイル名なら中身も同じことを保証しているんですね。
で、スタイルシートの参照先を更新していないページや、ブラウザに更新前のキャッシュが残っているページからは、当然古いファイル名の方へアクセスが行くわけで、そこでリンク切れが起こらないように、古いファイルもある程度残しているのです。
そういうのが溜まってきて、流石に今後来ないだろうってファイルも増えてきたので、このタイミングで消しました。

スタイルシートとYahoo

スタイルシート

以前やっていたスタイルシートの調整の確認を進めていました。

Yahoo

Yahoo! JAPAN
ログイン周りの確認してました。
不要なメールのオプトアウトも。

アンパンマンDBとドラゴンクエスト10とスタイルシート

アンパンマンDB

「それいけ!アンパンマン'22 Vol.5」の商品情報を追加
情報が来た日に入れ忘れていたので、今更ながら更新。

ドラゴンクエスト10(しろいコキン)

イカ
チームメンバーで集まってトラシュカなど。

他の写真は以下から。
写真置き場「2022/08/01」 | ミフミンのDQ10メモ

スタイルシート

ほぼ管理画面だけが適用対象ですが、雑に作った2カラムテーブルによるフォーム(左が項目名で右が入力欄)のスタイルを調整しています。
雑に作ると、入力欄がサイズ自動調整されて狭くなりがちなんで、項目名をなるべく狭めて入力欄を広くとるようにしています。
ただ、一律でこれを全部にやってしまうと、それはそれで問題がありそうなので、検証も進めています。

修正前。

修正後。

無題

何か操作した後に一回だけメッセージが現れる仕組みを作ってた。
見えないチェックボックスとCSSのトランジション機能を使って。

爆ボンバーマンとCSS

爆ボンバーマン

ブラックシティ3面の攻略情報リニューアル中。
量が多いのでマップ1だけで力尽きました…。

CSS

HTMLのtableの列幅をドラッグで変えられるようにする雑な方法 - Qiita
投稿しました。
雑な方法だけあって、Chrome以外じゃ動かないとか、問題ありありですが、個人的には、これでも困らないので、これ以上ちゃんとしたものを作るつもりはありません。

デザイン

外部リンクにわかりやすくアイコンを付けようとあれこれやっていたんですが、わかりやすくかつ管理しやすくというのはなかなか難しいですね。
CSSによる完全な自動化は逆効果でした。

次>