Webサイトをコーディング模写するやり方と使用するツール | HPcode（えいちぴーこーど）
模写の対象サイトを決める まずはどのサイトを模写するかを決めましょう。難しすぎても途中で諦めてしまいますし、簡単すぎたら時間の無駄になりかねません。 わたしはここから選んでいます（難易度高め・・・） 画像がメインのLPとかのサイトはあまり練習にならないので、テキストベースのサイトを選ぶのがいいかと思います。模写コーディングするサイトの選び方は以下の記事にまとめたので、まだ対象サイトが決まっていない方はまずはこちらを参考に選んで見てください！ https://haniwaman.com/select-mosha/ より実践的なコーディングを練習したい場合は、実務で行うようなデザインカンプからのコーディングを練習できるnoteもあるので、ぜひお試しください！ → Photoshop、Illustrator、XDからのコーディングに慣れよう！ コーディングルールとツール なんの計測も行わずに目視
FLOCSSを使って破綻しにくいCSS設計を！ | HPcode（えいちぴーこーど）
この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。 それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・ 要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・ 再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・ サイト固有の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hiloki/flocss: CSS organization methodology.
