サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
moshashugyo.com
図のようにflexアイテムを均等に配置する方法となぜ均等になるのかを解説します。 <div class ="flex-container"> <div class ="flex-item">1</div> <div class ="flex-item">2</div> <div class ="flex-item">3</div> </div> .flex-container { display: flex; ... } .flex-item { flex: 1; /* これが重要! */ ... } このようにflexアイテムに対して、flex: 1;を指定するだけで、flexアイテムの個数に限らず均等幅(同じサイズ)になります。 たったこれだけなのでコピペして使えますが、なぜこうなるかも理解してみてください。次のセクションでなぜ均等幅になるか解説します。 【初学者・中級者の方】独学に限
Sassでは現在、これまで多くのシェアを誇っていたLibSassに代わり、Dart Sassが推奨されています。 Dart Sassのファイルをコンパイルする方法はいくつかありますが、この記事では、VSCodeの拡張機能を利用した方法を紹介します。
実務レベルを体験するための コーディング練習教材 このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
サイトを制作する際、画像の最適化は複雑でベストプラクティスがわからなかったり、疎かにしている人は多いのではないでしょうか? レスポンシブイメージ decoding="async" loading='lazy' レイアウトシフト WebPやAVIF等の次世代画像フォーマット 画像周りでは知っておかないといけないことが多くあります。 この記事では、その中でも特にややこしい、srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
模写修行メディアは駆け出しエンジニアを応援する、コーディングやプログラミングについて発信するメディアです。
プログラミング学習サービスはたくさんありますが、その中でも圧倒的に知名度があり、多くの方に使われているサービスがProgateです。 Progateを使った学習は、HTML・CSSを終えてから、下記のどちらかに進むのが王道の流れです。 フロントエンドに興味があればJavaScript バックエンドに興味があればRuby or PHP or Python 初学者の方にとってプログラミングに慣れる / 知るという意味で、この流れは適切です。ただし、Progateは基礎の基礎を勉強するサービスです。Progateだけではとても実務レベルのスキルや知識は身につきません。 この記事では、『Progateの次は何を勉強すれば良いのか』について、web制作 / フロントエンドに特化して紹介します。 ↓プロになるための学習ロードマップ(web制作編)は、下記の記事をご覧ください。 【2024年版】web制
現在、多くのwebサイトがアニメーションを取り入れています。 特に、スクロール連動型アニメーションを取り入れているサイトは誰でも1度はみたことがあるのではないでしょうか? 今回は、効率よくサクッとスクロールアニメーションが実装できるJavaScriptのライブラリ、AOS(aos.js)を紹介します。 JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。 JavaScriptの勉強ができるおすすめの本やサイト紹介! 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
実務でリニューアル案件や改修案件をやると、他人が書いたコードをよく見ることになります。悪い意味で"ヤバイ"と思うコードもたくさん目にします。 HTMLは色々な書き方があってOKというわけではなく、正しく意味付けするものなので、ちゃんと書いていれば人によってあまり差が生まれません。一方で、SSは人によってC書き方はかなり様々です。 どんなサイトを作るのか 誰が作るのか サイト公開後は誰が保守・運用するのか これらによって最適な書き方は変わってきます。正解はありませんが、CSS設計を理解して、自分の中でどんなCSS設計手法を採用するかは決めておくべきです。 この記事では、CSS設計に関して、具体的なサンプルも用いて解説します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
HTMLを記述する <div class="kv"> <div class="bg"> <div class="text-block text-white"> <p class="text">webkore<br>Text Split Layout</p> </div> </div> <div class="text-block text-black"> <div class="text-inner"> <p class="text" aria-hidden="true">webkore<br>Text Split Layout</p> </div> </div> </div> 全体のHTMLコードです。 白と黒の2色のテキストを用意 2色のテキストをピッタリと重ね合わせる テキストの親要素等にwidthやoverflowで、はみ出た部分を非表示にしていく このような流れで作ります。 キー
💡 class=”single-item" レイアウトや見た目のスタイルを指定するためのクラスです。こちらのクラスには、アニメーション関連のCSSは指定しません。 💡 class=”u-fade-type-up" アニメーション時のスタイルや動きを指定するためのクラスです。アニメーション関連のスタイルは全てこちらのクラスに指定します。「u-」は、「utility」の「u」です。 💡 class=”js-scroll-trigger" トリガー用のクラスです。JavaScript側で要素が画面下部200pxに達したかを判定する際に必要となります。「js-」がついているクラスは、JavaScriptから操作するクラスなので、CSSの指定はしません。 CSSを記述する /* レイアウトや見た目のスタイル */ /* ---------------------------- */ .sing
コーディングをしていて意外と面倒なのがフォームのカスタマイズです。 ブラウザによって見た目がまちまちで、サイトのデザインとマッチしないことも多々あります。ただ、デフォルトのスタイルをリセットしてカスタマイズしようとしても、他のHTML要素と違って色々と面倒な点もあります。 また、カスタマイズする際はアクセシビリティにも考慮しなければいけません。 フォームのデザインは、オシャレにする必要はありません。ユーザにとってわかりやすいものにすることがベストです。 この記事では、最低限のアクセシビリティを意識した、フォームのカスタマイズを紹介します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
web制作の勉強にどんな教材を使うか迷われる方は多くいます。今は情報が多すぎて、良い情報かどうかを判断するのが難しいと思います。特にwebの記事は、検索上位でも間違っているものもあります。 この記事ではweb制作の勉強中の方やこれから勉強したい方に、おすすめの学習サイトを紹介します。
パララックスを使うメリット・デメリット パララックスを使用する際のメリット・デメリットについて紹介します。 パララックスのメリット・デメリットは表裏一体なところがあります。**上手く使えばメリットとなり、誤った使い方をするとデメリットとなってしまします。**使用箇所は慎重に選定した方が良いです。 メリット 見せたいものをピンポイントで見せられる デザインの幅が広がる ストーリー性を持たせることができる これらのメリットを紹介します。 💡 見せたいものをピンポイントで見せられる 動きやスピードを操作することで、他要素との差別化が可能となり、ユーザーに見せたいものをピンポイントで見せやすくなります。 💡 デザインの幅が広がる パララックスは、デザイン性の高いサイトに取り入れられることが多いです。パララックスを使用することで、デザインの幅を広げるとともに、インパクトを与えることができます。
このページを最初にブックマークしてみませんか?
『模写修行 - 実務レベルを体験するためのコーディング練習教材 -』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く