検索対象

並び順

ブックマーク数

セーフサーチ

期間指定

  • から
  • まで

marginの検索結果(絞り込み: 3 users 以上)890 件中 1 - 40 件目

  • レスポンシブ対応にメディアクエリなしで、CSSの関数で定義!border-radiusの値を変えるテクニック

    border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリ...

    レスポンシブ対応にメディアクエリなしで、CSSの関数で定義!border-radiusの値を変えるテクニック
    • 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

      現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介し...

      現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
      • Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

        CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを15個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結...

        Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
        • ベルギーの農家、うっかり領土「拡大」 国境の標石動かす - BBCニュース

          ベルギーの農家の男性が、うっかりフランスとの国境を変更して、ベルギー領土を「拡大」させたと話題になっている。 ベルギー・エルクリンヌ村の歴史愛好家がベルギーとフランスの国境をまたいで広がる...

          ベルギーの農家、うっかり領土「拡大」 国境の標石動かす - BBCニュース
          • 新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜

            CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三...

            新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
            • ユーティリティーファーストとTailwind CSSのススメ - Qiita

              .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } ....

              ユーティリティーファーストとTailwind CSSのススメ - Qiita
              • CSSのmargin-block-start, margin-inline-endなど、論理プロパティの使い方を徹底解説 | コリス

                CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増...

                CSSのmargin-block-start, margin-inline-endなど、論理プロパティの使い方を徹底解説 | コリス
                • 簡単CSSアニメーション&デザイン20選(ソースコードと解説付き) | knowledge / baigie

                  CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。...

                  簡単CSSアニメーション&デザイン20選(ソースコードと解説付き) | knowledge / baigie
                  • Reactの 余白上手に スタイリング

                    最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切...

                    Reactの 余白上手に スタイリング
                    • ベトナムへの「密出国」防ぎたい中国、国境に壁建設 現代版「万里の長城」、表向きは「コロナ感染防止」だが(1/4) | JBpress(Japan Business Press)

                      2020年、ベトナムはGDP成長率で東アジア・太平洋地域の中で最高の2.8%に達し、中国のGDP成長率2.3%を抜いて、世界最高水準のプラス成長になった。それに伴い、中国とベトナムの間では、新たな軋み音が...

                      ベトナムへの「密出国」防ぎたい中国、国境に壁建設 現代版「万里の長城」、表向きは「コロナ感染防止」だが(1/4) | JBpress(Japan Business Press)
                      • 垂直方向のマージンにはmargin-topを優先的に使う理由 - Yuhei Yasuda

                        margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウト...

                        垂直方向のマージンにはmargin-topを優先的に使う理由 - Yuhei Yasuda
                        • CSSにおけるマージンの相殺を徹底解説 | コリス

                          CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ...

                          CSSにおけるマージンの相殺を徹底解説 | コリス
                          • Glassmorphism CSS Generator

                            background: rgba( 255, 255, 255, 0.25 );box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );backdrop-filter: blur( 4px );-webkit-backdrop-filter: blur( 4px );border-radius: 10px;border: 1p...

                            Glassmorphism CSS Generator
                            • The Rules of Margin Collapse

                              In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly. Here's a typical example, involving two sibling para...

                              The Rules of Margin Collapse
                              • 必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワーク・「Screen」 | かちびと.net

                                Screenは必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワークです。 無駄な装飾もなく、軽量で、classを直感的にスタイルする事ができる命名規則を採用しています。 ただ、reset.css、inte...

                                必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワーク・「Screen」 | かちびと.net
                                • 86 Beautiful CSS box-shadow examples - CSS Scan

                                  All of these box-shadow were copied using CSS Scan (click here to try a free demo). With CSS Scan you can easily inspect or copy any website's CSS. 📌 Press Ctrl+D to bookmark this page H...

                                  • こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス

                                    ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで...

                                    こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス
                                    • More Control Over CSS Borders With background-image | CSS-Tricks

                                      Take the pain out of building site search with the Algolia hosted API. Start free now! You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; bo...

                                      More Control Over CSS Borders With background-image | CSS-Tricks
                                      • CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる | コリス

                                        画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを...

                                        CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる | コリス
                                        • 千葉県の県境はぜんぶ川らしいので歩いて確かめてきた | SPOT

                                          ※この取材は1月末に行われました 1日目 AM6:00 千葉県浦安市舞浜 東京ディズニーリゾート 千葉県浦安市からおはようございます。 なぜかこんな早朝にここ東京ディズニーリゾートの入口みたいな場所...

                                          千葉県の県境はぜんぶ川らしいので歩いて確かめてきた | SPOT
                                          • 幅固定のコンテンツ内で画面幅いっぱいに要素を広げて配置する | cly7796.net

                                            コンテンツの幅固定で左右中央位置に配置された要素内で、画面幅いっぱいに要素を広げて配置する方法を試してみます。 サンプルコード 以下のようなHTMLで、.contentsが固定幅の左右中央配置、その中の...

                                            幅固定のコンテンツ内で画面幅いっぱいに要素を広げて配置する | cly7796.net
                                            • CSSの比較関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説 | コリス

                                              CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません! 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関...

                                              CSSの比較関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説 | コリス
                                              • CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス

                                                Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによっ...

                                                CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス
                                                • line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Blog | Yuya Kinoshita

                                                  Webサイトのコーディング(実装)では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる(余白が大きくなりすぎる)場合があります。 これはブ...

                                                  line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Blog | Yuya Kinoshita
                                                  • 治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita

                                                    はじめに 業務でCSSを書くようになってから、いくつかの月日が流れました。 CSSを学び始めた当初は、要素をキレイに横並びにすることすら手こずっていましたが、最近は随分スムーズにデザイン通りのス...

                                                    治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita
                                                    • CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 | コリス

                                                      Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン(margin: auto;)を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイ...

                                                      CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 | コリス
                                                      • PixelSnap 2 Mac用測定ツール

                                                        新たなバージョンが登場。より快適な使い心地に。 PixelSnap2では 動作速度が2倍まで向上しました 一からコードを書き直した新バージョンのPixelSnap2は、これまでにない快適な使い心地に。画面上のオ...

                                                        PixelSnap 2 Mac用測定ツール
                                                        • ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ | コリス

                                                          ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Sha...

                                                          ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ | コリス
                                                          • Nicebord.js

                                                            jQuery plugin for animate border License The plugin is under MIT License Quickstart Include jQuery and Nicebord css and js in your project: <script type="text/javascript" src="https://aja...

                                                            • 【CSS】枠線を要素内側に引くための3つの方法 | PisukeCode - Web開発まとめ

                                                              CSSで枠線を内側に引きたい場合、方法は1つじゃありません。 いくつかやり方を考えてみると次の3つが使えます。 box-sizingプロパティを使った方法 outline-offsetプロパティを使った方法 after疑似...

                                                              【CSS】枠線を要素内側に引くための3つの方法 | PisukeCode - Web開発まとめ
                                                              • CSS|Tableをレスポンシブ対応させる方法 | コトダマウェブ

                                                                訪問者が利用する端末やブラウザのサイズによってページのデザインが変わる仕組みのことを「レスポンシブ」と言います。レスポンシブウェブデザインでは、ブラウザのサイズ(横幅)に応じて、読み込む...

                                                                • Everything You Need To Know About CSS Margins — Smashing Magazine

                                                                  Quick summary ↬ Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a marg...

                                                                  Everything You Need To Know About CSS Margins — Smashing Magazine
                                                                  • フロントエンドのプロ直伝! CSS余白設定の三原則(+線の引き方) - Qiita

                                                                    1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbotto...

                                                                    フロントエンドのプロ直伝! CSS余白設定の三原則(+線の引き方) - Qiita
                                                                    • marginの相殺の理解を深めよう

                                                                      スマートフォン時代のWebデザインスクール ご自宅で動画受講可能、9月末まで割引&体験レッスン無料! モダンなWebデザイン制作・Adobe XD・Photoshop・UI/UXなど基礎から学べる講座です。 WordPressでW...

                                                                      marginの相殺の理解を深めよう
                                                                      • [CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法

                                                                        ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。 この内側のコンテナを実装するさまざまな方法、それぞれの利点...

                                                                        [CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法
                                                                        • レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS

                                                                          デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSassの超軽...

                                                                          レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS
                                                                          • 最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック

                                                                            ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSS...

                                                                            最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック
                                                                            • margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス

                                                                              Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナ...

                                                                              margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス
                                                                              • 米、加州の対メキシコ国境を封鎖 移民数百人が柵越え試み 写真13枚 国際ニュース:AFPBB News

                                                                                米カリフォルニア州サンディエゴの南にあるサンイシドロ国境検問所を封鎖する米軍と国境警備隊(2018年11月25日撮影)。(c)Sandy Huffaker / AFP 【11月26日 AFP】(更新)米当局は25日、カリフォルニ...

                                                                                米、加州の対メキシコ国境を封鎖 移民数百人が柵越え試み 写真13枚 国際ニュース:AFPBB News
                                                                                • 【CSS】Flexboxの使い方を徹底解説!基本から実践まで(サンプルあり) | creive【クリーブ】

                                                                                  【CSS】Flexboxの使い方を徹底解説!基本から実践まで(サンプルあり) | creive【クリーブ】