Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

2024/03/18 7 users CSS Tailwind CSS HTML コンポーネント化

Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む

【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】

2024/03/07 9 users Vue マクロ script import ref

<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ... 続きを読む

Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

2024/03/07 14 users Chr Flex 垂直方向 ブロック要素 中央

間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chr... 続きを読む

marquee 入れ子 どうなる - hogashi.*

2023/07/11 44 users Marquee Direction hogashi 入れ子

<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee... 続きを読む

なぜ <div> に onClick がダメなのか？

2023/06/18 144 users eslint onclick 要素 みなさん 設定

■ はじめに <div>要素にonClickを定義しない方がいい、ということを聞いたことがあります。 みなさんも聞いたことないでしょうか？ ただ、なぜ良くないのか？ 理解してなかったので今回調べてみました。 ちなみに、ESLint でもそのような場合にワーニングを吐いてくれるものがあります。 ESLint の設定にもそれに対応す... 続きを読む

フロントエンドの main() を合成関数として副作用を集約する

2023/05/26 24 users main フロントエンド 副作用 createElement

これは未実装のアイデアを含む記事です。(後述する lint rule が未実装です) 要は EffectSystem を作ろうとしました。 https://www.eff-lang.org/ void に意味を込めたい こういうフロントエンドのコードについて考えてみましょう。 function mount(): void { const div = document.createElement('div'); div.textConte... 続きを読む

GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*

2023/04/10 55 users textarea シンタックスハイライト GitHub 目次

ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div... 続きを読む

<div style="max-width: 480px;">What Is ChatGPT Doing … and Why Does It Work?</div>

2023/02/15 8 users max-width div style 480px

See also: “Wolfram|Alpha as the Way to Bring Computational Knowledge Superpowers to ChatGPT” » It’s Just Adding One Word at a Time That ChatGPT can automatically generate something that reads even superficially like human-written text is remarkable, and unexpected. But how does it do it? And why ... 続きを読む

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

2023/02/09 160 users Button 実装 buttonタグ divタグ HTML

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したも... 続きを読む

CSSで画像をハーフトーン（網点）に加工する

2022/10/20 10 users CSS ハーフトーン 網点 濃淡 ドット

2022年10月20日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れ... 続きを読む

React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita

2022/05/30 202 users Qiita const Button Prev ＡＤＤ

const Counter = () => { const [count, setCount] = createSignal(0) createEffect(() => { console.log(`Count: ${count()}`) }) //第２引数はありません。SolidJSが勝手に依存している状態を感知してくれます。 return ( <div> <div>{count()}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button... 続きを読む

これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

2022/05/11 36 users CSS モダンCSS 左揃え 中央配置 要素

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパ... 続きを読む

numpy より速い？Go の行列演算ライブラリ nune

2022/03/02 8 users fmt NumPy Math Iris Rand

※ Div だけ妙に遅いのが気になる NumPy は Python とは言え中身はC言語で書かれている事を考えると、結構いいパフォーマンスが出ていると言えるでしょう。 サンプルコード iris のロジスティック回帰を nune で書いてみました。 package main import ( "bufio" "fmt" "log" "math" "math/rand" "os" "github.com/vorduin... 続きを読む

中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskd

2021/09/06 19 users dskd span タギング HTML div 要素

公開日 2021年9月6日 タギング HTML レイアウトや装飾目的で、中身のない div 要素や span 要素、いわゆる「空 div」「空 span」を作ることはままある。しかしそれは仕様として妥当なのだろうか？ 目次 レイアウト目的の空 div の例 装飾目的の空 span の例 HTML にレイアウト目的や装飾目的のための要素はない div と s... 続きを読む

マコなり社長の株式会社divを退職しました

2021/09/04 464 users まご 株式会社div 親友 社長 同僚

マコなり社長の株式会社divを退職しました あなたは誰？マコなり社長が経営する株式会社divの元社員です。 数年勤務した後に退職しました。 divで働けて良かった？良かったと考えてます。 divの同僚はみんな心優しくて有能な方ばかりでした。 退職した今では、親友として連絡を取り合っている元同僚もいます。 また、div... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS display

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

useMemoのコストを心配する前に余計なdivを減らせ！

2021/05/26 15 users React useMemo React.memo 筆者 手段

React では、useMemoやReact.memoなどが最適化の手段として知られています。 これらは最適化であるため、必要が無いのにuseMemoを使うことは無駄な最適化であるとして避けられる傾向にあります。 筆者が簡単なベンチマークを取ってみたところ、あるコンポーネントが一つ余計なuseMemoを持っているよりも、一つ余計な<div... 続きを読む

CSS の Container Queries おためし - 見返すかもしれないメモ

2021/04/25 176 users Container Queries CSS コンテナクエリ

CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (m... 続きを読む

エビも中国発ウイルス「DIV1」猛威　アジア拡散の恐れ　強烈な感染力、致死率80％以上も（みなと新聞） - Yahoo!ニュース

2020/07/15 104 users 猛威 震源 広東省 毒性 エビ養殖

中国発の新型コロナウイルス感染症が世界を混乱に陥れる中、エビ養殖の世界でも中国を震源とする「DIV1」（十脚目虹色ウイルス）と呼ばれる毒性の強い新種のウイルスが猛威を振るっている。今年2月に中国の養殖エビ一大産地の広東省で再発したのに続いて、5月には海を隔てた台湾にも拡散。東南アジアのエビ養殖主要国に... 続きを読む

モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック | コリス

2020/02/21 17 users コリス トグルスイッチ span モダンCSS テクニック

モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form... 続きを読む

乳児用チャイルドシート「前向きに着用」は間違い　交通教本も誤認識　制作側に直撃 - ニュース | AUTOCAR JAPAN

2019/09/01 19 users 前向き 直撃 AUTOCAR JAPAN 着用 誤認識

[“読者の皆さんは、ご家庭のチャイルドシート、どのように取り付けていますか？　乳児用チャイルドシートを前向きに着けていたら、それは間違い。交通教本にも誤表記がありました。”,[{“acf_fc_layout”:”paragraph”,”title”:”免許更新時に配布　「交通の教則」に間違い”,”text”:” text：Kumiko Kato（加藤久美子）<\/div... 続きを読む

CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

2018/12/21 14 users 透過 CSSスニペット net 境界線 要素

Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね css :root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: ... 続きを読む

世界一無駄な、画像をCSSで書き換えるジェネレーターを作った+検証 - Qiita

2018/12/19 7 users background-image Qiita URL CSS

これですよね。 それ以外にも画像を表示させる方法はいろいろ。 画像を表示させる方法 わりと使うのがbackground-imageに指定してあげるやつ <div class="main-image"></div> <style> .main-image { background-image: url("http://...") } </style> 次はbase64エンコードされたやつを埋め込むやつ。 小さい画像なら埋め... 続きを読む

AIやVRも“学び放題”のプログラミング教室「TECH::CAMP」--すべての学びの入り口に - CNET Japan

2018/07/09 23 users camp tech プログラミングスクール テクノロジ 入り口

アプリやゲーム、ウェブサービスのプログラミングスクールは数多く存在するが、AIやVRといった最新のテクノロジまでカバーしているところはまだまだ少ない。divが運営する「TECH::CAMP（テックキャンプ）」は、それらの最新技術をいち早く取り入れ、定額料金ですべてを学び放題にしているプログラミングスクールだ。受講... 続きを読む

プログラミング教室「TECH::CAMP」のdivが初の自治体連携--高知県と人材育成へ - CNET Japan

2018/05/16 11 users プログラミングスクール camp tech 新卒 人材育成

プログラミングスクール「 TECH::CAMP 」などを運営するdivは5月16日、高知県と業務委託契約を締結し、「アプリ開発人材育成講座＜エキスパートコース＞」を開講すると発表した。期間は7月中旬〜11月中旬で、受講料は5万円。 受講人数は30名を予定しており、高知県内の求職者、大学生・専門学校など高等教育機関の在校生・新卒（新規高等学校卒業者は除く）をはじめ、高知県へのU・I ターン希望者も対... 続きを読む