HTML＆CSS– category –

ProgateでSassを学習したので、復習の意味もこめて学習内容をまとめておきます。 Sassとは？ Sass(サース、サス)とはCSSをプログラムのように記述することができるRubyで作成されたメタ言語になります。 ちなみにメタ言語とは メタ言語（メタげんご、英 Me...

いつも色々と参考にさせて頂いているHPcodeを運営されているはにわまん@haniwa008さんが公開している有料notePhotoshop、Illustrator、XDからのコーディングに慣れよう！を購入して模写コーディングを行いました。 noteの内容 ヘッダーメニューと画像、メ...

前回のブログで要素間の隙間の話しををしましたが、それを解決するために自分は「CSS 行間 なくす」とかで検索してました。でも、昨日の話しは行間ではなくて要素間だったんですよね。 そこで今回は行間と要素間の違いと行間のコントロール方法をまとめて...

またまたWebページの模写中にブロック要素とブロック要素の隙間ってなんやねんってなったので、調べた結果をまとめてみます。 Twittrでも悩みをつぶやきました。 このh1とpの行間ってmarginをマイナスとかしてなんとかするしかないの？ググって親要素のfon...

ProgateのHTML&CSS道場コース上級編の完成ページを模写コーディングしてみました。 Progateの道場コースで同じページを作成していたこともあって、かかった時間としては半日ぐらいだったと思います。 模写コーディングの結果、divで囲む単位とかスタイルが...

模写コーディング中に要素の高さ指定で悩んだので、一度振り返ってみます。 前提 インライン要素にはサイズの指定はできません。インライン要素はテキストの内容、太さでサイズが決まります。 サイズ無指定(auto) 幅・高さを指定しなき場合はいずれも「aut...

ProgateのHTM&CSSコースは一通りやったので、Webページの模写コーディングに取り掛かりました。 参考にさせて頂いたサイト HPCode - はにわまんさん https://haniwaman.com/replication-coding/ 模写コーディングのルールやfontや色、サイズを計測するChro...

ProgateのHTML&CSS道場コースをやっててfloatの解除やら高さが思うようにならないってので四苦八苦したので、調べた内容をまとめておきます。 floatプロパティの動作確認 floatプロパティを使用しない場合 まずfloatプロパティを使わずにdiv要素(div1)の中...

今日はhtml、CSSでの要素のセンタリング(中央寄せ)についてまとめます。 インライン要素とブロック要素の違い ブロック要素は要素の横幅が少ししかなくても横幅いっぱいに配置され、次の要素はブロック要素の下に配置されます(div、h1、pタグなど)。 一方...

このブログを始める前にProgateの「シンプルなWebサイトを作ろう PHPコース」を受講してましたが、HTML/CSSでのレイアウトイメージがいまいちつかめてませんでした。Progateは実際にソースを書いて表示のイメージを確認しながら進んで行くんですけど、ソー...