CSSシェアするLINE!0border-widthをきちんと使いこなせば、疑似要素と組み合わせてリボン型見出しなどを作る事が出来ます。今回はboder-widthを見てみましょう。基本的なこと知っている方は2から読むといいと思います。borderは一括指定プロパティ個別に指定するには?borderの性質を知るborderで三角形を作るには?組み合わせて三角形を考えるここらへんまで使えるようになってくるとデザインが一気に楽しくなってくるので、今回もじっくり見ていきましょう。borderは一括指定プロパティborderプロパティってCSSを勉強しているとどの教材などでも序盤にくるって印象です。私もずっとborderプロパティやせいぜいborder-topやborder-bottomなどしか使っていませんでした。実際にはborderプロパティは『一括指定プロパティ』と呼ばれるもので、まとめて指定するのは便利なんですが個別の指定に対して掘り下げることを忘れがちです。color(色);border-width(個別プロパティ)border-width:width(線の幅)このように一括指定プロパティと個別プロパティというものがあります。一括指定プロパティには他にもbackgroundやfont、marginやpaddingなどがあります。←;の順で個別に幅を指定することでCSS自体を簡単にすることが可能です。個別に指定するには?先程少し例でborder-widthを出しましたが、他にもborder-styleやborder-colorなどがあります。←;で指定が出来ます。上下は一緒、左右だけ別々などの指定も簡単にすることが出来ます。詳しくはmarginとpaddingの回で説明しているのでこちらをご確認ください。今回はCSSのmarginとpaddingについて見ていきましょう。paddingとmarginはサイズの変更や余白を変える、更には配置に関することで絶対に必要な知識になるのでしっかり身に付けていきましょう。22:35borderの性質を知るborderの性質について見てみます。具体例で見てみましょう。font-weight:bold;}<div>タグでboxを1辺100pxの正方形を作成して、その周りに幅50pxで上下左右に色を振り分けてみました。border-topとborder-rightやborder-leftがぶつかる部分は重なるのではなく均等になります。width:100px;今度は<div>タグのboxは変えず、その周りにborderを上下50px、左右30pxの幅で振り分けてみました。これでもborder-topとborder-rightやborder-leftがぶつかる部分は重なるのではなく均等になります。図解してみましょうグレーの部分はborderで、赤緑青黒は隣接するborderとの境目です。ここで三角形の面積の面積について思い出してみましょう。底辺×高さ÷2=三角形の面積このことから、隣接する三角形と面積は均等になるのがわかります。borderで三角形を作るには?borderの基本的な性質については見てみました。ここからが本番なのでさっそく三角形を作ってみましょう。width:100px;boxを縦横0にする4つの三角形が出来ます。borderを三角形として表示するとはます次のようになります。borderの外側をそれそれの三角形の底辺と考えると、高さに該当するのがborder-widthで設定したborderの幅という事になります。次にそれぞれの三角形を取り出してみましょう。20px;padding:0;}border-colorやbackground-colorで使われている『transparent』という値は、透明にするという意味です。border-color:上下左右のうち該当箇所だけ色を指定してそれ以外は透明としてあげれば必要な三角形だけ切り出す事が出来るようになります。いろいろな形を作る三角形を作ってみましたがそれらを組み合わせて形を作ってみましょう。練習として今回は国旗を作ってみます。25px;width:50px;height:16px;}両方ともborder-widthの右部分の値が0pxですが、これにより隣接する部分の割合が100%になる為に端を切り落としたような形にすることが出来ます。ちなみに一般的には国旗の大きさは縦:横の比率は2:3になるそうです。それに併せてborder-widthやheightの値を指定すれば簡単に作れます。疑似要素なども使っていけばもうすこしborder-widthで作れる種類も増えていきます。ネパールの国旗は、世界で唯一矩形ではない国旗である。特徴的な形は、ネパール王国の王家と宰相家が使用していた2つの三角旗を組み合わせて簡略化したことに由来している。国旗の真紅は、ネパールの国花であるシャクナゲの色であり、ネパールのナショナルカラーでもある。赤は国民の勇敢さを、縁取...asaka3115.jimdofree.comまとめ本当にborder-widthを使いこなせれば、三角形だけでなく扇やドーナツ型などの様々な形も作れるようになるのでまずはいろいろ試してみましょう。疑似要素と組み合わせる事で見出しも長方形から台形、リボンなど様々な形にする事もできます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。