平衡点


2023/03/14

_ WebのCSSをbasscssからPico.cssに変更した

これまで Basscss で組んでいたサイトのCSSを Pico.css に変更した.

個人のサイトは AMP HTML のみで作成しているので サイズが気になる所ではあるが:

  • basscss ベース: 24 kb(24142)
  • picocss ベース: 45 kb(45649)

というわけで, 許容範囲.

basscss は用途に応じたクラスが細かく用意されていて, HTML 側で必要に応じて class を追加していく感じだったけれども, Pico.css は極力 classdiv を指定せずに「それっぽく」作るという塩梅. HTML がスッキリして嬉しい.

例えばサイトの上部ナビゲーション. basscss の場合, HTML は

<header class="container right-0 left-0 top-0 z4 fixed">
  <nav class="navigation flex items-center justify-between">
    <div class="pr1 py1 order-0">
      <a href="index.html">
        <amp-img layout="fixed"
                 width="1.2rem"
                 height="1.2rem"
                 src="/assets/img/top.webp"
                 alt="About"
                 id="top"
                 class="logo left">
          <amp-img fallback
                   layout="fixed"
                   width="1.2rem"
                   height="1.2rem"
                   src="/assets/img/top.jpg"
                   alt="About"
                   id="top"
                   class="logo left">
          </amp-img>
        </amp-img>
      </a>
    </div>
    <input type="checkbox" id="tm" class="navigation-input">
    <label for="tm" class="pl1 py1 order-3 md-hide lg-hide h2"></label>
    <div class="navcontents items-center md-flex lg-flex order-1">
      <div class="px1 py0">
        <a href="/research/index.html">
          Research
        </a>
        <div class="dmenu px1 py0">
          <input type="checkbox" id="dmenu" class="dmenu-input">
          <label for="dmenu">Software &#9662;</label>
          <div class="dcontents">
            <ul class="list-reset p0 m0">
              <li class="px1 py0">
                <a href="/software/index.html">
                  Repository
                </a>
              </li>
              <li class="px1 py0">
                <a href="/cc-env/index.html">
                  Comp. Memo
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="px1 py1">
          <a href="https://uwabami.junkhub.org/log">blog</a>
        </div>
      </div>
      <div class="flex-auto"></div>
      <div class="px1 py0 order-2">
        <form method="GET"
              class="p0 m0"
              action="https://www.google.com/cse"
              target="_top">
          <div class="inline-block relative p0 m0 small">
            <input name="cx" type="hidden"
                   value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
            <input name="ie" type="hidden" value="UTF-8" />
            <input class="gsearch" type="search" placeholder="検索" name="q" required>
          </div>
        </form>
      </div>
    </div>
  </nav>
</header>

となっていて, ついでに dropdown メニューを組むのに 結構苦労して dmenu, dcontents クラスを作成していた.

これが Pico.css の場合, HTML は

<header>
  <nav>
    <ul>
      <li>
        <a href="/index.html">
          <amp-img layout="fixed"
                   width="1.2rem"
                   height="1.2rem"
                   src="/assets/img/top.webp"
                   alt="About"
                   id="top">
            <amp-img fallback
                     layout="fixed"
                     width="1.2rem"
                     height="1.2rem"
                     src="/assets/img/top.jpg"
                     alt="About"
                     id="top">
            </amp-img>
          </amp-img>
        </a>
      </li>
    </ul>
    <input class="menu-btn" type="checkbox" id="menu-btn"/>
    <label class="menu-icon" for="menu-btn"><span></span></label>
    <ul class="menu">
      <li>
        <a href="/research/index.html">
          Research
        </a>
      </li>
      <li>
        <details role="list">
          <summary aria-haspopup="listbox" role="link">Software</summary>
          <ul>
            <li>
              <a href="/software/index.html">
                Repository
              </a>
            </li>
            <li>
              <a href="/cc-env/index.html">
                Comp. Memo
              </a>
            </li>
          </ul>
        </details>
      </li>
      <li>
        <a href="https://uwabami.junkhub.org/log">blog</a>
      </li>
      <li>
        <form method="GET"
              action="https://www.google.com/cse"
              target="_top">
          <input name="cx" type="hidden"
                 value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
          <input name="ie" type="hidden" value="UTF-8" />
          <input type="search" placeholder="検索" name="q" required>
        </form>
      </li>
    </ul>
  </nav>
</header>

とスッキリ. 元々 semantic に組んでくれているので, divspan がほとんど無い. せいぜいモバイル用に breakpoint を指定してハンバーガーメニューにする所だけだった.

というわけで, イロイロとスッキリ. とはいえ, 残念ながら Picocss が提供してくれた折角のダークモードとの切り替えは使えていない. amp-bindamp-scriptあたりでswitcher組めば良いかもしれない. ただ, その前にamp自体が過去のモンになりそうではある

_ Word の文書「中国語(台湾)で書かれた文字が…」 となる場合

某所文書のテンプレートを貰ったので作業していたら 「このドキュメントには中国語(台湾)で書かれた文字があるため、公正の対象にできませんが、この言語に対応する校正ツールを入手できる場合があります。」 とか言われたり(こういう事があるからWordは嫌いだ).

元の文書作成者の環境によるんだろうかねぇ.

「検索」で言語を置換すると良いみたい. 試してみたら確かに治った.

そういや, 少し前はこんな事もあったな.

…もうまともに開発リソースが割かれない様になってきたのかねぇ.


連絡先など
最近の日記
一覧
2006|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|02|03|04|08|09|10|11|12|
2013|01|02|03|04|05|06|08|09|10|11|12|
2014|01|02|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|09|10|
2016|02|03|
2017|01|02|03|05|06|07|09|11|12|
2018|03|06|07|10|11|12|
2019|01|02|03|04|05|07|10|12|
2020|01|02|03|04|05|08|09|10|11|12|
2021|01|02|03|05|06|07|08|09|11|12|
2022|01|02|03|04|05|06|08|10|11|12|
2023|02|03|04|06|08|09|11|12|
2024|01|02|03|
Back to Top ▲