爆速できれいな LT スライド作りを支える技術
みなさん LT スライドってどうやって作っていますか？ 最近サークル内などで LT をする機会があり、「スライドどうやって作っているの？」と聞かれることがあったため、私の LT スライド作りを支える技術をまとめておこうと思います。 直近で作ったスライドの例 ↓ スライドを Markdown で書く タイトルにもある通り「爆速で」作るためには、テキストベースで作っていくのが最適だと考えています。 パワポや Canva など WYSIWYG エディターでスライドを作ることも可能ですが、LT を聞きながら自分の LT のスライドを作るような場面では、GUI で凝っている余裕はありません。 そして HTML を書くのは大変なので、軽いマークアップ言語としてまず出てくるのは Markdown だと思います。 Markdown からスライドを作成できるツール・サービスはいろいろありますが、私はスライド
How SVG Line Animation Works | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I bet all of you have seen that little trick where an SVG path is animated to look like it’s drawing itself. It’s super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a
★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
bulma.ioをカスタマイズしてbulma臭を爆速で消す方法。 | Devsway
カテゴリー Amazon (2) Kindle Unlimited (1) Android (4) Apps (8) Architecture (2) AWS (10) S3 (4) Book Review (2) Browser (1) Business (3) CI (6) CircleCI (3) Jenkins (2) Cloud Storage (1) Coffee (2) Command (5) CSS (32) Basic (5) BULMA (1) 設計思想 (5) Database (8) monogoDB (2) MySQL (1) SQL (3) Basic (3) Design (10) Adobe Illustrator (2) Bézier curve (1) Color (3) figma (1) Font (1) Development Environmen
CSSでフォルダツリーを作る | かちびと.net
Result こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうです css .tree {/*親要素*/ position: relative; background: white; margin-top: 20px; padding: 30px; font-size: .85rem; font-weight: 400; line-height: 1.5; color: #212529; } .tree ul {/*親フォルダ*/ padding-left: 5px; list-style: none; } .tree ul li {/*ファイル名部分*/ position: relative; padding-top: 5px; padding-bot
Bulmaswatch
Hello World Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Second level Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutr
ノンデザインで簡単！CSSフレームワーク「Bulma」でいろんなUIを実装してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもだよ！ はやちだよ！ (`⊙ω⊙´)ｶｯ!! 今日はノンデザインでもパーツを組み合わせてコーディングができちゃうBulmaをご紹介いたします！ 導入方法 まずはnpm経由でBulmaをインストール。 npm install bulma-start 使いたい部分をimportします。 @import "../../node_modules/bulma/sass/utilities/_all.sass"; @import "../../node_modules/bulma/sass/base/_all.sass"; @import "../../node_modules/bulma/sass/elements/_all.sass"; @import "../../node_modules/bulma/sass/grid/_all.sass"; @import "../../node_mo
こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS - Qiita
人気のUI作成フレームワークBootstrap 4では手軽にレスポンシブWebデザインを実現することができます。また、定義されているスタイルを学ぶことでレスポンシブなレイアウトを作る上でのCSSの勉強にもなります。本エントリーでは入門記事の一環として、Bootstrap 4でのレスポンシブWebデザインの基本について解説しつつ、定義されているCSSコードの意味にまで踏み込みます。 Bootstrap 4のブレークポイントと区間 レスポンシブなWebコンテンツではデバイス幅によってレイアウトが変わっていくのですが、「どの画面幅でレイアウトが変わるのか」という基準になるのが「ブレークポイント」です。Bootstrap 4では4つのブレークポイント(0pxを含めると5つ)が存在し、それぞれのブレークポイントの間には名前がついています。4つのブレークポイントと5つの区間（grid tier）の名前
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
使える！CSSアニメーション 20選 | SONICMOOV LAB
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連：コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
15 Inspiring and Awesome CSS Animation Examples on CodePen | Envato Tuts+
1. Pure Watch CSS Image Animation Pure CSS watch animation by Grzegorz Witczak (@Wujek_Greg). This is a lovely example of combining CSS transform (rotate and translate) to position the hands and the day/night indicator on a stylish watch face. 2. Submarine CSS Animation Example Submarine animation with CSS in CodePen by Alberto Jerez (@ajerez). Gorgeous use of the circular port-hole shaped contain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
shadcn/ui
Bulma-Extensions
With sass-cli
Bulma Fluent: Fluent Design Theme for Bulma CSS Framework
CodyHouse | Web Design Nuggets
Icons | Font Awesome
CSSのスタイルを解除する - Qiita
display:none と visibility:hidden の違い - Qiita
