上級編border-styleについてテーブルや水平線、テキストエリアの枠線など、さまざまな線のスタイルを指定することが出来るborderStyle属性。使いやすいものをいくつかまとめました。・solidシンプルな実線。・double二重線になります。・grooveぺこっと凹んだような立体的な線。・ridgeぷくっとした立体的な線。・inset右と下の線が明るく、左と上の線が暗くなり、立体感が出ます。枠線の中がへこんでみえるようになります。・outset右と下の線が暗く、左と上の線が明るくなり、立体感が出ます。枠線の中が盛り上がって見えます。・dashedステッチのような破線です。・dotted点線です。線の幅を太くし過ぎると、点が四角に見えます。</table>border-colorについてborder-color属性では、テーブルやテキストエリア、画像の枠線などの、線の色を指定することが出来ます。このborder-color属性で指定出来るのは一色だけではありません。四角い枠線の、上下左右の色をそれぞれ別々に指定することも可能です。指定のパターンは4種類あります。1色を指定border-color:#カラーコード;これが一番かんたんな指定方法ですね。この指定方法では、枠線の4辺がすべて同じ1色になります。#カラーコード;1色目のカラーコードの後に、半角スペースを入れ、その後に続けて2色目のカラーコードを指定します。1色目に指定した色が上下の枠線の色に、2色目に指定した色が左右の枠線の色になります。#カラーコード;1色目、2色目のカラーコードの後に、半角スペースを入れ、その後に続けて3色目のカラーコードを指定します。1色目に指定した色が上の枠線の色に、2色目に指定した色が左右の枠線の色に、3色目に指定した色が下の枠線の色になります。#カラーコード;1色目、2色目、3色目のカラーコードの後に、半角スペースを入れ、その後に続けて4色目のカラーコードを指定します。1色目に指定した色が上の枠線の色に、2色目に指定した色が右の枠線の色に、3色目に指定した色が下の枠線の色に、4色目に指定した色が左の枠線の色になります。上から、時計周りの順と覚えましょう。</table>枠線4辺のそれぞれにborder-styleを指定する実は、この4辺の枠線の色の指定方法と同様にして、4辺の枠線それぞれにborder-styleの指定をすることも出来るのです。記述の仕方は、色を指定した時とほとんど一緒です。後に、枠線の上の線から時計周りの順に、半角スペースを空けながらstyleを記述します。左の線;(線の種類)solid、double、dotted、dashedなど。border-styleを1つ指定border-style:線の種類;これが一番かんたんな指定方法ですね。この指定方法では、枠線の4辺がすべて同じスタイルの線になります。線の種類2;1つ目の線の種類の後に、半角スペースを入れ、その後に続けて2つ目の線の種類を指定します。1つ目に指定したスタイルの線が上下の枠線の色に、2つ目に指定したスタイルの線が左右の枠線になります。線の種類3;1つ目、2つ目の線の種類の後に、半角スペースを入れ、その後に続けて3つ目の線の種類を指定します。1つ目に指定したスタイルの線が上の枠線に、2つ目に指定したスタイル線が左右の枠線に、3つ目に指定したスタイルの線が下の枠線になります。線の種類4;1つ目、2つ目、3つ目の線の種類の後に、半角スペースを入れ、その後に続けて4つ目の線の種類を指定します。1つ目に指定したスタイルの線が上の枠線に、2つ目に指定したスタイルの線が右の枠線に、3つ目に指定したスタイルの線が下の枠線に、4つ目に指定したスタイルの線が左の枠線になります。上から、時計周りの順と覚えましょう。</table>枠線4辺それぞれの線の太さを指定する上記の、枠線の色の指定方法、枠線の種類の指定方法を見たかたはもう察しがついているかと思います。線の太さも、上記と同様にして4辺それぞれの太さを個別に指定することが出来るのです。後に、枠線の上の線から時計周りの順に、半角スペースを空けながら線の太さをピクセル値またはブラウザの横幅に対する%で指定します。</td></tr></table>などなど、いろいろと応用がききます。上級編もっと細かく枠線のデザインを指定したいここまで、線の色を4辺それぞれ指定する方法、線の種類を4辺それぞれ指定する方法、線の太さを4辺それぞれ指定する方法、と紹介してきました。4辺それぞれに対して、色も種類も太さも個別に指定したい!というこだわり派のかたへピッタリの指定方法があります。それが、border-top(上辺)、border-right(右辺)、border-bottom(下辺)、border-left(左辺)へ対して線のスタイルを指定する方法です。あとに、半角スペースを空けて記述する方法です。線の太さ;この方法で指定すると、かなり詳細に枠線のデザインを指定することが出来ます。2px;で指定しています。/>で指定しています。9px;で指定しています。/>で指定しています。12px;で指定しています。/>で指定しています。</td></tr></table>こんなことも出来ちゃいます。この方法での指定だと、表示するブラウザ、環境によっては、正しく表示されない場合もあるようです。自分の見ている環境、自分のサイトをみてもらいたい人の環境で正しく表示されるのか事前に確認した上でご使用下さい。画像はホームページ作成でも、ブログの記事でも出番がとても多いですよね。ブログに関しては、ほとんどのブログ作成...記事を読むアフィリエイトブログ初心者のHTML基礎知識ブログを使ったアフィリエイトは、簡単な副収入を手に入れる手段として、とても人気があります。美月そこそこの家庭に育ち、そこそこの大学を出て、かなり大きい会社で活躍しているアラサー理系女子。努力は嫌いだけど、世渡りが上手いみたいでこの年でリーダー(部下は6人)。大学時代は遊んだくせに就活は無双したことで社会に対して変な自信をつける。小学校時代の専攻は、先生いじり。中学校時代の専攻は、ノート職人。高校時代の専攻は、ゲーム。大学時代の専攻は、化学。現在の専攻は、効率学。Reserved.Translate。