独学者Fossa

独学していることなど

インターネット

Vanilla Framework 3.0

Vanilla Framework Vanilla Framework 3.0 リリース リリースされたので、試してみました。 最初に結論を書きますが、私が使う分には、以前のVanilla Frameworkを使うのが、最善だと思いました。 使用環境 Name Version Vanilla Framework 3.0.1 Sass 1.48.0…

UIkit uk-card-body uk-overflow-auto

UIkit <div class="uk-card-body uk-overflow-auto"> uk-card-bodyに、overflow:auto;を指定して、コンテンツの高さが溢れた場合、スクロールさせたい場合があります。 以前は、JavaScriptで、uk-card-bodyのheightを計算していました。 uk-cardに、flexboxを使うと、簡単に出来ました。 完成図 完成図 H</div>…

Laravel Modulesで、npm Workspaces

以前、Yarnを使っていましたが、YarnにWorkspacesがあったなんて、知りませんでした。 npm v7になって、Workspacesが使えるようになりました。 ずっと前から、Laravel Modulesを使って思っていたのが、各モジュール毎に、package.jsonがありますが、共通する…

Windi CSSを試す

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を使います。 オプション オプション名…

Nunjucksで、配列判定

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

LiquidJS

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

Dart Sass

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 解決…

Bootstrap Icons v1.4.0

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

Hugo + 検索

Hugo Hugoで制作した制作物に、検索機能を追加したいと思っていました。 ありふれた内容ですが、私が試した範囲で理解したことを書きたいと思います。 Name Version Hugo v0.80.0 Lunr.js v2.3.9 Lunr Languages v1.4.0 いろんな記事を読みましたが、バージ…

週間テレビ番組表

週間テレビ番組表 テレビと書いていますが、見逃し配信と、Yahoo! JAPANのGYAO!で、無料で見れる海外ドラマのことです。 毎週、何曜日に配信されるのか忘れることがあるので、一週間分見たら、すぐわかるのを作りました。 約2年前から使い続けているので、…

デザインテーマ作成 挫折する

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

Bookmark (2)

fossa-hobby.hatenablog.com Name 昔 Foundation for Sites 前回 Spectre.css 今回 Vanilla Framework 前回、完成した作品 イメージ図 今回、完成した作品 イメージ図 今回は、Vanilla Framework v2.23.0を使って、作ってみました。 ずっと前から試してみた…

ルビをふる

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

前回のおさらい

fossa-hobby.hatenablog.com Webブラウザのブックマークの管理を、HTMLファイル形式にしようと思ったキッカケは、Firefoxです。 Firefoxって、ブックマークをエクスポートすると、HTMLファイルが出力されます。 ブックマークをHTMLで管理するのも有りだと思…

Bookmark

昔から、Bookmarkの管理に悩まされていました。 FirefoxとGoogle Chrome、訪問するサイトによって、ブラウザを使い分けています。 Firefoxでブックマークしたサイトは、Firefoxにしか登録されないので、Google Chromeで見たい場合、不便でした。 Raindrop.io…

Grav v1.7.0

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

Bootstrap v4.6.0

Bootstrap github.com Bootstrap v4.6.0が、リリースされました。 Documentsが、Hugoになったらしいです。

Foundation for Sites

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…

デザインテーマ作成(2)

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

デザインテーマ作成(1)

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 目指すは、もちろん参加賞です。 レッドスター100個プレゼントと書いてあるけど、最大100名様なので、ゲット出来るかどうかは、微妙です。 は…

はてなブックマーク

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

HTMLタグ

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

Cirrus 0.6.0

Cirrus 数日前に、Cirrus 0.6.0になっていました。 0.5.5がリリースされたのが、2019年8月27日です。 github.com 最初は、Bootstrapを使っていましたが、今はUIkit3を使い続けています。 ここ数カ月は、Tailwind CSSも、使い始めました。 いずれ、UIk…

Vite

前から、Viteが気になっていたので、試してみました。 github.com 試したバージョンは、v1.0.0-rc.8です。 書いてある通り、試してみました。 npm init vite-app <project-name> cd <project-name> npm install npm run dev http://localhost:3000/で、表示されます。 Productionの場合は</project-name></project-name>…

Composer 2.0

Twitterで、Composer 2.0 is now releasedの呟きが、目立っていました。 Composer 確認すると、私のComposerの現在のバージョンは、1.10.15でした。 最新の1.10.16にするには、下記の通り(試しました)。 composer self-update --1 こんなメッセージが出ま…

テーマの表示確認

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

Hugo v0.76.5

Hugo 気がついたら、Hugoの最新のバージョンが、v0.76.5になっていました。 以前の状態をおさらい opll-inaka.hatenablog.com Hugoの自作したテーマで、Foundation for Sitesを使っていました。 Hugoで使われていたgithub.com/bep/go-tocssが、github.com/be…