Farmnote Member's Notes

223

本

ファームノートで働く人々のマガジンです。「世界の農業の頭脳を創る」ことを目指して日々奮闘している僕らの日常や学びなどを発信しています。

運営しているクリエイター

#dailyCSS

Daily HTML&CSS #001 display:relativeとabsolute

ファームノートでUXデザイナーをやっている秋山ウテです。やっぱり自分でパーツを実装したいよねってことで、Reactに挑戦してみました。しかし！ちんぷんかんぷん過ぎたので、師匠に相談したところ、「まずはHTMLとCSSだな」ってことで、初歩の初歩をやることにしましたー。目次大きさの違う黒い四角形を3つ作る justify-content: space-betweenで均等に配置 radiusで四角を丸くする wrapに追従するaddボタン大きさの違う黒い四角形

Daily HTML&CSS #002 FontAwesomeを使ってヘッダーにアイコンを表示させる

ファームノートでUXデザイナーをやっている秋山ウテです。最終的にはReactでパーツ実装していくためにHTMLとCSSをやりたおそうというこの企画。 ReactといえばInstagramなので、まずはインスタのヘッダーをやりますよ。目次等間隔で配置する FontAwesomeを使ってアイコンを表示色をグリーンに変更してみる等間隔で配置する昨晩、やったこの方法を応用させます。まずは、wrapを。 div.headerWrap { position: r

Daily HTML&CSS #003 ヘッダーのロゴは左にアイコンは右に（Daily UI #053合併号）

ファームノートでUXデザイナーをやっている秋山ウテです。最終的にはReactでパーツ実装していくためにHTMLとCSSをやりたおそうというこの企画。ちょうど、Daily UIの課題がヘッダーだったので合併号でお届け。目次ヘッダーのロゴは左にアイコンは右にホバーで色を変えてみるヘッダーのロゴは左にアイコンは右に.iconDefaultColor { color: #acacac;}ul.headerWrap { width: 100%; height:

Daily HTML&CSS #004 画面のサイズによって変更させる

ファームノートでUXデザイナーをやっている秋山ウテです。最終的にはReactでパーツ実装していくためにHTMLとCSSをやりたおそうというこの企画。目次 justify-contentで揃え方を変える画像の比率をそのままに画面サイズいっぱいに justify-contentで揃え方を変えるこの部分は左揃えですが、こんな感じでやってます。 .articleActionWrap { width: 100%; height: 40px; background:

Daily HTML&CSS #005 ヘッダーにliタグを使わないというパラダイムシフト

ファームノートでUXデザイナーをやっている秋山ウテです。このnoteは師匠も見ているので、レビュー依頼としての機能も果たしています笑目次ヘッダーにはliタグを使うもんだと思ってた nav（divも）とflexboxでも出来た！ヘッダーにはliタグを使うもんだと思ってた前職の影響（SEOの意識高め）もあって、ヘッダーの要素はliタグで配置していました。すると、「liタグ以外でもできるからやってみ〜」と師匠から御言葉が。たしかに、list-style:non