HTML＆CSS– category –
-
【iSara模写コーディング】カギカッコの作り方
iSara模写コーディングで僕自信が困ったこと、つまづいた点シリーズ。 今回はiSaraでセクションの見出しなどに使われているカギカッコの作り方について解説します。 こんなやつですね。 では、解説していきます。 実装方法 結論としては要素の擬似要素を使... -
【iSara模写コーディング】素材となる画像や背景画像の取得方法
iSaraの模写コーディングで僕自身が困ったこと、つまづいた点シリーズ。 今回は素材となる画像と背景画像取得方法について解説します。 画像については普通にブラウザからダウンロードできるので、特段困ることはないかと思います。 しかし、背景画像につ... -
iSara模写コーディング完了のお知らせと模写の前提条件
iSara模写コーディングが先日無事完了しました。 https://twitter.com/Jyu210/status/1283309297846218752?s=20 あまりのボリュームに何度も心が折れかけましたが、なんとか完了することができました。 iSaraとは iSaraとはバンコクのノマドエンジニア育成... -
模写コーディング初心者におすすめ教材。ポートフォリオにできるものもあり
Progateやドットインストールでの学習がひと段落したあとは「模写コーディングだ」って言われています。 しかし、どのサイトを模写したら良いか分からないといった方は多いと思います。 実際に僕もそうでした。 今回はそんな悩みを解決するために僕が実際... -
dl、dt、ddタグの使い方や意味を初心者向けに解説
先日初心者の模写コーディングにオススメというUdemyの実践Webサイトコーディング講座 ｜ HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようを行っていたらdl、dt、ddタグがたくさんでてきますが、ここで初めて使用しました。 そこ... -
模写コーディング初心者はにオススメ。Udemyの動画で模写コーディング
ProgateやドットインストールでHTML/CSSを学習した後は模写コーディングで実践をしてみようと言われています。 しかし、実際に模写コーディングをしようとしても何をどうしたら良いか分からないという方も多いと思います。 現に僕もそうでした。 僕の場合... -
【CSS】簡単に画像をトリミング。object-fitの使い方(図解あり)
CSSのobject-fitの説明を見ても各種値の動作がしっくりきませんでした。 そのため、図解や実際にコードも記述してobject-fitについてまとめました。 object-fitとは？ object-fitプロパティは、置換する要素（img要素やvideo要素など）をその要素内にどの... -
CSSで背景画像の比率を保ったままブラウザのサイズに合わせる方法
PAS-POLのサイトを模写コーディングしてた時に背景画像の比率を保ったままブラウザの幅に合わせるのに四苦八苦したのでまとめておきます。 背景画像の指定方法 背景画像は「background-image」にて指定可能です。 background-image: url(画像のurl); ただ... -
CSSで背景を画面幅いっぱいに表示させる方法
ヘッダーなどを作成する際に幅の最大値は指定するが、背景は画面幅いっぱいに表示したいという場合は多いですよね。そんな時に自分がよくやったミスをメモしておきます。 幅の最大値は指定するが、背景は画面幅いっぱいに表示したいとは？ 最初に「幅の最... -
Flexboxとfloatをきちんと使い分けよう
ProgateでFlexboxを学習したので、復習の意味もこめてまとめていきます。 Flexboxとは？ Flexboxとは(Flexible Box Layout Module)の略で、柔軟な・融通のきくボックスレイアウトのモジュールになります。ボックスレイアウトは四角形であるボックス要素の...
12