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