プログラミング csshtmltext要素 CSSで文字を装飾 text-decorationを使い文字に線や色を加える! 2019-08-17 text-dcorationで文字に線や色を加える 文字の下や上に線を引いたりその線の色を変えたりします、線の種類も色々指定できます。 まず、htmlに<div>タグで囲んだ中に<p>段落を作って文字を入れます、これがおおもとの例題のブロックになります。 text-decorationは線の装飾...
プログラミング csshtmlインライン要素ブロック要素 spanタグとdiv インライン要素とブロック要素の違い 2019-08-13 span インライン要素と div ブロック要素 インライン要素とは インライン要素同士が横に並びます、ブロック要素のように上下の余白設定がきかない。 spanタグは汎用的なhtmlタグ、囲んだ要素を強調するなどデザインの微調整に利用されるタグで、個別にフォント調整、文字色、背景色の変更に利用されます。 spanタグは...
プログラミング csshtmlインライン要素要素 color 背景色や文字色の設定と前の要素の色を引き継ぐcurrentColorの使用法 2019-08-08 color 背景色や文字色の設定とcurrentColorの使用例 カラーの指定にはキーワードやR(赤)G(緑)B(青)の値を指定するものRGBにA(透過)を加えたRGBAがあります。 色の値も16進歩(0~9とa~fを併せたもの)や各色を0~255の数字で表したものがありますが、多くの色を覚えるのは大変なので下の表を...
プログラミング bordercsshtmltable table要素とborder-collapseを使って一本の線の表を作る 2019-08-07 table要素とborder-collapseを使って一本の線の表を作る Table要素で表を作る 表を作成するには「table」要素を使います。 <html>の<body>要素の中に<table>要素を記述してこのような表を作成してみましょう。 やり方はいたって簡単です。 tr(行...
プログラミング csshtml要素 box-shadowプロパティ要素のフレームから影を落とす 2019-08-01 box-shadowプロパティ要素のフレームから影を落とす box-shadowプロパティは要素のフレームの周囲に影(シャドー)を出すことができるプロパティです。 コンマで区切ることで複数の効果を指定することができます。 設定の仕方 X Y dlur color 影は要素からの相対的なX(横方向)とY(縦方向)のオフセ...
プログラミング csshtml要素 プログラミングの基礎!classとCSSの使い方class名の複数設定もできる 2019-07-31 プログラミングの基礎! classとCSSの使い方class名の複数設定もできる classは、HTMLで記述する時のグループ分けのための目印です。 HTML文書内でこのような「class=”クラス名”」記述を見た事があると思います。 何度でも使える便利なclass classはCSSの目印 このようにクラス名を指定す...
プログラミング html擬似クラス擬似要素 擬似クラス・擬似要素とは?違いは?その使い方は! 2019-07-31 擬似クラス・擬似要素とは?違いは?その使い方は! 擬似クラスとはどんなものか 指定した物全体に影響を与えるもので文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入されたものです。 擬似クラスにはどんなものがあるのか 動的擬似クラス・リンク擬似クラス、ユーザーアクション擬似クラス言語擬似クラス...
プログラミング csshtmlナビゲーション擬似クラス hover ホバー カーソルを当てると色が変わる 擬似クラスとは擬似要素との違い 2019-07-31 hover ホバー カーソルを当てると色が変わる 擬似クラスとは 擬似クラスとはどんなもの 指定した物全体に影響を与える 文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です マウスを当てると色が変わるhoverの使い方 :(コロン)を付けて「:hover」としてCSSで記述しま...
プログラミング bordercsshtml要素 border-radius 画像を加工 四角い画像を丸くする! 2019-07-29 border-radius 四角い画像を丸くする! 四角い画像を丸くする方法は簡単です! border-radiusプロパティを使用してやります。 border-radiusプロパティは、ボックスのコーナーの角を丸くまとめて指定する際に使用します。 水平方向と垂直方向の二つの半径の組み合わせで決定されます。 加工するた...
プログラミング bordercsshtml要素 padding margin borderとは?設定の仕方を分かり易く 2019-07-29 padding margin borderとは?設定の仕方を分かり易く! paddingとは、marginとは余白のこと 余白はどこに存在するのか 文字を書いたり画像を取り込んだりする領域のことをブロックと呼びます、下の画像の青い部分の所がブロックを表しています。 青いブロックの領域の上下左右の緑の領域を「paddin...