今回は、CSSの枠線borderタグの基本と注意点や角の丸さを設定するborder-radiusについて説明します。borderの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。borderの基本的な使い方borderは、要素に枠線を設定するCSSプロパティです。枠線の色、枠線の種類、そして枠線の太さと3つの値を指定して利用します。5px」のように3つの値は半角スペースで区切ります。5px;">これは見出し。5px;">これは見出し。</h1></body></html>指定できる値は、主に下記の通りです。前述の説明ではborderを指定することで、要素の上下左右の全てに枠線をつける例で説明しましたが、辺を指定して個々の辺に設定することもできます。各辺を指定する場合は、borderの代わりに「border-xxx(辺)」を指定します。要素の左側の枠線を指定します。要素の右側の枠線を指定します。要素の上側の枠線を指定します。要素の下側の枠線を指定します。5px;枠線の色・種類・太さを個別に指定する場合borderでは、色・種類・太さと3つの値をまとめて設定しましたが、3つの値をそれぞれ個別に設定することもできます。各設定値を個別に指定する場合は、「border-color」「border-style」「border-width」でそれぞれ設定します。枠線の色を指定します。枠線の種類を指定します。枠線の太さを指定します。border-box枠線border(や内部余白padding)を設定する際に、枠線の大きさを横幅や高さに含めるかどうかのボックスの算出方法を指定するプロパティで「box-sizing:border-box」を指定する方法があります。高さ300pxのボックス</div></body></html>基本的に、box-sizing:border-boxの方がレイアウトの大きさの計算が楽になるので、ユニバーサルセレクタ*などで、box-sizing:border-boxを初期値として設定しておくことも多いです。枠の丸さを指定するborder-radiusborder-radiusは、枠線および要素の角の丸さを指定するCSSプロパティです。borderプロパティと合わせて利用することでborder-radiusを利用するとborderで作った枠線の角を丸くする事ができます。した場合、すべての角が30pxになります。30px;"></div></body></html>border-radius:50%と指定した場合は、50%=円の半径で下記のように円になります。50%;"></div></body></html>また、border-top-left-radius(左上の箇所):xxxなどのように場所を指定すると下記のように左上だけ丸くすることもできます。50%;"></div></body></html>また、border-radiusは、枠線だけでなく画像や要素に対しても指定することができます。style="background-color:pink;width:150px;height:150px;border-radius:50%;"></div></body></html>※なお、長方形の場合は、正円ではなく、楕円になります。今回は、CSSの枠線borderの使い方の基本や注意点およびborder-radiusについて説明しました。borderの基本を使ったレイアウトの調整は、Webデザインする上で必須といえるくらいよく使うのでぜひ覚えておきましょう。CSSを使った装飾の仕方全般については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。今回は以上になります。最後までご覧いただきありがとうございました。弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。無料事前相談もしておりますので、まずはお気軽にご登録ください。【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。詳細はこちら【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。WordPressの使い方をしっかり勉強したい方はぜひご覧ください。(※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。CSSauthor関連記事CSSインライン要素・ブロックレベル要素とCSS「display」の使い方divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。CSSでレイアウト装飾するためには上記の違いを理解している必要があります。display:flexの使い方を解説フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。今回は、CSSの外部余白marginタグの基本と注意点、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。positionで位置指定でする方法・使い方ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。松本慶(@mattsunkei)元システムエンジニア。約9年メーカーにてシステムエンジニア経験後、2016年脱サラ・独立したのち、現在は個別指導のWEBスクール運営。Webやマーケティングなど覚えたノウハウを自他のビジネスに活かすことが好き。最近は「アフィリエイトを副業で始めたい」というお問い合わせが多くあるので、2019年度からアフィリエイトも強化中。運営者情報お問い合わせプライバシーポリシーこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。apply.WEBST8自分で作る選択を!初心者でもできるホームページ・ブログの始め方・作り。