CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は
CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。 Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。 What CSS length unit should you use? 以下は、そのフローの解説です。 フローの入り口は、下記のように分かれています。 ポジショニング、ディテール・エフェクトに適したCSSの単位 スペースに適したCSSの単位 フォントサイズに適したCSSの単位 FlexboxとGridに適したC
45分登壇で75%効率化したMarkdown+Cursorによる生成AIスライド作成術 - Qiita
KDDIアジャイル開発センターのpiyonakajimaです。 突然ですが、あなたは登壇スライドの作成にどれぐらいの時間をかけていますか？ 6/21-22に開催されたScrum Fest Osaka 2024に登壇した際、Markdown+生成AIを活用して登壇スライドを作成しました。その際、45分の登壇資料作成を75%効率化（自分比）できました。 普段からMarkdownで資料を作成している方からすると、これまで時間かけすぎやろ、というツッコミが聞こえてきそうですが、登壇資料の作成時間に悩まれる方は沢山いらっしゃるのではないかと思います。今回はこの時に実施した工夫をお話します。 以下がMarkdown(Marp)と生成AIを使って執筆した45分の登壇資料です。一部PowerPointで作図した過去資料から流用しています。 Marpでは、たとえば以下のようなmarkdownを書くと、 --
ゲーム感覚でプログラミング学べるサービス集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログ
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
Tailwindcssは素晴らしいという話 - GitPress.io
Tailwindcssとは https://tailwindcss.com/ CSSライブラリの一種。 BootstrapやBulmaのような他のCSSライブラリと異なり、 .btnや.cardといったコンポーネント系のクラスは定義されておらず、 <b>1つのスタイルのみを変更するユーティリティ系のクラスがたくさん詰まっている</b>のが特徴。 Tailwindcssで定義されているクラスの例: .font-bold { font-weight: 700; } .rounded { border-radius: .25rem; } .hidden { display: none; } この特性がWeb開発で一体どんな効果をもたらすのか？ Web開発ではおなじみのBootstrapと比較しながら学んでいこう。 Bootstrap vs Tailwindcss : ボタンの例 Bootstra
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク