Jyu2– Author –
-
30DAYSトライアルのまとめ【DAY10】
DAY10の課題は「Google Chromeの検証を使う+LiveServerをインストールする」になります。 DAY10課題 Google Chromeの検証(デベロッパーツール)を使う 模写コーディングをやったあとに模写元のソースを確認するためになんとなくで使用してましたが、東京フ... -
30DAYSトライアルのまとめ【DAY9】
DAY9の課題は「基本のショートカットを覚える+ファイルパスを理解する」になります。 DAY9課題 VSCodeのショートカットキー ショートカットキーを使いこなすことはプログラミングスピードを向上させるためには必須なので、東京フリーランスのサイトに貼ら... -
30DAYSトライアルのまとめ【DAY8】
DAY8の課題は「エディタをインストールしよう」になります。 DAY8課題 30DAYSトライアルを開始しますが、DAY1〜DAY7(ProgateのHTML&CSSの学習・道場コースの全てを完了させる)は30DAYSトライアルをやろうと決意する前に個人的にやってたので割愛し、DAY8... -
30DAYSトライアル開始と今までの振り返り
ブログについて再確認 プロフフィールにも記載していますが、SIerでSE・PGをやってます。 ですので、プログラミング初心者というわけではありませんが、業務ではWeb関係の作業はなくレガシー且つメジューではない言語、DBを使用しているのでWebに関しては... -
CSSで背景画像の比率を保ったままブラウザのサイズに合わせる方法
PAS-POLのサイトを模写コーディングしてた時に背景画像の比率を保ったままブラウザの幅に合わせるのに四苦八苦したのでまとめておきます。 背景画像の指定方法 背景画像は「background-image」にて指定可能です。 background-image: url(画像のurl); ただ... -
環境構築不要!フロントエンド開発がブラウザ上できるCodePen
CodePenとは? CodePenはブラウザ上でHTML、CSS、Javascriptを使用してウェブ開発ができるWebサービスです。しかもプログラムを編集した内容はリアルタイムプレビューで確認できるという優れものです。 作成した成果物は共有されるので、他のユーザーが作... -
CSSで背景を画面幅いっぱいに表示させる方法
ヘッダーなどを作成する際に幅の最大値は指定するが、背景は画面幅いっぱいに表示したいという場合は多いですよね。そんな時に自分がよくやったミスをメモしておきます。 幅の最大値は指定するが、背景は画面幅いっぱいに表示したいとは? 最初に「幅の最... -
Flexboxとfloatをきちんと使い分けよう
ProgateでFlexboxを学習したので、復習の意味もこめてまとめていきます。 Flexboxとは? Flexboxとは(Flexible Box Layout Module)の略で、柔軟な・融通のきくボックスレイアウトのモジュールになります。ボックスレイアウトは四角形であるボックス要素の... -
SassでプログラムのようにCSSを効率的に記述する方法
ProgateでSassを学習したので、復習の意味もこめて学習内容をまとめておきます。 Sassとは? Sass(サース、サス)とはCSSをプログラムのように記述することができるRubyで作成されたメタ言語になります。 ちなみにメタ言語とは メタ言語(メタげんご、英 Me... -
模写コーディング初心者なので有料noteを購入してみた
いつも色々と参考にさせて頂いているHPcodeを運営されているはにわまん@haniwa008さんが公開している有料notePhotoshop、Illustrator、XDからのコーディングに慣れよう!を購入して模写コーディングを行いました。 noteの内容 ヘッダーメニューと画像、メ...