自力でWebサイトを作れるようになるブロックコーディングとは？ HTML/CSSの脱初心者を目指して

HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01 モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色

[otchy210]

HTML コーディングする AI 無いのかな？少なくとも研究してる人はいそうだよね。これ見て程よく AI 向きのタスクだなと思った。

[xlc]

人の目を気にしてカッコつけるから一歩目が踏み出せなくなる。私が最初に書いたのはシェルでHello, worldを出力するCGI。不完全からはじめて順に足していくようになさい。CSSなんてのは製品化するときに初めて学べばよい。

[gyochan]

文書の樹状構造（章>節>項）を把握して、それをsectionの入れ子で構造化する。これを一番最初にやると見出しレベルの迷いとかもなくて速いですよ。

[webstriver]

最近要件や仕様踏まえたプログラミングより自由度高いCSSの方が難しくて面倒だなと感じだした。歳かな…

[sisya]

ブロック単位でコーディングしても、その部分しか動かず達成感を得られにくく、全体の完成度を底上げする方法でも不満のある箇所ばかりでやる気が削れる。結局速度のない人は自分の集中力が持たないという話になる。

[zokkon]

タイトルからは小さなブロック単位でコーディングする技術の解説という印象を受けるが、逆で「大きなブロックから組み立てる」ことを目指す本らしい

[diveintounlimit]

HTMLのブロック以上では無く、意味のまとまりで考えると最終的には自然とこういう単位になる。本質を捉えずにどのエリアに該当するかという考え方をしていると足元を掬われることになるだろう。

[knok]

レイアウトからHTML生成するような研究はみたことある

[hdampty7]

Webサイトを作るというよりもWebページを作るという感じ。

[pmint]

みんな普通にやってること。むしろそれ以外のやり方があるなら知りたい。適当なサイトでブラウザーの開発者ツール開いて、適当なところに * { border: solid thin gray; } とでも書いて見てみればいい。

[MiyawakiTakeru]

コーディングまでできればサイトの自由度が上がりそうですね。

[ducktoon]

みんな当たり前のようにHTMLを直書きで日記とか書いてFTPでアップロードしてた時代からするとやけにハードル上げてくるなあ

[japonium]

未だ斯んな仕樣も無い事に囚われて居るブクマ之多さに弩ん引き。

[bml]

そんなにWEBサイト作りたいんか。

[soreso]

イラストからWebページを生成するきゃりーさんのノーコードツール楽しみ。 https://twitter.com/retoruto_carry/status/1571738138208514048

[aox]

ホームページビルダーを使えば良いのでは

[misarine3]

AIでできそうに思うじゃろ？簡単だと思うからね．コーディングできない人ほどそう言うし、そこの過程を軽視するんだよね。

[tomono-blog]

コンポーネント決めたとしても、すぐにデザイナーが飽き出すんだよ

[konnie]

概念がわかるとコーディングは面白そう

[hatest]

デザインするツール（AdobeXDなど）でhtml・CSSに変換とかしてくれないの？といつも思う

[kondoly]

ワードプレス感ある。外部読み込みのタイミングとかばらけてくるから繊細さがあるといいね。

[Yuny]

サイトを構築するという大仕事は大きな枠の組み合わせとして考えるとすれば、ブロックコーディングの考え方自体がキャリアデザインとかに活かせそう。

[hirakawahanzo]

やる