モブプロ感想
実際やってみたことと思ったこと
その場で書いたメモをそのまま残している
内容を整理して別のノートに切り出したとしても、このメモはこのまま置いておこうmrsekut.icon
4回目
目的、やったこと
前回mrsekut.iconが作ったHTMLを元に、もうひとりのメンバーFがそれにスタイルを当てていく
30分と区切っているのでとりあえずページ中の1セクションを作ることにした
今回は実際に制作物をブラウザに読み込ませながらやった
mrsekut.iconと他3名はツッコミ係
思ったこと
画面足りないよなって思った
エディタ、お手本サイトのPDF、ブラウザで読み込ませたもの、その他画像などの素材、ググるページぐらい画面があればもう少し楽だったのだろうか
周りの人の立ち位置が微妙に難しい
画面を提供するか、見ているものとは別にディスプレイを用意するか
imgタグにはaltに文字を書く癖を付けましょう
cssもhtmlと同じ順番で書く
大まかに書いて細かいところへ
最初はレイアウトを整えるスタイル
なので、marginやpaddingはもうちょいあとでやる
色とかも
ダウンロードフォルダは空派がいる
リセットcssよくわからん
モブプロ周りの人の適切な仕事がよくわからない
レスポンシブするつもりなら固定の値は入れないほうが良い
pxとかつらい
なので可変の%などのほうが相性が良い
lastだけこのスタイル充てない、みたいなのは頻発する
細かいところのmargin-rightとかはpxにすることも多い
max-widthを書くときは絶対にセットで普通のwidthもかこう
じゃないと横幅がmax-widthより小さい時に辺になる
最初の段階でflexなどで、大まかなレイアウトを取る
↑ここが一番難しそう
次回ぐらいからは、実際に会社としてのサービスになるものをみんなで作っていくと良さそう
3回目
目的、やったこと
2回目をやった上での1回目のやり直し
2回目に詳しい方Sがやっている風景を見て学んだことを活かして再び自分がやってみる
題材はとある食製品の紹介サイト。用意してもらった
構造だけなので制作物をブラウザに読み込ましたりはせず、画面を縦に2分割し、左にコード、右に用意したサイトのPDFという感じでやった
周りの人はツッコミなど
思ったこと
navigationとは？答えられるようにしとく
nav>ul>liの構造になることがおおい
タグを覚えよう
asideとは
navはh2
装飾のやつはcssで頑張る
figureとは
箇条書きで違和感がないものはli
横並びだから===li、はちがう
タグはあるけど非表示にして隠すのは良くない！(google的に)
2回目
目的、やったこと
1回目の続き。今度は知っている人Sがやっていくのを周りで見る形式
流れ
大雑把にタグを作ってからその詳細を作っていく
最初にheader, main, footerなどを分けて、その後は上から作っていく
思ったこと
モブプロとは？って感じではあるけど、モブプロというよりは勉強会的だった
ライブコーディングの勉強会
テキスト系のタグの判断が難しい
h1系、p, span, divなどなど
判断基準がわからないので判断に自身を持てない
全部divで囲いたくなるけど必要かどうかを判断しないといけない
例えばul>liをdivで囲うかどうか
marginなのかpaddingなのか
外側のsectionにはあまり左右にはpaddingはつけない説
sectionかどうか、は多少議論の余地があるのか
自分なりの論理を持った上で質問する必要がありそう
sectionのタイトルは必ずh2かh3あたりになる
どっちが良いとかは明確にはない
divはだめではないが適当ではない場合がある、多い
pはparagraph
段落とは？
本文っぽいやつ
画面全体を見てスタイルの当て方を考える
局所的な話ではなく、ページ全体を見て統一感を取れるようにpaddingなのか marginなのかの判断が必要
判断基準は、修正箇所の個数とか、デザインに変更があったときの臨機応変さなど
atomsのButtonのスタイルはどうするか
左右にpaddingを入れるか、幅を決め打ちするか
主に後者
文字数が増えても横幅が変わらないので
高さに関してはpaddingはありうる
スマホなら「画面幅の何%」とかで決め打つ
PC, タブレットなら固定pxとかで決め打つ
sectionの下部にbuttonがいるやつ
主にbuttonの底とsectionの底が一致している感じになる
そしてsection自体にmargin-bottomをつける感じになる
リストの項目の数によってbuttonが消えたりするのは実は特殊。その時は別の書き方をしないといけない
bg-image使うのあまり思いつかない
img書いてpositionで頑張りそう
サービスに文脈によって構造が変わりうる
そのリストの下部にあるテキストがなにかの記事に見出しならh3にするとか
スタイルがなければまったくUI見なくてもコーディングできるんだな
迷いがないのすごい
もしくは迷っている時間が短いのがすごい
解が一つとは限らないので、チームで話し合いすべき時が多々ある
まよえ！きけ！
vim, emmetないの大変そう
疑問
viewport heightってなに？
1回目
2019/10/23頃
目的
チーム内でHTMLの構造の分け方に認識の差があるので、それを是正しよう
個人的な動機としては、デザインチームの方の考えが正しいという前提に立ち、主にmrsekut.iconの認識がずれているので、mrsekut.iconの開発過程を見てもらいながらどこがおかしいかのフィードバックが欲しかった
やったこと
開発、デザインチームの全員(5名)
時間はとりあえず30分で区切ってみた
見つけてきた一つのWebサイトの画面のみを見ながら、mrsekut.iconがHTMLをコーディングしていく風景をみんなが見れるディスプレイに表示して他の4名が見ながらツッコミを入れる形式
最初はサイトそのものを見ていたが、本来はXDやFigmaのようなデザイン案を見てやるものなので、ということでFireShotで全画面スクショしてそれ見てやることにした
mrsekut.iconは考えを口に出しながらつらつらとコーディングをしていく
「最初はこうするね」とか「ここ難しいなー」とか言いながらやっていくと、「ここはこうした方がいいんじゃない？」とか「ここはこうでしょ」とかツッコミを貰える
周りの人も各自のPCを持っており、mrsekut.iconが必要そうな情報をその場でググって画面を共有してくれたりした
例えばHTMLのタグの種類一覧とか
<article>とは、みたいなことが知りたかった
目的に対する学び
最初は紙に書いて大雑把な構造を分けたほうがいいのでは？
HTMLを組む上で適切な(?)流れがいまいちわかっていない
最初にdivを使いまくってあとで適切なものに分けていくのはあり
最初から構造を入れ子にするのではなく、一旦全部兄弟として書き出してから入れ子にするのもあり
文脈を理解していないと、適切に分けることはできない
「ここはこうするものだ」という所謂HTML界の常識のようなものが欠落しているので、経験不足と言うかinput不足が否めない
モブプロに関する学び
題材とするサイトが難しいものだった(らしい)
mrsekut.iconがわからなすぎるので、あまり効率が良くないことがわかったので、次は良くわかっているデザイナーの方の作業をみんなで見ることになった
論理的に示してくれると大変わかりやすくて良い
なんでこうしないといけないのか?
「100%そうなるものなのか」それとも「だいたいこれでうまくいく」ものなのか
「正解がある」か「正解がない」かをハッキリさせたい感がある
どっちでも良いけど、どっちなのか知りたい
アブノーマルな批判はどの様に対処するか
例外すぎるので、特殊の対応をするとか、
この「アブノーマル」もよく起きる例外なのでこういう対処法があります的なTipsがあるのか
など