UIkit3 使用環境 Name Version Dart Sass 1.70.0 UIkit 3.17.11 前書き 前回と、前々回で、UIkitを@useや@forwardに置き換えられるか試しました。 一つだけ気になったことがあります。 カスタムテーマの位置が、フレームワーク内にあることが前提になれば、…

UIkit3 使用環境 Name Version Dart Sass 1.70.0 UIkit 3.17.11 前書き 前回の続きで、今回はSass Variablesです。 現状は、uikit/src/scss/variables.scssに、各コンポーネントのSass Variablesを集約しています。 uikit/src/scss/components/variables.scs…

UIkit3 使用環境 Name Version Dart Sass 1.70.0 UIkit 3.17.11 前書き UIkitをこよなく愛するFossaです（笑） UIkitでは、mixinをhookするために使っています。 例えば、下記の通りです。 .uk-alert { position: relative; margin-bottom: $alert-margin-ve…

使用環境 Name Version Uikit 3.17.11 boxicons 2.1.4 前書き vertical-alignは、inlineとinline-blockとtable-cellで、設定します。*1 検索すると、vertical-align: middleが効かない旨の記事は多いのです。 しかし、table-cell のtdタグでvertical-align: …

前書き X(旧Twitter) フォロワー数が少ないサブ垢の方が、ポストすると閲覧数が２〜３桁ありまして、メイン垢でポストする度に、放置プレイ状態だったので、毎回、虚しく思いました。 メイン垢では、ポスト頻度が低かったので、仮にミュートされることはなく…

Vituumを使わず、Viteを使って、NunjucksでHTMLを生成する方法です。 2023-06-28 追記 Vituumが1.0.0となり、仕様が変更されました。 @vituum/vite-plugin-nunjucksの1.0.0では、下記の通りには動作しません。 使用環境 Name Version Vite 4.0.3 @vituum/vit…

間違った記事のせいで、間違った記事を読んだ人も、間違った結論を出してしまうパターンを発見しました。 間違った記事も、間違った記事を読んだ人も、app.jsのせいだと結論づけていますが、本当にそうでしょうか？ app.jsを読み込むと、jQueryやjQuery UIが…

github.com Visual Studio Code （以下、VSCode）で、Vue3を使う時に、お世話になるのが、Volar。 私は、Vue2から使っているOption APIを使い、TypeScriptは使わないので、下記のwarningが出ました。 長ったらしいので、省略します。 Component options are …

長年、nodebrewを使っていまして、今もnodebrewに不満はないです。*1 ずっと更新されないし、そろそろ移行した方がいいかなと思って、調べてみました。 検索するとVoltaが出てきますが、私が以前、試した時に採用を見送ったので、他のものを探してみました。…

UIkit3 fossa-hobby.hatenablog.com 以前は、Laravel Mixを使いましたが、今回は、npm scriptsです。 使用環境 Name Version Less 4.1.2 UIkit 3.10.1 インストール ドキュメントから引用します。 npm i less --save-dev package.json "scripts": { "less": …

UIkit 使用環境 Name Version UIkit 3.7.6 uk-card-body uk-overflow-auto <div class="uk-card-body uk-overflow-auto"> uk-card-bodyに、overflow:auto;を指定して、コンテンツの高さが溢れた場合、スクロールさせたい場合があります。 以前は、JavaScriptで、uk-card-bodyのheightを計算していました</div>…

windicss.org Tailwind CSS v2を使っているのですが、Windi CSSに興味があって、試してみました。 使用環境 Name Version node 14.17.1 npm 7.19.0 Windi CSS 3.1.3 インストール npm i windicss 今回は、Windi CSS CLIを使います。 オプション オプション名…

Formをいじっています。 Radioボタンだと、選択肢の内の一つだけクリックするので、文字列。*1 Checkボタンだと、選択肢の中から、いくつかクリックするので、配列。*2 文字列なのか、配列なのか、判定する必要が出てきました。 Nunjucksは、Jinja2に影響を…

liquidjs.com 日本語で検索しても、あまり記事が見つからないですね。 LiquidJSは、Shopifyで使われているテンプレートエンジンLiquidと互換性があるJavaScriptのテンプレートエンジンという認識で、あっているのかな？ ずっとNunjucks + Gulpを、使っていま…

UIkit3 使用環境 Name Version node v16.2.0 npm 7.15.0 sass 1.34.0 uikit 3.6.22 Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. UIkit3で、sassを使うと、上記のようなメッセージが出ました。*1 解決…

github.com たぶん、お天気アイコンがいくつか、追加されたように思います。*1 ドキュメントを読むと、使い方は、色々あるみたいです。 私が使っている方法は、良い方法なのかどうかわかりませんが、メモとして残しておきます。 インストール npm i bootstra…

はてなブログのデザインテーマを作成していましたが、時間の都合で、間にあわないかもしれません。 先日のVanilla Frameworkで作業していた時に、心が折れたことがありました。 心が折れたこと リンク(HTMLのaタグ)をクリックすると、クリックしたところに枠…

fossa-hobby.hatenablog.com 以前、HTMLタグで、rubyを使った記事を書きました。 HTMLについて、私自身が理解するために書いたのですが、今回は、その続きです。 仏典にルビをふる momonori11.hatenablog.com 上記の牟子『理惑論』（5）序伝⑤から、引用して…

Grav getgrav.org Name Version PHP 7.4.14 Composer 2.0.8 ようやく、Grav v1.7.0が、リリースされました。 1.7.0-beta.1が、2019年6月にリリースされてから、１年以上たってます。 Gravとは、MySQLなどのデータベースを必要としないFlat-File CMSです。 デ…

Name Version Foundation for Sites v6.6.3 Hugo v.0.80.0 Foundation for Sitesを使っている人は多いと思いますが、日本語の記事は少ないのかな？ Hugoで、scssを使って、Foundation for Sitesを使う一例を書いておきます。*1 themes/foundation/assets/scs…

fossa-hobby.hatenablog.com 続きです。 #mainを掘り下げようと思いましたが、前回まで調べた内容で、色分けしてみました。 iPad iPhone iPad(1024*768)とiPhone(375*667)で、表示しています。 id color #container 薄い灰色 #content 少し濃い灰色 #blog-ti…

fossa-hobby.hatenablog.com 続きです。 #container <div id="container"> <div id="container-inner"> <header id="blog-title" data-brand="hatenablog"> </header> <div id="content" class="hfeed"> </div> </div> </div> 大まかに分けると、#blog-…

今、取り掛かったところですが、はてなブログのデザインテーマに挑んでいたりします。 blog.hatenablog.com 目指すは、もちろん参加賞です。 レッドスター１００個プレゼントと書いてあるけど、最大１００名様なので、ゲット出来るかどうかは、微妙です。 は…

まだ、はてなブログや、はてなブックマークを使いこなせてないなぁと、実感する出来事がありました。 凹む はてなブックマークで、嫌なコメントを読んでしまったのですが、調べてみると、２つ方法があるらしい。 嫌なコメントだけ非表示にする 嫌なコメント…

HTMLタグですが、よく使うタグ、あまり使わないタグや、存在自体、知らないタグもあります。 いろんな人のブログを読んで、『あれ？』と思ったブログがありました。 タグの存在自体、知っていたけど、使ったことがなかったのです。 HTMLソースを見てみると、…

Markdown記法で、ブログを書いています。 HTMLの表示を、確認できるものを作ってみましたが、少しずつ、CSSをいじっているので、私にしか役に立ちません。 まだ途中なので、随時、更新します。 見出し H1タグ H2タグ H3タグ H4タグ H5タグ H6タグ 強調など …