2018年10月23日(火)

【CSS】borderタグの使い方！枠線の指定や種類など（サンプルあり）

• 0
• 78
• 3
• 28

「borderの幅の指定によってレイアウトが崩れることがある」
「border指定は、よく使うけど、どのような場面で使えるのかよくわからない。」

初学者が感じるよくある疑問です。CSSでWebをデザインする際に、高い頻度で使用するプロパティですので「border」の理解は不可欠です。設定自体は非常に簡単ですが、単純な使い方だけでなく、擬似要素などと合わせて使う場合は、慣れが必要になります。実際に、他のCSSプロパティとあわせて使いたいというニーズにも対応できておいた方がよいでしょう。

そこで、この記事では、使い方だけでなく、実際に「border」を使って幾つかのデザインを作っていきましょう。この記事は初学者向けに書いていますので、経験者は飛ばして読んで頂いて構いません。

この記事の内容

borderとは

「border」プロパティは、要素の境界に枠線を引く効果が出せます。例えば、以下のようなボタンのデザインには「border」を使います。背景色だけでも要素の境界を表現できますが、敢えて境界の大きさや色を指定することもできます。

author:

creive（クリーブ）

http://creive.me

クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。

オリジナルサイトで続きを読む

今日のwebデザイン記事ランキングを見る

         

‹ PREV

               

リテール×テクノロジーの新しい価値を創造する『リテールイノベーションコンソーシアム』設立

         

NEXT ›

               

フリーで使えるシンプルな線画アイコンのセット・「Evericons」

関連記事

• SEOにかなり使える「ラッコキーワード」とは？具体的な活用法も紹介
• 未来はここに：今後２年間の検索に関する４つの予測
• Kindle本の特大セールが開催！ Figmaの解説書、UIデザイン、Web制作、ディレクションの良書がたくさん半額です
• ノーコード/ローコードで視覚的にAIアプリを構築するためのオープンソースのフレームワーク・「GraphBook」
• GA4とは？【わかりやすく図解】初期設定から見るべき指標までわかる

Ads

クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。creive（クリーブ）の記事『【CSS】borderタグの使い方！枠線の指定や種類など（サンプルあり）』についてまとめています。

この記事は特にGoogleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のcreive（クリーブ）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとcreive（クリーブ）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。