HTML CSS HTML・CSS table テーブル表組みのやり方。border-collapse・table-layoutについて。rowspan とcolspan についても書いてみました【サンプルコードあり】
テーブル表組みのやり方。border-collapse・table-layoutについて。 HTMLでテーブルを作成する時は、table タグで作成可能。 rowspan とcolspan についても書いてます。 シンプルな、テーブル作成コ...
HTML CSS
HTML CSS 
HTML CSS CSSで装飾する時に、テキストの line-height(行間)・letter-spacing(字間)を簡単に設定する方法
CSSで装飾する時に、テキストの行間・字間を簡単に設定する方法 テキストの装飾するプロパティ、字間のスペース・行ボックスの高さを設定。 それぞれ、簡単に設定できる方法ここに残します。 テキストの行間を設定 line-height テキスト表...
HTML CSS 画像や文字などを透視化、opacity rgba を使って背景画像の透過ができ、重ねて強調させるとこが可能になる。ホバー設定も可能
背景画像の上に文字などを入れた場合。 画像によっては文字が少し見えにくい場合ありますよね。 そんな時、文字等の後ろに背景を薄くあてることで、 見えやすくなる場合があります。 文字の後ろに、バックグラウンドで色を付けて 透視化することで可能で...
HTML CSS 【サンプルコードあり】HTML ブロックレベル要素とインラインレベル要素を理解しとかないとCSSの装飾で失敗する。
HTMLのブロックレベル要素とインラインレベル要素を理解しとかないと CSSの装飾で失敗する。 HTMLには、ブロックレベル要素とインラインレベル要素の２つがある。 CSSで設定する時に、この２つの要素の違いを理解してないと、 設定したのに...
HTML CSS ボックスタイプのレイアウト Flexbox で横並びにするほかにもCSSグリッドという方法もあった
ボックスタイプのレイアウト Flexbox で横並びにするほかにも CSSグリッドという方法もあった。 よく見かけるレイアウト、写真と文字で出来たタイル型で 横並びに配置されてる、設定の方法、 Flexboxで覚えてたが、CSSグリッドって...
HTML CSS HTML でWebサイトを作る時の骨組みで設定するタグ、何を使うかわかりにくい。よく使うのまとめました。
HTMLでWebページを作る時に必要な骨組み これいっつも何を使おうか悩みます。 さまざまなブロック要素があります。 でも、ここは人によってそれぞれで、この方法が正解 ってのはないみたい。 なので、私は後でメンテナンスする時にやりやすく出来...
HTML CSS padding と margin 使って余白の調整でデザインを整えるのに知っておきたい関係性
paddingとmargin 余白の調整に使用。 padding と margin の関係性 余白の設定に、padding marginを使用する。 paddingは要素から見て付けたい余白の指定に使用。 margin は、隣接する要素との...
HTML CSS Bootstrap使ったら、Navbar作成が簡単でビックリ！レスポンシブ対応でハンバーガメニューまで対応。
Bootstrapは、フロントエンド開発の効率を よくする為のフレームワークです。 サイトを作る際のいろんな機能が簡単に作成可能になる。 Bootstrapは無料で使えて、使える機能もいっぱい。 すごい人気です。 このBootstrapを使...
HTML CSS CSSで画像を重ねて表示,【position:relative】と【position:absolute】を使うと可能です。文字の重ねも出来ました。
「position:relative」と「position:absolute」を使うと CSSで画像と画像を重ねたり、画像と文字を重ねたり するのが、簡単に出来きます。 この方法を覚えると、いちいち画像加工して重ねた画像を 作って反映させる...
HTML CSS justify-content 両端に寄せたいのに効かない。真ん中のまま、右にも、左にも寄らない。space-betweenで解決
CSSで、justify-content を使うと簡単にフレックスコンテナ単位での 配置の設定が簡単に出来るので便利ですよ。 でも、使い方を間違えると、意図しない配置になって 苦労しますよ。 サイトのコーディングしてて、画像とテキスト部分を...