HTML/CSS

HTML/CSS

webp(ウェッピー)で表示速度は劇的にあがるのか?

「webpで表示速度は劇的にあがるのか?」という問いに対しては、はっきりイエス!!とは言えないものの、カラフルな画像(64色以上の画像)に関してはwebpを採用することで表示速度の大幅な改善が見込めます。
HTML/CSS

【超簡単】独自スニペットコードの登録方法【コーディング効率化】

コーディング効率化の1つの手段として「スニペット登録」という方法があります。しかし、登録をする上で、いくつかのルールに則ったコードを書かないといけません。とはいえ、ルールを覚えるのは面倒です。そこで今回は、「ルールを覚えなくても簡単にできる独自スニペットコードの登録方法」について紹介していきます。
HTML/CSS

【CSS】z-index:-1;で擬似要素が上に来たりどこかに消えたりする。その原因と対処法

先日、擬似要素を奥に置きたくて「z-index:-1;」という指定を入れてみたとき、擬似要素が想定より上(手前)に来てしまったりどこかに消えてしまったりするという場面に遭いました。そこで、z-indexプロパティと擬似要素の関係について調べ、今回、備忘録としてまとめてみました。
HTML/CSS

【CSS】 firefoxでだけborderの線が消える?原因と対処法について

先日、仕事でWebサイトのテーブルタグ部分の編集作業をしていると、firefoxで表の一部の線が消えてしまうという問題に出遭いました。「background-clip: padding-box;」で解決する場合と、解決しない場合があるようなので、原因と解決方法についてまとめてみました。
HTML/CSS

【CSS】positionプロパティでスプリットレイアウト

今回は、スプリットレイアウトのコーディングについて、「position:fixed;」を使った方法と「position:sticky;」を使った方法の2つを中心に紹介させていただきます。
HTML/CSS

【CSS】display:flex; と display:inline; の違いとは

「display:flex;」と「display:inline;」がそれぞれどんな役割を持った記述なのかというところから、フレックスボックスやインライン要素について自分なりに復習しながらまとめてみました。
HTML/CSS

【SCSS】scssのコンパイル先をcssフォルダに指定したい

今回は、scssのコンパイル先の設定についてまとめてみました。具体的には「scssファイルに書いたものをcssに変換し、新規のcssファイルをcssフォルダ内に書き出す」ということを行っていきたいと思います。
HTML/CSS

Webサイト制作③ 架空のカフェ&ランドリー「GOICHI」

現在、大阪にある職業訓練校の「グラフィック・WEBデザイン修得科」というコースを受講しています。期間は4月25日から10月24日までの6カ月間。 今日は10月18日、残り期間は僅かとなっています。 Webポートフォリオサイトの制作が完了して...
HTML/CSS

Webサイト制作② 架空のVtuber「ぽてち」

「政治家は猫になる」という主張を踏まえて「猫が政治家になる」というストーリーでWebサイトを作ったらどんな感じになるのだろうか、という気持ちが僕の中で芽生えました。