プログラミング– category –

PAS-POLのサイトを模写コーディングしてた時に背景画像の比率を保ったままブラウザの幅に合わせるのに四苦八苦したのでまとめておきます。 背景画像の指定方法 背景画像は「background-image」にて指定可能です。 background-image: url(画像のurl); ただ...

ヘッダーなどを作成する際に幅の最大値は指定するが、背景は画面幅いっぱいに表示したいという場合は多いですよね。そんな時に自分がよくやったミスをメモしておきます。 幅の最大値は指定するが、背景は画面幅いっぱいに表示したいとは？ 最初に「幅の最...

ProgateでFlexboxを学習したので、復習の意味もこめてまとめていきます。 Flexboxとは？ Flexboxとは(Flexible Box Layout Module)の略で、柔軟な・融通のきくボックスレイアウトのモジュールになります。ボックスレイアウトは四角形であるボックス要素の...

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...