VScode

HTML/CSSでのコーディングの時に、Emmetの省略記法、知ってると作業効率がむっちゃ上がる。知らないと時間を損してますよ。

Emmetの省略記法、HTML/CSSでのコーディングの時に知ってると作業効率がむっちゃ上がる。HTML・CSSでのコーディングする際、何度も同じコードを書いていきますよね。VScodeでやってる場合は、単語入れると、候補が表示されるのでそ...
プログラミング

firestarageにZip形式でディレクトリごと下さい と言われたら。

firestarageにZip形式でディレクトリごと下さい!あるwebサイトのデータを送付する方法を問い合わせた際によく出る単語です。この意味わかる場合は大丈夫です。わからない場合はこの機会に覚えちゃいましょう。私は最初?????でした。す...
HTML CSS

CSSで装飾する時に、テキストの line-height(行間)・letter-spacing(字間)を簡単に設定する方法

CSSで装飾する時に、テキストの行間・字間を簡単に設定する方法テキストの装飾するプロパティ、字間のスペース・行ボックスの高さを設定。それぞれ、簡単に設定できる方法ここに残します。テキストの行間を設定line-heightテキスト表示部分の、...
HTML CSS

画像や文字などを透視化、opacity rgba を使って背景画像の透過ができ、重ねて強調させるとこが可能になる。ホバー設定も可能

背景画像の上に文字などを入れた場合。画像によっては文字が少し見えにくい場合ありますよね。そんな時、文字等の後ろに背景を薄くあてることで、見えやすくなる場合があります。文字の後ろに、バックグラウンドで色を付けて透視化することで可能です。この記...
HTML CSS

【サンプルコードあり】HTML ブロックレベル要素とインラインレベル要素を理解しとかないとCSSの装飾で失敗する。

HTMLのブロックレベル要素とインラインレベル要素を理解しとかないとCSSの装飾で失敗する。HTMLには、ブロックレベル要素とインラインレベル要素の2つがある。CSSで設定する時に、この2つの要素の違いを理解してないと、設定したのに反映され...
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で画像と画像を重ねたり、画像と文字を重ねたりするのが、簡単に出来きます。この方法を覚えると、いちいち画像加工して重ねた画像を作って反映させる必要がな...