107 Building the Hero
- Heroセクションを作る
- 左にテキスト、右に写真が来るのでそのボックスをdivで作る
- それぞれの箱にh1とimgを入れる
-
<body><section class="section-hero"><div class="hero-text-box"><h1>A healthy meal delivered to your door, every single day</h1></div><div class="hero-img-box"></div></section></body>
- h1の下にpタグでhero-descriptionを入れる
- h1にもheading-primaryのクラス名を入れておく
- 基本的には全てクラス名を入れて、CSSではそのクラス名に対してレイアウトする
- ボタン2つをaタグで作る。href="#" class="btn"も忘れずに
-
<a href="#" class="btn">Start eating well</a><a href="#" class="btn">Learn more ↓</a>
- テキストボックスとイメージボックスを横並びにするために、2つのボックスをdivで囲う
- そのdivをdisplay: grid; でグリッドにし、２列の指定をする
-
.hero {display: grid;grid-template-columns: 1fr 1fr;}
- 画像が大きすぎるので、画像にクラス名(altも)をつけて、そのクラス名に対しwidth: 100%で指定する。そうすることで親要素であるimg-boxの100％の幅になるので結果的にgrid boxでテキストボックスと画像の比率が半々になる
- 画面幅が小さくなっても自動的にちじむ
106 How rem and max-width works
width: 1000pxとmax-width: 1000pxの違い
- width: 1000px >>> 画面幅が小さくなっても大きくなっても要素の幅は1000px
- max-width: 1000px >>> 画面の幅が1000px未満の時は要素の幅も画面幅に応じて小さくなる。画面幅が1000pxを超えた場合は1000pxのまま
remとは
- root em の略 / 最上位階層のM＝１文字分の大きさを表す単位
- 1rem=1font-size(指定しない限り16px)
- html { font-size: 10px} とした場合は、1rem=10pxになる
- ルート要素(html)に対する割合
- 計算しやすいように html { font-size: 10px; } で指定する
- 実際にはデフォルトの16pxに対して10pxは62.5%なので html { font-size: 62.5%; }で記述する
remの特徴と仕組み
rem（root em）は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。
html { font-size: 10px; } /* ルート要素にremの基準となるサイズを指定 */
h1 { font-size: 1rem; } /* 10px 相当 */
h2 { font-size: 2rem; } /* 20px 相当（２倍） */
h3 { font-size: 0.5rem; } /* 5px 相当（半分） */このようにremの単位は、ルート要素（html要素）に指定されたフォントサイズに対する倍率として指定します。ルート要素のフォントサイズが10pxの状態で2remが指定された場合には、2倍の20pxが定まる事になります。
remってなんだ
remというのはroot em。つまりはルート要素（html要素）のフォントサイズのこと。
その倍率を指定します。
ルート要素（html要素）のフォントサイズのデフォルトは16pxです。
1.2emならルート要素の1.2倍のフォントサイズ（=19.2px）だし
0.8emならルート要素の0.8倍のフォントサイズ（=12.8px）となるわけです。
相対値を使うメリット
ブラウザの設定でフォントサイズを変更したときに設定が反映されるようになります。
pxなどの絶対値指定だと、ブラウザでフォントサイズを大きくしても
pxで指定したフォントサイズはそのままです。
remを使うとブラウザのフォントサイズが大きくなると、remを使用した要素のフォントサイズも相対的に
大きくなってくれます。
106 How rem and max-width works
width: 1000pxとmax-width: 1000pxの違い
- width: 1000px >>> 画面幅が小さくなっても大きくなっても要素の幅は1000px
- max-width: 1000px >>> 画面の幅が1000px未満の時は要素の幅も画面幅に応じて小さくなる。画面幅が1000pxを超えた場合は1000pxのまま
remとは
- root em の略 / 最上位階層のM＝１文字分の大きさを表す単位
- 1rem=1font-size(指定しない限り16px)
- html { font-size: 10px} とした場合は、1rem=10pxになる
- ルート要素(html)に対する割合
- 計算しやすいように html { font-size: 10px; } で指定する
- 実際にはデフォルトの16pxに対して10pxは62.5%なので html { font-size: 62.5%; }で記述する
remの特徴と仕組み
rem（root em）は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。
html { font-size: 10px; } /* ルート要素にremの基準となるサイズを指定 */
h1 { font-size: 1rem; } /* 10px 相当 */
h2 { font-size: 2rem; } /* 20px 相当（２倍） */
h3 { font-size: 0.5rem; } /* 5px 相当（半分） */このようにremの単位は、ルート要素（html要素）に指定されたフォントサイズに対する倍率として指定します。ルート要素のフォントサイズが10pxの状態で2remが指定された場合には、2倍の20pxが定まる事になります。
remってなんだ
remというのはroot em。つまりはルート要素（html要素）のフォントサイズのこと。
その倍率を指定します。
ルート要素（html要素）のフォントサイズのデフォルトは16pxです。
1.2emならルート要素の1.2倍のフォントサイズ（=19.2px）だし
0.8emならルート要素の0.8倍のフォントサイズ（=12.8px）となるわけです。
相対値を使うメリット
ブラウザの設定でフォントサイズを変更したときに設定が反映されるようになります。
pxなどの絶対値指定だと、ブラウザでフォントサイズを大きくしても
pxで指定したフォントサイズはそのままです。
remを使うとブラウザのフォントサイズが大きくなると、remを使用した要素のフォントサイズも相対的に
大きくなってくれます。
104 フォルダ準備・ファイル準備・デザインシステム記載
1. Create a file and folder
- Create index.html
- Declear HTML
- Create style.css
- Create css folder and place style.css in it
- Link HTML and CSS <link rel="stylesheet" href="folder name/file name"/>
- Change <title>
<title>Omnifood</title>
2. Create <h1> tag
<h1>Headline: A healthy meal delivered to your door, every single day</h1>
3. Global reset and initial set up of CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
4. Style body
body {
font-family: sans-serif;
line-height: 1;
font-weight: 400;
color: #555;
}
5. Write design systems
/*
--- 01 TYPOGRAPHY SYSTEM
- Font sizes (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
- Font weights:
Default: 400
- Line heights:
Default: 1
- Spacing systems (px):
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
--- 02 COLORS
-Primary: #e67e22
-Tints:
-Shadows:
-Accents:
-Greys: #555
--- 05 SHADOWS
--- 06 BORDER-RADIUS
--- 07 WHITESPACE
- Spacing systems (px):
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
お久しぶりです
皆さん
お久しぶりです。
Bettermanです。
前回の投稿は2019年の3月でしたので、
約2年ぶりの投稿ですね。
2年たちますと35歳を迎えました。
当時は禁煙・禁欲・禁酒などに取り組んでいましたが、
この2年間の間どれもある程度の期間やったりやらなかったりを繰り返していました。
本日久しぶりにこのブログの存在を思い出したので投稿してみた次第です。
いま私がどんな感じかと言いますと、
禁煙：65日目
もう吸魔は来なくなりました
禁酒：毎日ウイスキーがば呑み
禁欲：2日目
まだ髪の毛のべた付きや皮脂が多い状態です
経験上あと何日かすると改善がみられると思います
体重：年末に過去最高体重63キロになってしまい
いまは運動と夜ご飯の白米抜きで60キロまで挽回しています
全盛期の56キロぐらいまで一度落として、その後は筋トレへ移行していきたい
増量してから絞るのが筋肉をつけるのに効率がいいとは理解しているのですが
太っている時の顔のキレの無さが嫌いなのです。。
ダイエットは有酸素運動が好きなので続けています。(年始から)
ジョギングは5キロ走るのも体が重くてしんどかったのから始まり、
先日15キロをゆっくり走り切りました。
水泳も始め、最初は50メートルぐらいでもしんどかったですが、
先日1800メートル連続で泳げました。
出来ることが増えるとうれしいですね。
特に有益なブログでは無いですが気ままに書いていこうと思っています。
101
お久しぶりです。Bettermanです。
2019年も気付けはもうすぐ4月になり一年の1/4が経過しようとしていますが、
皆さん良いスタートダッシュは切れましたでしょうか？
私のほうは、今年に入ってからタバコ・お酒の頻度も増し
最近はオナ禁のほうもうまく達成できていません。
私は日本企業の海外の現地法人で営業として働いているのですが、今年に入ってから、一応グローバル企業なので別の国のグループ会社へ出張したりだとか、お客さん対応の為に海外出張をする機会が増え、通常業務が回らなくなったりだとか出張時の準備不足で仕事があまり上手くいかないことが増えてきてしまっています。
で、やる事はあるのですが、やる気も起きない。
そのストレスでか、お酒もタバコも増え、運動も全然していません。。
なんとかこの状況を抜け出したい
とりあえずオナ禁はやろうと思います！
本日オナ禁1日目！
この文章を書いていて、色々なことにビビッている(仕事の面で)自分に腹が立ってきました。
抜け出します
100
1/15
禁煙135日目/オナ禁7日目/カフェイン禁0日
タバコ吸いたい。。。
禁煙開始から4ヶ月半経過していますが、今日は強烈にタバコを吸いたいと感じています。今海外出張中なのですが、普段とは違う場所での仕事(海外の同じグループ会社に出張をしています。)に加え、自分が一番知識が無いのにも関わらず営業職として社内の各分野の専門家を取りまとめないといけない。。人に指示をするのがすごく苦手な性格なので結構つらいです。そういう部分を改善したくて今の職種を選んだのですが、、、。
あと先日の投稿でも書きましたが、カフェイン禁も続いていません。
やはり少しでもコーヒーを飲むと、不安感も出るし夜の寝つきも悪いです。
分かってはいるのですが。
オナ禁も守れていません。
というかエロ禁が出来ていません。
パソコンやスマホでアダルトサイトは閲覧出来ないように設定をしていたのですが、
最近はその設定を解除していますｗ
肌は脂ギッシュで抜け毛も増えています。
お酒も日常的に呑むようになっています。
お腹周りのサイズが大幅アップ。疲れも取れにくくなっています。
ストレスに晒されている時期に自分をコントロール出来るのが理想なのですが、年末のバタバタから色々と自分の生活を自分でコントロール出来ていないという感覚がすごくあります。
今のあまり良くない現状を書きましたが、
心配しすぎず当面やっていこうと思います。
では。
