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 を使うと簡単にフレックスコンテナ単位での 配置の設定が簡単に出来るので便利ですよ。 でも、使い方を間違えると、意図しない配置になって 苦労しますよ。 サイトのコーディングしてて、画像とテキスト部分を...
HTML CSS

webkit-overflow-scrolling: touch; CSSを見てたらこんなコードがあったので ちょっと調べてみました.

-webkit-overflow-scrolling: touch; CSSを見てたらこんなコードがあったので ちょっと調べてみました。 調べた結果。。。 webkit-overflow-scrolling: touch;は不要 このコード...
VScode

VSCode 初心者用に初歩的な使い方と 後々便利になる設定 定型文一括表示、lang=”ja”にする方法。

この記事では、これからVSCodeを使ってコードを書いて サイトを作成していきます。 この記事を読むと、HTMLに書き込んでいける状態までは 出来るように書いています。 でも、どうやってやるの? 私も最初は、まったくわかりませんでした。 ど...
VScode

Visual Studio Code のインストール から初期設定 日本語対応化まで図を使って説明。駆け出しプログラマー必見

プログラミング初心者でも、Visual Studio Codeの インストールから初期設定・日本語化までができるよう この記事では、図を使って説明してます。 Visual Studio CodeはMicrosoftが開発してる テキストエデ...