Magic UI50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
CSSは日々進化している！知ったら使いたくなる「モダンCSS」機能紹介
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
MicroCMSとViteで作るかんたん静的サイト | DevelopersIO
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事（MicroCMSと11tyで作るかんたん静的サイト）ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればGulpやWebpack等の選択肢もありましたが、Viteの設定が非常に簡便であるという噂を聞いたので試してみることにしました。 HTML CSS JS GulpやWebpack等のビルドツール利用経験 各ツールの役割 MicroCMS：ヘッドレスCMS。コンテンツのデータを登録できる、APIを提供している。 11ty：ヘッドレスCMSのAPIからコンテンツを取得できる静的サイトジェネレーターで、HTMLを出力することができる。複数のテンプレート形式に対応している
サクサク爆速で作業をこなす最新ツール、素材39個まとめ
Web制作やデザイン案件など、クリエイティブな業務の効率アップを考えている方へ。 快適な作業環境づくりには、有益なツールや素材を知っておき、いつでも使えることが重要です。 その理由は、圧倒的な作業スピードとクオリティーの違い。 すべてゼロからしようとすると、時間も労力もかかってしまう面倒な作業も、ツールを使えばクリックひとつで完了したり、そのまま使えるオシャレなデザイン素材など、時短につながることばかりです。 ここで紹介する最新ツールを利用して、ストレスのない快適な作業ワークフローを実現しましょう。
なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと - Shibajuku
こんにちは。 いつも通りのパーマをかけたらトイプードルみたいになった、どうも柴田です。 さてさて、昨年の11月26日に技術評論社さんより「武器になるHTML」というHTMLだけに特化した初学者向けの書籍を出版させて頂きました。 この記事を読んで下さっている方の中にも、すでに本書をお持ちの方もいらっしゃるかもしれませんね。 ご購入頂きありがとうございます！ ひょっとしたら、もう読み終えられた方もいらっしゃるかもですね。 ということで、本書が発売されて半年近く経ちますが、今更ながら、この本をどういう想いで書いて、どんな方に読んで頂きたいのかについて書いてみたいと思います。 目次 初学者の方に向けたHTMLだけの424ページ「とりあえずこう書いておきましょう」は、ありません一人でも多くの人が利用できるWebサイトを構築するために学校やスクールの先生が教科書としても使いやすいように中級者になっても
Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！
2023年9月6日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ ↑私が10年以上利用している会計ソフト！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらいカラーコードに利用するといいでしょう。 Sassの場合の書き方 $ マークに続いて任意の変数名を書き、コロンで区切って変数の値を記述。この値が呼び出されるようになります。実際に使いたい箇所では $ マークと変数名を書けば、変数を呼び出せます。 $main-gutter: 30px; .box { width: 300px; height: 100px; margin: $main-gutter; } CSSの場合の書き方 公式
CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA
offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」 - かちびと.net
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】
ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Park UI