静的サイトジェネレータ 11ty を使いながら説明してみる
はじめに 静的サイトジェネレータをいろいろ調べているうちに 11ty というものを知り、1 度使ってみました。 その際、日本語ドキュメントが少なかったので公式ドキュメントを読んで学んだことをまとめます。 「よし！記事書くか！」となったところ何と 2 週間前にv2.0.0が登場したことを知り、もう一度ドキュメントを読む羽目になりました。 内容が間違っていないかできる限り確かめたつもりですが、間違いがあったらご指摘ください。 11ty とは シンプルな静的サイトジェネレータです。 古くて温もりのある Jekyll の代替というのがコンセプトっぽいです。 2023 年 2 月 26 日時点で Github のスター数は 13,285 個で、Jamstack な SSG の中では 15 番目に多いです。（1 位は Next.js の 97,399 個、因縁の Jekyll は 4 位で 45,69
Geri Reid - Forms best practice
Form design Best practice, research insights and examples Here's my best practice guidelines for form design. Working on a design system for a bank taught me a lot about forms. I watched testing in labs. I worked alongside experts from specialist accessibility organisations. I saw forms tested by people with disabilities and users of assistive technology. I've also read a lot of research. From all
構造化データでよくある質問をマークアップする | Google 検索セントラル | ドキュメント | Google for Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 よくある質問（FAQPage、Question、Answer）の構造化データ 「よくある質問（FAQ）」のページには、特定のトピックに関する質問と回答の一覧が掲載されています。「よくある質問」のページを適切にマークアップすると、検索結果にリッチリザルトを表示し、Google アシスタントのアクションで対応できるようになります。これにより、想定するユーザーにリーチしやすいサイトになります。以下に、「よくある質問」のリッチリザルトの例を示します。 構造化データを追加する方法 構造化データは、ページに関する情報を提供し、ページ コンテンツを分類するための標準化されたデータ形式です。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。 構造化データの作成、テスト、リリ
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る | Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
ACFのWYSIWYGメニュー(Full/Basic)をカスタマイズする方法について | ahalog – Web Blog
この記事ではACF(Advanced Custom Fileds)のWYSIWYGメニューを調整する方法をご紹介します。 個人的にツールバーの定義名称が不明で、調べるのに少し時間を費やしたので取りまとめてみました。 ACFのWYSIWYGにはFullとBasicがある WordPressの従来の標準WYSIWYGでは一つしかメニューバーがありませんが、ACFではフィールドタイプからWYSIWYGを選択すると、ツールバーが表示されFullとBasicを選択することができます。 標準のFullでは以下のメニュー構成となります。 Basicでは以下の構成となります。 このままでも便利ですが、それぞれ過不足が出てきて調整したくなることも多いと思います。そこでこの記事ではカスタマイズする方法を2種類ご紹介します。 ツールバーをカスタマイズ (プラグイン利用) 手軽に行うにはTinyMCE Advan
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript. There is a lot to know about links and buttons in HTML. There is markup implementation and related attributes, styling best practices, things to avoid, and the even-more-nuanced cousins of the link: buttons and button-like inputs. Let’s take a look at the whole world of links and buttons, and all the conside
サーバからjsonが送信される処理をコピペで作ったから サンプルデータがそのままになってるとかちゃうやろな… 元スレ: http://tomcat.2ch.sc/test/read.cgi/livejupiter/1597390365/
markdownでアンカーを入れるには
Markdownにアンカーを入れる無難な方法はこれ ジャンプ元はMarkdown記法、ジャンプ先はhtml記法です。 両方ともMarkdown記法で書く方法もあるようですが、いくつかのエディタで試しても実現できなかったので、今のところMarkdown＋htmlの方法に落ち着いています。 【ジャンプ元の書き方】 [ここから](#jump-there) 【ジャンプ先の書き方】 <a name="jump-there">ジャンプ先に表示される文字列</a> 文字が青いのは、アンカーが設定されているためで、多くのエディタやプレビューワーも同様な表示がされています。 「アンカーの強調は不要、普通の文字と同じように表示したい」という場合は</a>を手前に移動させて <a name="jump-there"></a>ジャンプ先に表示される文字列 とすれば この方法を使っている人も多いらしい。 でも、文章
Zim - a desktop wiki
Zim - A Desktop Wiki Home Zim is a graphical text editor used to maintain a collection of wiki pages. Each page can contain links to other pages, simple formatting and images. Pages are stored in a folder structure, like in an outliner, and can have attachments. Creating a new page is as easy as linking to a nonexistent page. All data is stored in plain text files with wiki formatting. Various plu
Webサイトを上位表示させるためには、検索エンジンに評価してもらう必要があります。 SEO対策には構造化データというものがよく使われますが、その構造化データのフォーマットとして「json-ld」があります。 一見難しそうに感じる言葉かもしれませんが、仕組み自体はあまり難解なものではありません。 今回は構造化データを用いる際に必要な知識「json-ld」がどんなものなのか、どのように使っていくのかをご紹介します。 json-ldとは？ json-ldとは、簡単に言うと「構造化データを記述する際のフォーマット（仕様）」のことです。 構造化データのフォーマットはいくつか種類がありますが、json-ldはその中でもGoogleが推奨しているので、現在最も一般的に使われているフォーマットと言えます。 そもそも「構造化データ」とは？ json-ldを知るには、そもそも構造化データとは何かを把握したほう
select optionとは？ select optionとは、<select>タグの<option>タグのことで、画面上の見た目では選択式メニューの選択肢にあたります。 主に入力フォームで複数の選択肢から1つを選ばせるときに使用します。 プルダウン式の選択式メニュー、またはリスト型の選択式メニューを設置することが可能です。 [PR] Webデザインで副業する学習方法を動画で公開中 select optionの書き方 <select>タグを使用したプルダウン型の選択式メニューは、次のように書きます。 HTML： <select name="住所"> <option value="tokyo">東京都</option> <option value="kanagawa">神奈川県</option> <option value="chiba">千葉県</option> <option valu
CSSで文章を一行ずつ時間差で順番にフェードインさせる方法 - NatsukiMemo なつ記メモ of WEBデザインTIPS
6行のテキストを一行ずつ3秒間隔でフェードイン表示させています。 フェードインには、CSSのキーフレームアニメーションを用いています。 そして、animation-delayを使って時間差が出るように遅延時間を調整しています。 HTML DEMOのコードは下記になります。 フェードインに必要なHTMLコードは 4行目から9行目のpタグのみです。 時間差で表示させる文章を一行ずつpタグで囲っています。 <body> <div class="wrap"> <div class="content"> <p class="fadein txt01">1行目：テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p class="fadein txt02">2行目：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
Eleventy入門(第1回) - 11tyで手早く静的サイトを作成する | 豆蔵デベロッパーサイト
本サイトは開設当初から静的サイトジェネレーター(SSG)としてEleventyを使っています。 もう1年以上使っていますが、特に大きな問題なく運用できています。 そんなEleventyが2023-02-08にv2.0となりました[1]。 ELEVENTY V2.0.0, THE STABLE RELEASE Eleventyはコンテンツ重視の静的サイト作成に大きなアドバンテージを持っていますが、特に日本では今ひとつ認知度がないと感じます。 そこで、これまでの運用経験からEleventyの入門シリーズを書いてみようかと思います。 EleventyはNode.jsベースの静的サイトジェネレーターです。 主に以下の特徴があります。 デフォルトでゼロコンフィグ。簡単に導入できる。 複数テンプレート言語をサポートし、各々は併用OK（HTML、マークダウン、Liquid、Nunjucks、etc...
jQueryのslideToggle()のような要素をスライドしながら表示非表示切り替えるアニメーション。かつてはJSで要素の高さを取得する必要があったりCSSだけで行うとアニメーションにムラがあったり…とjQueryを使わないと何かと面倒な実装が必要でしたが、現在ではCSS2行を用意して、そのうちの1行を切り替えるだけで実装が可能です（transitionプロパティは除く）。しかも全モダンブラウザ対応済みです。 結論実装方法は至極簡単で、開閉されるパネル要素にdisplay:gridを指定し、grid-template-rowsプロパティの値を0fr↔1frに切り替えるだけです。 ※overflow:hiddenを指定した子要素1つが必要です。
CSS display の複数キーワード構文の使用 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Complete Guide to Links and Buttons | CSS-Tricks
noteのソースコード「hello:"world"」 : IT速報
json-ldの仕組みとは？SEO効果と構造化マークアップの方法を解説 | WEB集客ラボ byGMO（GMO TECH）
selectとoptionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】
アコーディオンのスライドアニメーションはCSS2行で実装できる – TAKLOG
racingsimkmr.base.shop
togetter.com
www.zakzak.co.jp
artplaza.geidai.ac.jp
www.leafkyoto.net
totteoki.kyoto.travel