プログラミング初心者がWEB画面を作らないといけなくなった状況で

CSSとはなんぞやにぶち当たったのが前回の記事”CSSとは？初心者は何を考える”でしたが、

今回は実際にデザイン通りに作っていくタイミングで検索検索した結果、これは便利そうと思った内容をご紹介。

 

 

 

前回の記事では、CSSとCSS3の違いに触れていましたが、

大きな違いはなく、バージョンが上がることでできること増えたよという内容でした。

そのCSS3でできることの一つに、

 

 

 

HTMLの記述順に関係なく自由に表示順を変更できるCSS

 

 

 

という情報を見つけました。

そもそもHTMLも初心者だったので、HTMLの順番で表示するというなんとなくの理解と

hidden使ってscriptで画面表示切替はできるなっていうアイデアしか頭になかった。。。。

 

 

 

 

 

最近はスマホの普及でレスポンシブデザインを知らぬ間に目にしていて

今回のWEB画面の用途はPCのみなので、特にこのレスポンシブデザインを組み込む予定は無いけれど

これできたら、自由自在だなあ。しかも簡単にできそうだなあ。ってなったので

ブックマークに追加して個人メモにしておいた。

 

flexbox(フレキシブルボックス)を追加するだけでできちゃうレスポンシブデザイン。

具体的な書き方はコチラ↓

 

CSS3のflexbox(フレキシブルボックス)の簡単な書き方