あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Animated clip-path slider Concept 画面を縦半分に二分割した画像スライダーで、画像にマウスホバ
この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。 早く知っておけばよかったと思う、あまり知られていないCSSの実用的なテクニックが中心で、実際の問題ケースや参考サンプル用ソースコードを一緒に確認できます。 前回のお役立ちCSSテクニック集と合わせて確認してみてはいかがでしょう。 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ コンテンツ目次 1. 画像の質感をアップしたい 2. グラスモーフィズム効果を表現したい 3. 入力フォームの使いやすさを改善したい 4. CSS Transformをつかった最新テクニック 5. 2022年に知っておきたい新しいCSSプロパティ 6. position: stickyの正しい使い方 7. レスポンシブ対応の区切り線のつくり方 8. するするとカーテンが降りてくるエ
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コードを確認する 3Dを感じる理由 まず3Dをユーザーに感じさせる理由について考えてみます。紙面にしても画面にしても実態は2Dの平面世界です。画面の中で3Dを感じるのは、人間が2D的に描かれたものから奥行きを知覚する特性があるからです。たとえば、すぼまっていく2本の線があると線が平行であると認知し、奥行きを感じます。この現象を体系化したものが遠近法です。 より具体的な手法として透視図法があります。Three.jsを使った3D表現もこの透視図法によって描画されています。描画自体
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き こんな方法があったのか、思わず納得なCSSテクニックをご紹介 この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。 新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。 普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。 コンテンツ目次 1. ついにCSSコンテナクエリ利用可能に 2. グリッドに名前をつけてレイアウトを視覚化する方法 3. 長いテキストを短く省略する方法 4. transformプロパティが独立してより使いやすく 5. くるりと回転するアニメーション文字の作り方 6. :hasプロパティでAppleのO
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて最新HTML／CSSスニペットをまとめています。 コンテンツ目次 1. 小技テクニック系（15個） 2. 面白、ユニーク系（16個） 3. ホバーエフェクト系（6個） 4. テキストエフェクト系（10個） 5. ページレイアウト系（10個） 6. イメージスライダー系（9個） 7. ナビゲーションメニュー系（2個） 8. ローディングアニメーション系（4個） 9. ボタンエフェクト系（13個） 10. CSSマジック（10個） 11.
この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。 コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。 ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう。 前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。 よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 コンテンツ目次 1. background-imageによる実用アニメーションサンプル集 2. 無限
この記事では、ウェブデザインの仕上がりをワンランクアップする最新HTML／CSSスニペットをまとめてご紹介します。 掲載しているほとんどの作品が、レスポンシブ対応となっており、コードを直接コピペできるのも特長です。 CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います。 昨年人気の高かったベスト・スニペット100や、一発コピペできるCSSボタン、すごいCSSアニメーションなどと一緒にチェックしてみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 コピペできる！Webサイトがかっこよくなる最新HTMLスニペットまとめ ホバーで文字テキストが分割されるエフェクト See the Pen Split animation on hover with
先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-contentとmargin-inline:autoでセンタリングすることで、1行の場合は中央寄せ、複数行の場合は左寄せといった実装が可能となります。
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ ひと手間でガラリと変わる、これからの新しいCSS HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。 サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。 ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。 「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。 コンテンツ目次 1. キラキラに輝くホログラフをCSSで実装 2. クールなグラデーション背景のつくり方 3. oklch()による色の設定 4. 夢のような景色「Dreamy Blur」エフェクト 5. オフキャンバスのメニューをポップアップで実装 6. スクロール連動型のCSSアニメーション 7. 3Dなグリッチ・
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
「おしゃれでかっこいいウェブサイトを作りたいけど、レイアウトにいつも困る。」 「同じような似たデザインから抜け出せない」 「周りがあっと驚くWebデザインがしたい」 「CSS Grid や Flexbox プロパティの使いかたを覚えたい」 そんなひとにおすすめしたい、コピペで利用可能な、おしゃれでモダンなWebレイアウト25選をご紹介します。 すべてのテンプレートの特長が以下のとおり。 ✅ モバイルファースト・アプローチに沿ったレイアウト ✅ すべてのブレイクポイントに対応したレスポンシブWebレイアウト ❌ position: absolute;は利用しない ✅ CSS Grid テクニックのみで表現 最先端のCSSテクニックを活用することで、これまでは考えられなかった構図を実現できるようになっています。 コピペでできる、おしゃれな無料レイアウト25選（CSS Grid & Flexbo
ここまでできる！CSS最新テクニックと書き方30選
ポップオバーAPI 最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。 Introducing the popover APIでは、具体的な使い方や実装例が紹介されています。 範囲スライダーをCSSでカスタマイズ How to Create a Custom Range Slider Using CSSでは、モダンなCSSテクニックを使って、ネイティブHTMLの<input>要素だけで人目を引く、カスタム範囲スライダーを作成する方法が紹介されています。 See the Pen CSS only custom range sliders by Temani Afif (@t_afif) on CodePen.
はてブ考
はてなブックマークがユーザーインタビューをするということで、はてブに対する思いをネットに発露している人達が散見された。 【追記：応募期限5/20まで】はてなブックマークのユーザーインタビューにご協力いただける方を募集します - はてなブックマーク開発ブログ この度はてなブックマーク開発チームでは、サービスをご利用中のみなさまを対象に1時間程度のオンラインインタビューにご協力いただける方を募集します。 ご協力いただける場合は、以下概要をご覧の上、この記事の末尾にある応募フォームからご応募ください。 bookmark.hatenastaff.com 自分はコロナ禍になって気がつくとはてなブックマークばかり見ていてヘビーユーザーになっていた（ブックマークはあまりしてなくて見る専）。会社の人との雑談がなくなり、息抜きしたいときにははてブを見る暮らしをしている。 なのでインタビューに応募してみたのだ
ホームページを制作するときに、何度も繰り返し利用するコードは、スニペットとして整理しておくのがオススメです。 スニペットとは「切れ端」「断片」という意味で、コピペで簡単に再利用できるテンプレートのようなもの。 この記事では、コピペで使える便利な最新HTML／CSSスニペットをまとめてご紹介します。 ブラウザ上でHTMLやCSSのコードを編集しながら、リアルタイムでプレビューを確認できるのもポイント。 画面右下にある「Return」キーをクリックすることで、再読み込みでプレビューできます。 コピペできる、保存しておくと便利なHTMLスニペットまとめ 水平方向に無限スクロールするアニメーション 左右どちらへもスクロールするCSSアニメーションで、両サイドはグラデーションでフェードアウトしています。 See the Pen Infinite Scroll Animation by Yoav Ka
この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。 コンテンツに注目を集めたいときに最適なテクニックが中心で、CSSのみでスタイリングできるアニメーションエフェクトも手軽にコピペで利用できます。 ウェブがますます進化し、ネット回線も高速になってきたことで、これまではむずかしかった多彩なアニメーションなど、スタイリングの幅がグッと広がっています。先日紹介した「ニューモーフィズム」の新トレンドも参考にしてみると良いでしょう。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペットまとめ Button Hover Effect 疑似要素を左右に配置し、アニメーションで合体させるCSSを使ったテクニック。
2022年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン AdobeのFigma買収とAdobe XDのこれから 9月の大きなニュースは、やはりAdobeによるFigma買収だと思います。このブログでも記事にしています。 関連: Adobe、Figmaを約2.9兆円で買収へ デザインコラボツール大手 フォトショップの作業が楽になる、覚えておきたい小技テクニック18選 とても有益ですが、レイヤーの複製はoption+ドラッグではなくcommand+Jの方が速いと思います。 ちょうどいいWebデザインギャラリー そのWebサイトのいいところが言語化されているギャラリーサイトです。 Screen Sizes iPhone・iPadなどのスクリーンサイズま
レイアウトプリミティブ
DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページのテンプレートやコンポーネントをいかに堅牢な設計にできるかが重要だと感じます。 連想されるトピックとしては「CSS設計」がありますが、私見としては、CSS設計はセレクタの書き方やコンポーネントの整理の方法について述べたものであって、いかにしてレイアウトを組み立てるかという議論にはあまり踏み込んでいません。 具体的には、どのように宣言を組み合わせるか、どのようにレスポンシブにするかのような曖昧な領域については、実装において必ず意識される部分であるにも関わらず言及される場面は少ないのではない
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import clsx from 'clsx' function Entry(props) { return ( <div className={ clsx(props.category === '暮らし' ? s
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。3月11日（月）～3月17日（日）〔2024年3月第3週〕のトップ30です*1。 順位 タイトル 1位 大炎上したスクールフォト業界で勤めてたんだが、もう学校写真のカメラマンは限界かもしれない｜所在ない 2位 高等学校段階までの学習で身につけてほしいこと | 東京大学 3位 文科省の公用文作成の考え方って資料、めちゃくちゃ役立つから論文書く人とか社会人になって社外にメールを送るのが苦手って人は読むのをおすすめする。 - Togetter 4位 桐朋高等学校、78期卒業生の答辞に賛辞やまず 「只者ではない」「感動のあまり泣いて10回読み直した」（1/2 ページ） - ねとらぼ 5位 横浜中華街デートで1日過ごせ｜まりにゃ 6位 謙虚なリーダーのもとで心理的安全性が高まりメンバーが本領発揮しやすくなる
CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。 この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。 最新Webデザインでもよく見かけるテクニックです、ぜひ活用してみましょう。 これらの例のHTMLはすべて、外側の.card divと内側の.inner divから構成されています。詳しくはデモを参照してください。 コンテンツ目次フェイクボーダーアウトラインの使用SVGによるアニメーション・ボーダーさいごに フェイクボーダー まずは、単にパディングやマージンを使ってボーダーを表現する3つの例から見ていきます。 この記事のすべての例では、以下のCSSを使用しています。 .card
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 世界でもっとも話題となった作品がこちら HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen（コードペン）。 この記事では、2022年に特に人気の高かったHTMLスニペットを、ランキング形式でまとめた The Most Hearted of 2022の中から、特に印象に残った、実用性の高い作品をご紹介。 CSSのみで表現されたお手軽なHTMLスニペットから、オドロキのユーザー体験を提供したり、CSSアニメーションなどにも注目が集まっています。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Click To Z
みなさんはCSSのメディアクエリについて本当の意味で理解して使用しているでしょうか。ブラウザがデフォルトの状態なら正常に動くと思います。しかし、ブラウザで拡大率を変更したりするなどブラウザの設定によってはメディアクエリの解釈が大きく変わってきます。また、メディアクエリに使える単位のpxやem、remによっても変わってくるため、適切な単位を用いる必要があります。 検証に用いるCSS 以下の6パターンを使って検証します。すべてのバージョンを検証するのは大変なので、過去3年間のバージョンまで遡りました。 /* 600px以上 */ @media (min-width: 600px) { ... } @media (min-width: 37.5em) { ... } @media (min-width: 37.5rem) { ... } /* 600px未満 */ @media not all
ごきげんよう、和風デザイナーの清水です。 2021年に東京オリンピック、2025年に大阪万国博覧会の開催が決まりより日本らしいデザインが求められてる傾向にあります。 和風デザインのコツについては詳しく見ていきましたので、今回は和風デザインのホームページについてご紹介致します。 和風デザインの特徴和風デザインは時代によって変わり多様なデザインが表現可能です。 白鳳文化の高松塚古墳壁画のような華やかな色彩美、質素で静かなに美を見出す室町時代の侘び寂び、江戸時代になると琳派や狩野派など豪快で力強い… これらの時代の絵画、建築、彫刻、工芸など見られる特徴や技法をデザインの要素に取り込むことで「和風デザイン」をつくる事ができます 和風デザインホームページでありがちな事時代背景がめちゃくちゃになってしまうホームページに関わらず、和風デザイン全体に言える事なのですが『色』『テクスチャー』などが時代に即し
ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドでも毎年選出されており、まずます需要が高まっています。 実際に、多くの売れるウェブデザインも採用中。Webが進化したことで以前より手軽にアニメーションが表示できるようになり、Appleも採用するCSSテクニックが増えているのも事実です。 この記事では、思わず惹きこまれる素敵Webアニメーション30選をご紹介します。 心地よい遷移アニメーションの基本ルールを知っておけば、ワンランク上のウェブデザインを作成したいときにも安心ですよ。 GLASSWARE №001 by Matthew Hall ギャラリーへの心地よいページ遷移アニメーションの参考例として。新しいコンテンツが表示されるタイミングやテキストエフェ
文章はwrapの中におさめつつ、写真だけ画面横サイズいっぱいに広げたい時のCSSテクニックを紹介します。テキスト用のwrapと写真用のwrapの２つを用意しなくても、同じ親要素内にまとめても写真だけサイズを変更できるので便利。写真を印象的に表現したいページに使えます。 まずはデモを用意したのでご覧ください。文章はPC画面で600px、スマホ画面で80%内におさまっていて、写真だけ横幅いっぱいに広がっています。 See the Pen Calc Margin by Kobayashi (@Pulp_Kobayashi) on CodePen. 写真も本来はPC画面で600px、スマホ画面で80%表示されるはずなのですが、写真にだけcalc()で指定することで全画面表示にすることができます。 これはテキスト部分の外側にある余白の値を計算して、写真をその分左右に広げることにより親要素の横幅を無視
教科書にはのっていないCSSテクニック5選
CSS、参考書や講座で登場してくるセレクタやプロパティ以外にも、たくさん便利そうなモノがあるってご存知でしょうか？ 今回は特に最近各種ブラウザーが対応はじめたセレクタやプロパティをご紹介させて頂きます。 「おっ、それやったら JavaScript を組まなくても良さそうやな」というところもあると思いますので、参考にしてみてください。 【ご紹介するセレクタ】 scroll-snap sticky filter prefers-color-scheme grid "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大
終了 2019/12/13（金） 19:00〜 DIST.30 「一歩差がつくCSSテクニック」 職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティ shizooo 他 東京都中野区中野4-10-2
今回は、ワンランク上のCSSのテクニックを身につけるために、border-radius:9999px;をご紹介します。角丸をつくる際にこのテクニックを知っておくと、コンテンツの量に応じて角丸を柔軟にコントロールすることができます。また、シンプルな実装方法なのでコードのメンテナンス性も上がります。 一歩上のコーディングテクニックを学びたい人は必見です。 正円をつくる３つのパターンをおさらい CSSで正円を作る時には３つの方法があります。例として、横幅200px、縦幅200pxの正円を例に実装方法を紹介していきます。 固定の数値を記述する方法 一番、初心者向けでわかりやすいのがこの例です。200pxの大きさなので半径は100pxですので、border-radius: 100px; を記述して実現します。 <div style="width: 200px; height: 200px; back
はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。CSS/DHTMLバグ辞典スレッドの住人です。 さて、今日は、ネタがないので MDN っていうよりもただの CSS のお話をしたいと思います。 2023 年になって使えるようになった CSS テクニック Chrome for Developers というサイトでは次のような記事があります。 CSS Wrapped: 2023 年 | Blog | Chrome for Developers CSS と UI の新機能: I/O 2023 Edition | Blog | Chrome for Developers 今日はこの中から、みんな大好き :nth-child() 疑似クラスの話をしてみます。 :nth-child() の基本的
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
有名サイトで使用されているCSSテクニックまとめ - Qiita
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
Web制作を変える！2021年の便利オンラインツール・ベスト100選
2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
サイトの質が向上！コピペできるHTML/CSS便利スニペット100個まとめ
【CSS】あっという間に悩み解決！新常識な最新テクニック24選
コピペできる！Webサイトがかっこよくなる最新HTMLスニペット38選
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
コピペで簡単、おしゃれ無料Webレイアウト25選（CSS Grid・Flexbox活用）
コピペできる、保存しておくと便利なHTMLスニペットまとめ
コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペット44個まとめ
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
似ているけどちょっと違うものをスタイリングする CSS テクニック - mizdra's blog
今週のはてなブックマーク数ランキング（2024年3月第3週） - はてなブックマーク開発ブログ
コピペで楽々、CSSでできるボーダーアニメーション５選
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
🐛あなたのCSSメディアクエリは間違っているかもしれない｜たかもそ／Web Creator.
和風 ホームページ制作する時に考えたい事 ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
Webサイトは「動き」で優勝、ユーザーを惹きこむ素敵アニメーション30選
写真だけ画面横いっぱいに広げるCSSテクニック | Pulp Note
DIST.30 「一歩差がつくCSSテクニック」 - 資料一覧 - connpass
border-radius:9999px;で角丸に柔軟性をもたせる上級CSSテクニック
:nth-child() の "of S" 構文が最強な件について - Qiita