この記事ではアメブロでHTMLとCSSで囲み枠を作る仕組みについてご紹介していきます。
アメブロではCSSを編集して好きな形の囲み枠を挿入することが可能です。デザイン性や色なども指定することができるようになっています。これについての具体的な仕組みについてご紹介していきますので、ぜひ参考にしてみてください。
HTMLとCSSで囲み枠を作る方法
一般的なブログではHTMLとCSSの両方を利用することができますので、HTMLで内容や構造を指定しCSSでデザインを指定することによって、見栄えの良いWebページを作ることが可能です。
枠線に限って言えば、囲い枠のCSSで主に利用されるものは以下の３つです。なお、下記のコードに加えて各種調節が必要になる場合があります。
- border-styleプロパティ
- border-widthプロパティ
- border-colorプロパティ
border-styleプロパティの指定
「border-style」は枠線のスタイルを指定するプロパティとなっており、主に下記の値となります。この他にも値はありますが、アメブロでよく使われる値だけご紹介しています。
- dotted：点線
- dashed：破線
- solid：1本の実線
- double：2本の実線
- groove：立体的な枠線
- ridge：浮き上がる立体的な枠線
border-widthプロパティの指定
「border-width」は枠線の太さを指定するプロパティとなっています。このプロパティは以下の４つで指定する方法があります。
- px
- rem
- %などの数値で指定する方法
- キーワードで指定する方法
※キーワード（thin：細い・medium：標準・thick：太い）の３つ
border-colorプロパティの指定
「border-color」はカラーコードとRGBの２種類があり、それぞれ好みに合わせて選択することが可能です。なお、この他にもカラーネームと言って、色を直接入力する方法もありますが、代表的な色の指定方法は下記の２つとなります。
- カラーコード
カラーコードは6桁の16進数のコードで色をしていできます。なお、6桁同じ文字や数字の場合には3桁でも表示が可能です。下記のように黒や白の場合、本来なら「#000000」と「#ffffff」ですが、「#000」と「#fff」でも同じように表示されると言うことです。
border-color: #ff0000;
border-color: #00ff00;
border-color: #0000ff;
border-color: #000;
border-color: #fff;
- RGB
RGBは（58, 110, 19）のような３つの数値で色を指定することができます。
border-color: rgb(255,0,0);
border-color: rgb(0,255,0);
border-color: rgb(0,0,255);
border-color: rgb(0,0,0);
あとはHTMLで枠線を作りながら設置していくことになります。詳細は【アメブロ】HTML・CSSで作る囲み枠を全10種類ご紹介にてお伝えしていますので、コピペで枠線を作りたいという方はぜひご覧ください。
まとめ
アメブロでHTMLとCSSで囲み枠を作る仕組みについてご紹介してきましたが、いかがでしたか？
アメブロではCSSを自由に編集できるテーマを利用することができますので、適切なCSSを設置することによって自由にカスタマイズしていくことが可能です。コピペ用で使える枠線もご紹介していますので、ぜひ活用してみてください。
