kenshu-frontend's Introduction
kenshu-frontend's People
kenshu-frontend's Issues
HTML/CSS研修レビュー
綺麗なマークアップができていてとても良いと思います!
スタイリングに関しても display: flex
や一括指定プロパティなども適切に使えていて無駄のないモダンなコードになっていて良いと思います!
改善できそうな点を下にコメントしたので確認してみてください。
次の研修はCSSのリファクタリングになるので、改善できそうなところはぜひ試してみてください!
ranking-img-div
というクラス名ですが、ここは div
に限らず span
や header
などの他の要素でもスタイリングできるため、要素名を含めたクラス名は避けたほうが良いです。
今回の場合 ranking-img-wrapper
などにすると良いかと思います!
クラス名の付け方などはあとの研修で学習できるので、そのときに慣れていければ良いと思います!
右の margin
により若干デザインがずれてしまっています。
隣接兄弟結合子(+
)や:last-child
擬似クラスなどを用いて解消すると良いと思います!
参考
- https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_combinator
- https://developer.mozilla.org/ja/docs/Web/CSS/:last-child
position: absolute
を使用している場所が多いですが、 position: absolute
は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されないので、多用しすぎると要素の位置関係が複雑になり管理しづらくなるので、要素の上に要素を重ねたい場合など、特殊な位置に要素を配置したいとき以外はあまり使わない方が良いかと思います!
参考
細かいですが、リンクは a
タグにしか反応しないので、li
タグに padding
や background
のスタイルを指定すると、クリックできる部分が見た目より狭くなってしまいます。
この場合は a
タグにスタイリングをするなどの工夫が必要になります。
CSS・SCSS研修レビュー
総評
BEM
のルールにしたがって綺麗にマークアップできていて、Block
/ Element
/ Modifier
の分け方もわかりやすく、クラス名も明確でとても良いと思います!
改善点
変数について
細かいかもしれませんが、変数は _variables.scss
などにまとめて、style.scss
の最初などで読み込むことで、全ファイル共通で使えるようになるので、別ファイルに切り出すと良いと思います!
今回の規模の場合はファイルごとに書いても全然問題ありませんが、今後大きなコードを扱うときは活用してみてください。
共通スタイルについて
こちらも細かいですが、共通のスタイルも_common.scss
や_config.scss
などにまとめるとコードがすっきりすると思います。
style.scss
に共通スタイルを書いた場合、共通スタイルが大きくなった場合にどのファイルをimport
しているかがわかりづらくなってしまします。
こちらも今回の規模であれば全然問題ありませんが、今後活用してみてください。
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.