Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 本章では、開発環境にTailwindをインストールする方法に加えて、設定ファイルの記述方法や、エディタの設定などについて説明します。執筆時点でのTailwindの最新バージョンである、3.2.4の使用を前提にします。 Tailwind CSSのインストール Tailwindは、さまざまな開発環境にインストールして使用できます。Tailwindに関連するアプローチとして、CSS in JSやCSS Modulesなどのツールもありますが、これらを使用できるのは一部のSPA（Single Page Application）などの環境だけに限られます。しかしTailwindであれ
はじめに 本稿は、拙著『タイポグラフィの領域※1』（以下、『領域』）について、その結論部を補足する試みである。 『領域』を執筆した動機は、タイポグラフィという言葉の定義化の必要を痛感したからである。まずこの国では、本来の意味と齟齬をきたす使われ方がなされていると見えたからであり、次に本質的な概念の抽出が、その語を口にする者にとっては必要だろうと考えたことにある。そのためには時代の技術変化に支配される環境下においても一定不変である概念を引き出す努力が不可欠であり、その定義化という作業では歴史を遡らざるを得ないことから、可能な限りの広い渉猟と慎重さが要求される。それに応えられたかはかなり心もとないが、幸運にも発表の機会を得て、ここに四半世紀を迎えようとしている。 『領域』の結論では、「タイポグラフィとは活字書体による言葉の再現・描写である」と示し※2、定義の一例として提案した。 タイポグラフィ
永遠のオルタナティブ - 正木香子【タイポグラフィ・ブギー・バック】
モリサワのゴシック体〈中ゴシックBBB〉は、1960年代に写植文字盤として発売された。 現在は国内でデジタルフォントのトップシェアをほこるモリサワだが、もともとは写研と同様の写植メーカーである。 独自の組版システムにこだわって、DTPに参入しなかった写研とは対照的に、モリサワは自社書体のデジタル化を推進した。1989年、他に先駆けMacintosh用フォントとして公開された２書体のうちのひとつが〈中ゴシックBBB〉である。 デジタルフォントのなかでも特に歴史の長い、オーソドックスな書体。 でも高く評価されているとは思えない。DTPの発展に寄与した大きな功績のわりに、なぜか語られることの少ない、陰日向の存在なのである。 「リラックス」（マガジンハウス、2001年7月号）「小西康陽、フリー・ソウル 2001」 「リラックス」（マガジンハウス、2001年7月号）〈中ゴシックBBB〉 私自身は、こ
Slidevでスライドを作成してみました。 この記事では、良かった点や作成中に調べたことを紹介します。 Slidev とは？ Slidev を使えば、Markdownでスライドを作成できます。 Vueでコンポーネントを作ってスライドに表示させたり、 Windi CSSでclass属性にスタイルを記述できます。 良かった点 Vueは2年ぶりぐらい、初Windi CSSの筆者でも使えました。 良かった点を先にまとめておきます。 Markdownで書ける 使い慣れたテキストエディタで編集できる GitHubで管理できる レイアウト・コンポーネントにより使い回しがしやすい サイズやレイアウトがテキストとして可視化される インストール Installation | Slidevに従い、インストールします。 npm init slidev@latest 以下のコマンドでブラウザが開き、スライドが表示さ
コアブロックリファレンス
フィードバック この P2 ブログの内容に関して質問やご意見がある場合は、WordPress.org アカウントでログインしてコメントできます (新規作成はこちら)。 TopicsArchives / アーカイブ Audio / 音声 Avatar / アバター Pattern / パターン Button / ボタン Buttons / ボタン Calendar / カレンダー Categories List / カテゴリー一覧 Code / コード Column / カラム Columns / カラム Comment Author Avatar / コメントの投稿者のアバター (非推奨) Comment Author Name / コメントの投稿者名 Comment Content / コメント本文 Comment Date / コメント日付 Comment Edit Link / コメ
Introducing four new international features in CSS | Blog | Chrome for Developers
Four new international CSS features from the CSS Text Module Level 4 are coming to Chrome. This post explains what has already shipped, and what is coming soon. From Chrome 119: Japanese phrase line breaking with word-break: auto-phrase. Behind a flag from Chrome 120: Inter-script spacing with the text-autospace property. Under development: Chinese, Japanese, and Korean (CJK) punctuation kerning w
CSS 特定の子要素を持つ要素を指定するCSSセレクタ CSSセレクタで共通の子要素を持つ親要素をまとめる Chrome Devtoolsで変更したCSSの差分を確認する Git Gitでmainブランチ以外のブランチを削除する Gitでaliasを設定する JavaScript JavaScriptで文字列から最初の1行を取得する JavaScriptで配列に値を挿入する JavaScriptで配列の最後の値を取得する Marked JavaScript(NodeJS)でコールバック関数をPromise化する ReactやNext.jsを使っているオープンソースのWebアプリケーション JavaScriptのString.replace()の第2引数の文字列をエスケープする JestのmockClear、mockReset、mockRestore Vueを使っているオープンソースのWeb
Jetpack Composeで「もっと見る」をタップしたら伸縮するExpandableTextを自作しました - Sansan Tech Blog
こんにちは、技術本部 Mobile Applicationグループに所属しているAndroidエンジニアの鎌田です。 TLDR こんな感じのUIをJetpack Composeで自作しました！ 初めに スマホアプリを使用していると時折、先述のようなUIを見かけると思います。*1 要件を言葉で説明すると以下のようになるでしょうか。 長いテキストを表示したいが、初めは先頭の数行と「...もっと見る」のようなテキストだけ表示しておく タップするとテキストが縦に伸びて全文が表示される。最後の行の行末に「閉じる」を表示する このようなUIは既に海外の優秀なエンジニアさんが自作してブログ等に公開されているため、それを参考にすれば良いのですが、 日本語環境の場合、全角文字がアルファベットより文字幅が大きいことが理由で、レイアウトが崩れたり画面端で文字が見切れるなど、そのまま参考にできないことが多くありま
CSS 特定の子要素を持つ要素を指定するCSSセレクタ CSSセレクタで共通の子要素を持つ親要素をまとめる Chrome Devtoolsで変更したCSSの差分を確認する Git Gitでmainブランチ以外のブランチを削除する Gitでaliasを設定する JavaScript JavaScriptで文字列から最初の1行を取得する JavaScriptで配列に値を挿入する JavaScriptで配列の最後の値を取得する Marked JavaScript(NodeJS)でコールバック関数をPromise化する ReactやNext.jsを使っているオープンソースのWebアプリケーション JavaScriptのString.replace()の第2引数の文字列をエスケープする JestのmockClear、mockReset、mockRestore Vueを使っているオープンソースのWeb
はじめに 中村 こんばんは。きょうはエミール・ルーダーの『Typographie』、邦訳は『タイポグラフィ —— タイポグラフィ的造形の手引き※1』、この書物をよみとくという趣旨で、大林さんと私でおはなしをしてゆきます。おなじタイミングで邦訳が出版されたヨゼフ・ミュラー=ブロックマン『グリッドシステム —— グラフィックデザインのために※2』もそうでしたが、ともにふたりが晩年といえる時期に編んだ、それぞれのタイポグラファ、あるいはデザイナー、そしてその教育者としての集大成といえる書物です。 そうした意味で、これらをいわゆるハウトゥー本的な実用書としてみると、いろいろと落としてしまうことがあるでしょう。いずれも邦訳としては今年（2019年）の発刊となりますが、それぞれが書かれた時代からすれば、ずいぶんと時間が経っています。ルーダーの『Typographie』は1967年の発刊、『Grid S
日本語のTypographyの設定
日本語のTypography、意外と誰もまとめてくれなくて悲しみながら自分で調整したので置いておく用。 これにした: 様子: 気持ち フォントとか全部Noto Sans JPでいいよ(少なくともLinuxでキレイに見えるなら他の環境のことは知らねえというスタンスでいるので) Material Designだとh5, h6, body2とかあるけどまあ使うことないよ Material Designは全体的にfont-sizeのメリハリが大きすぎなので弱めて、代わりにletter-spacingは強めに設定しました。h1,h2は少し寄りすぎくらいかもしれない…が、カタカナ・ひらがなと密度の高い漢字だとだいぶ変わってきてしまうのでどこを取るのかは難しいところ…(普通の文章でそこまで漢字が連続することもそんなに無い気がするけど…) font-weightは大きい文字だと500くらいがキレイに見える
MonohibiではMarkdownで記事を書き、HTMLに変換して表示しています。 そこでMarkdownをHTMLに変換するのために利用しているnuxt/markdownitと、その周辺のプラグインを紹介します。 nuxt/markdownit MarkdownをHTMLに変換します。 nuxt/markdownit インストール % yarn add --dev @nuxtjs/makdown-it 設定 // nuxt.config.js { modules: [ '@nuxtjs/markdownit' ], markdownit: { injected: true, // $mdを利用してmarkdownをhtmlにレンダリングする breaks: true, // 改行コードを<br>に変換する html: true, // HTML タグを有効にする linkify: tr
CSS Nite LP61 「これからのフォントとウェブでの組版を考える日」フォローアップ（3）鷹野 雅弘｜CSS Nite公式サイト
CSS Nite LP61 「これからのフォントとウェブでの組版を考える日」フォローアップ（3）鷹野 雅弘 記事公開日：2020年1月 2日（木） 2019年5月18日に大崎ブライトコアホールで開催したCSS Nite LP61 「これからのフォントとウェブでの組版を考える日」のフォローアップとして、鷹野 雅弘（スイッチ）の『ウェブコンテンツでの組版について考える』セッションのスライドなどを公開します。 スライド（PDF、291ページ、49MB）OpenType関連のチートシート（PDF、1ページ、.5MB）動画 ご参加ありがとうございました！ 今回のセッションでは「なぜ、そのようなルールがあるのか」の基本からと、紙、ウェブの違いを、その経緯を踏まえて「知識を均す（ならす）」に重きをおいて組み立てました。 実は、用意したコンテンツの1/4くらいを捨てていまして、もっともっとお伝えしたいこと
タイポグラフィ7つのルール その6-2 取りあえずこれだけ知っておこう、組版上の推奨事項 | Moji-Blog もじの美貌録（備忘録）
6.3 美しい紙面を作る8つの文字組み推奨事項 文字組みには一定の遵守すべき事項があります。細かくすべてを説明するのは大変ですので、これだけ知っていれば取りあえずは大丈夫だろうと思われる８項目をあげてみました。 6.3.1 ●和文用・英文用の区別を明確に ① 和文・欧文ともに同じ字形が存在する約物【（）！？＆“”】などは、それぞれ和文用・欧文用を混在させないようにしましょう。特に外部からの支給テキストは、和文用・欧文用が混在している確率がほぼ100％なので注意が必要です。 （figure6-5） （figure6-5）のキャプション 左側囲み図の説明：括弧類や、感嘆符、疑問符、引用符は、欧文にも存在するが、和文と共通のデザインではない。特に括弧類は上図のようにかなり違う。また、位置も書体によってまちまちだが、おしなべて和文より下がる。リュウミンはそれが顕著である。 洋数字も和文用と欧文用は
はじめに この記事は東京高専プロコンゼミアドベントカレンダー2021の記事です． 今は山梨大学へ編入した身ですが，枠が空いているからとせがまれ書くことになりました． この記事について 以前，電子ペーパーでなろう小説を読めるようにするを書きました． 電子ペーパーを搭載したM5Stack製のガジェットであるM5Paperでなろう小説を読めるようにしようと頑張った記事です． 記事を読んでいただけたら分かる通り，HTMLをレンダリングしてM5Paperに転送しています． 出力する画面はキレイではあるものの，ページ遷移やデータ転送が異様に遅いものとなっています．また，スマホorPCありきでスタンドアロンではありません．生成される画面がスマホorPC依存であり，崩れた際にCSSを調整するのも一苦労でした． 同時にネットワーク固有の問題も少々出てきました． なので「M5Paperでなろう小説を読めるよう
【かきしるす】神田和泉町｜近代医学と近代タイポグラフィが本格スタートした記念の地｜下谷和泉橋通り・神田佐久間町などと書きしるされた大名屋敷跡周辺 | NOTES ON TYPOGRAPHY
故司馬遼太郎が、新聞連載小説『胡蝶の夢』取材のために、「下谷和泉橋通りの医学所」をたずね、収穫無く帰阪したことを連載中に記録している。 『胡蝶の夢』－こちょうのゆめ－は、司馬遼太郎の歴史小説で、『朝日新聞』の連載小説として1976年11月11日－1979年1月24日まで朝刊で連載された。資料収集にたけ、博覧強記と評された司馬遼太郎でも、目的とした「下谷和泉橋通りの医学所」を探しあてることができず、じつは近接している佐久間町で蕎麦を食しただけで、空しく帰阪したことをしるしている。 東京における最初の西洋医学校でありながら、碑もたてられていないのであろう。 なんだかばかばかしくなって、そばを食いおえると、そのまま東京を離れてしまった。 『胡蝶の夢』（司馬遼太郎 新潮文庫 第１－４ 1983年） 『胡蝶の夢』は、徳川幕府の倒壊と徳川十五代将軍慶喜の苦悩、また戊辰戦争での軍医としての松本良順（維新
Bootstrap4移行ガイド
Bootstrap4移行ガイド ※2022/7/20：v4.6.2の公開に伴い更新。 PST（米国太平洋時間）2018/1/18にBootstrap v4.0.0安定版が公開されました。これまでのBootstrap3.xから4.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap4の使い方を3.xからの変更箇所を交えて解説しています。 解説はできるだけ最終版（v4.6.2）に対応するよう更新しています。 ※Bootstrap 4は、2023/1/1に正式なサポートを終了すると発表されました。 ※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。 ※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。 Bootstrapとは？ もともとTwitter社のデザイナーや開発者が作成したB
ページ容量を増やさないために、不具合報告やコメントは、説明記事に記載いただけると助かります。 対象期間: 2020/01/13 ～ 2021/01/12, 総タグ数1: 45,560 総記事数2: 166,944, 総いいね数3: 2,326,183, 総フォロワー数4: 119,088 総合評価5: ((68.756 * 記事数) + (4.457 * いいね数) + (115.138 * フォロワー数))pt 総合順位;タグ名;記事数順位;いいね数順位;フォロワー数順位 1;Python;1;2;1 2;JavaScript;2;1;2 3;Ruby;4;5;7 4;Rails;3;4;16 5;PHP;8;12;12 6;AWS;5;7;30 7;初心者;6;3;61 8;Git;18;14;4 9;GitHub;26;19;3 10;Docker;7;6;28 11;Linux;1
CSS 特定の子要素を持つ要素を指定するCSSセレクタ CSSセレクタで共通の子要素を持つ親要素をまとめる Chrome Devtoolsで変更したCSSの差分を確認する Git Gitでmainブランチ以外のブランチを削除する Gitでaliasを設定する JavaScript JavaScriptで文字列から最初の1行を取得する JavaScriptで配列に値を挿入する JavaScriptで配列の最後の値を取得する Marked JavaScript(NodeJS)でコールバック関数をPromise化する ReactやNext.jsを使っているオープンソースのWebアプリケーション JavaScriptのString.replace()の第2引数の文字列をエスケープする JestのmockClear、mockReset、mockRestore Vueを使っているオープンソースのWeb
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 | gihyo.jp
河野三男「タイポグラフィの領域：補遺」 | ÉKRITS / エクリ
Slidevでスライド作ったら使い回しやすかった | DevelopersIO
Goで指定した値が配列内に存在するか判別する
TypeScriptでDOMPurifyとjsdomを使う方法
デザインの名著よみとく #2 エミール・ルーダー『タイポグラフィ』をよみとく | デザインのよみかた
nuxt/markdownitと周辺プラグインの設定 | Monohibi - モノヒビ
縦書きを実装してみた - ynakano1127のブログ
タグ一覧(ランキング順)【直近１年間/上位25,000タグ】【2021/1 更新停止】 - Qiita
ts-nodeでESModulesを使う方法