ki-hi-ro.com

DAILY JOURNAL

HTML・CSS

34記事の記録。

2026年8月

  1. FastAPI・Jinja2でCSSのキャッシュ対策を整理した

    ブラウザのキャッシュが原因で、CSSを修正したのに、本番環境で反映されませんでした。 これまでは、HTML側で読み込むstyle.cssと、その中で@importしている個別CSSの両方にバージョンを付けていました。 <link rel="stylesheet" href="/static/style.css?v=2.1.3"> @import url("css/pages/top.css?v=2.0.4"); この方法だと、top.cssを修正した際に、 top.cssのバージョンを変更 style.cssのバージョンも変更 という二重管理が必要になります。 そこで、CSSのバージョンを1か所で管理する形に変更しました。 FastAPIで…

  2. 真のプログラミングスキルを構築する旅は、ここから始まる

    真のプログラミングスキルを構築する旅は始まったばかりこれからが楽しみだ伸び代がある正直これまでのpaizaのコーディングスキルチェックはGoogleで調べたりAIに知識を聞いたりしていた実際のプログラミングの世界でも昔からググることは美徳とされているからしかし明日のコーディングテストではそれは許されないだろう60分のコーディングテストそれに向けてpaizaのCランク問題を解いてきた難しかった自分の実力のなさを思い知らされた一つ一つの知識を理解していないわけではない今の問題に最適なアルゴリズムを構築することが難しいハードコーディングではなく汎用的なコードを書かなければ20以上のテストケースは通らない2019年ごろからprogateを通してプログラミングの…

2026年7月

  1. これをベースに自力で修正していく

    一歩一歩、歩いて行こう 何かしら見えてくるものがあるはずだ ファーストビューを修正する 以下のようなレイアウトに修正したい 現状の詳細ページ ここは削除 ここをコンポーネントとして扱う（いったん） 詳細ページの上に追加しよう CSSが当たっていない メインカラーはこちら color: var(--front-navy-dark); AI駆動開発 ここは削除 ここも削除でいい ここも削除（無駄が多い） 現状のトップ サイドバーを追加する 失敗！ ここは削除 ここも削除 ここから、CSSを調整しよう いい感じだ 完全感覚コーディング コーディングがうまくいきません トップと詳細のCSSを自分で調整していましたが、崩れてしまいました修正してもらえますか？ 期…

2026年6月

  1. アコーディオンの開閉をどこで設定しているか？

    現状、全部のアコーディオンが開いている 最新の記事の数に合わせて、全部のアコーディオンを閉じたいと思った 現状アコーディオンの構造 sidebar-not-single.phpの36行目〜50行目に記述している foreach ($archives_by_year as $year => $months) { echo '<li class="archive-year-item">'; echo '<details class="archive-year" open>'; echo '<summary>' . esc_html(sprintf('%d年', $year)) . '</summary>'; echo '<ul…

    CSSのバグ修正

    chromeで上手く行っているが、 safariで崩れている。 「崩れている」というよりも、二本線が上にずれている。 これを修正していこう。 AIではなく、他人ではなく、自分の頭で考える。 それが確かな未来を作る。 自分の感覚を信じ切るしかない。 これまでもそうやってやってきた。 ボタンのHTML button要素の中に線が二つとMenuというテキストが一つある。 <button class="site-menu-toggle" type="button" aria-controls="site-menu-panel" aria-expanded="false"> <span class="site-menu-toggle__line">…

2024年8月

  1. Railsで共通のレイアウトを一元化する方法

    先ほど、MoneyAppの右上の「支出・収入・貯金」を3回修正した。 1回目はトップページ 2回目は、aboutページ 3回目は、一覧ページ 共通のHTMLをまとめて書く方法 同じ箇所をまとめて書くことで、変更する時に一回で済む。 コードの保守性が高まる。 application.html.erbにあるyieldを活用する app/views/layouts/application.html.erbには、すべてのビューファイルに共通のレイアウトが書かれている。 第4章 Rails風味のRuby - Railsチュートリアル それぞれのページにアクセスした時に、<%= yield %>の部分に、対応するビューファイルの内容が入る。 レイアウトとレン…

  2. position: sticky; が上手く行かない原因

    先ほどブログのソースコードの整理をしていて、目次のCSSが書かれたファイルを削除してしまった。 そのため、バックアップの取得処理を行っているが、まだ実行中になっている。 自分でCSSを書いていこうと思っている。 これまで通り、下にスクロールした時に、目次を固定させたい。 position: sticky; だけでは上手く行かなかった 単純に目次の要素に対して、position: sticky; をつけるだけでは上手く行かなかった。 topとleftを追加すれば上手くいくか？と思ったが、無意味だった。 rightとbottomを追加してもダメだった。 時にはうまく機能し、時にはうまく機能しない position: sticky;の仕組みや実際の使い方をや…

    画像の「フェードアウト」と「ふわっと出現」を実現したページ

    2年くらい前に作成したページを公開する。 そのページはこちら 名古屋 | ki-hi-ro.com 画像のフェードアウトの参考ページ こちらのサイトは、2024年8月末から、書籍購入者の限定サイトになるらしい。 動きを組み合わせて全画面で見せる | 動くWebデザインアイディア帳 画像のふわっと出現の参考ページ 作成当時と内容に変更があるかもしれないが、おそらくこちらのページ。 jQuery とCSS を組み合わせてスクロールをしたら要素を動かす | 動くWebデザインアイディア帳

2023年11月

  1. ABEMA Primeは会議の進行の参考になるかもしれない

    最近、仕事で組織の上の人と会議をする機会があった。 今後、定期的に会議を行うことになったが、進め方がいまいちよくわからない。 AbemaTVは、会議形式で世の中の問題に対して議論が進んでいくので、会議進行の参考になるかと思った。 自分で思うベストなやり方 まずは、自分が会議を進める上でベストだと思っている考え方を紹介する。 アジェンダ（議題）をあらかじめリストアップして、それにそって進行していくのがいいのではないだろうか。 分からないことがあれば質問し、何を質問すればいいのかすら分からない時は、こちらが分かっている内容を伝えて話を進めていく。 必ず上の意思決定者の方と自分との知識・経験の差があるから、情報収集するという姿勢でいたほうがいい。 自分が理解…

2023年1月

  1. レスポンシブなクリッカブルマップを作成してみました

    先ほどクラウドワークスで以下のような仕事がありました。 https://crowdworks.jp/public/jobs/8744105 この仕事をこなすには、レスポンシブな日本地図を作成する必要があるので、そのやり方を調べて実際に試してみました。 以前、日本地図にリンクを設定する方法という記事を作成しましたが（参考記事: 日本地図にリンクを設定する方法）、この時はスマホで確認すると横スクロールしてしまっていました。 横スクロールしてしまっている様子 今回、横スクロールさせずにレスポンシブ対応を行なったので、記事に残しておきます。 サンプル See the Pen レスポンシブなイメージマップを作成してみました by Shibata Hiroki (…