ワレコ
ワテの場合、手作業でhtmlを記述しながらWEBサイトの作成を始めて約10ヶ月くらい経った。
ワテはプログラミングに関しては、C, C++, C#, VB.NET など有る程度のプログラミング言語は使う事が出来たのだが、WEBサイト作成で登場する
- JavaScript
- PHP
などの言語は全く知らなかった。名前を聞いた事がある程度だった。
それから必死で勉強して約10ヶ月経ってJavaScriptやPHPをかなり使いこなせるようになったと思うのだが、まだまだ知らない事が多い。
さらにWEBサイトの見映えを制御するCSSに関しては、各種の手法があるので何が正解なのか分からない。
良く分からないまま自己流でヘンテコな手法を編み出しても、良く調べたらもっとスマートで簡単な記述があるなどもある。
この記事は、HTMLの記述で良く行う複数要素を横並びに配置する手法についての備忘録である。
では、本題に入ろう。
WEBサイト作りの何が難しいのか？
WEBサイト作成の経験が無い人がWEBサイト作りを始めるに当たり、まず当惑するのは、htmlファイルの複雑さだろう。
どんなWEBサイトを見てもhtmlファイルの中にhtmlの各種の<タグ>記号や、文章や、JavaScriptプログラムなどが入り混じっているので物凄く複雑に感じる点だと思う。
さらに、単に文字を表示する静的なサイトなら簡単だが、利用者のマウス操作に応じて動的に変化するサイトを作るなら、WEBサーバーとそれを閲覧しているクライアントパソコン上のIEなどのBrowserとの間の通信も考えなくてはならない。
10ヶ月前には全くそんな知識が無かったので、JavaScriptもjQueryも何が何だかサッパリ分からなかった。
この程度のhtmlファイルでもワテにはチンプンカンプンだった
例えば、簡単なhtmlを見ても、ワテには暗号のように難解だった。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Scripts/jquery-2.2.3.js"></script>
</head>
<body>
<style>
div {
display: inline-flexbox;
display: inline-flex;
display: flex;
border: 1px red solid;
}
h3 {
border: 1px #00ff21 solid;
-ms-word-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
}
</style>
<div>
<h3>日曜日</h3>
<h3>月曜日</h3>
<h3>火曜日</h3>
<h3>水曜日</h3>
<h3>木曜日</h3>
<h3>金曜日</h3>
<h3>土曜日</h3>
</div>
<div>
<h3>Sunday</h3>
<h3>Monday</h3>
<h3>Tuesday</h3>
<h3>Wednesday</h3>
<h3>Thursday</h3>
<h3>Friday</h3>
<h3>Saturday</h3>
</div>
<script>
window.onload = function () {
alert('何じゃこりゃ？');
};
(function () {
alert('何じゃこりゃ？２');
})();
$(document).ready(function () {
alert('もう訳分からん');
});
$(window).load(function () {
alert('もう訳分からん２');
});
</script>
</body>
</html>
コード 簡単なhtmlの例
上のコードをひとつずつ見て行こう。
例えば、こんな構文を見た時に C、C++などの経験しかない人だと、相当混乱するだろう。
window.onload = function () {
...
}
functionなので何かの関数だろう。
でも関数名が無いぞ？
その関数をイコールの記号を使って左辺のwindow.onloadとかいうのに代入している？？
分からん…
あるいは、こんなの。
(function () {
alert('何じゃこりゃ？２');
})();
丸カッコが多くてなんのこっちゃ？？？
プログラミング言語は理屈では無くて単なる知識だ
今では慣れたのでJavaScript文法で、これくらいでは驚かない。
前者のwindow.onloadと言うのはhtmlが表示された時に実行する関数を定義しているのだ。
より正確に言うならhtmlがブラウザに読み込まれてDOMが構築された時点で実行される。
DOMとは、Document Object Model (DOM)というやつで、htmlは<div>とか<p>とかそういう記号を沢山使って階層構造の文章を定義するが、それらがブラウザに全部読み込まれてブラウザが表示準備が出来た状態だ（ワテの理解なので、厳密な定義とは異なるかも）。
$(document).ready{...} // DOM構築後
$(window).load{...} // DOM構築後、かつ、imageなどの読み込みも完了した時点
この２つは、そのjQuery版と言う事になる。
後者の丸カッコの多い以下の形式も初めて見ると訳ワカメだ。
(function () {...})();
これは即時関数と言う奴で、無名関数を定義すると同時に実行したい場合に、こんなふうに書けば良いのだ。
まあでも、こんな記述をしなくても {…} の中だけを取り出して実行しても良いが。
兎に角、新しい言語を覚える為には、その言語特有の記述方法があるので、覚えてしまえば何の問題も無い。
あとは、プログラミングの能力の問題だ。変数を定義して、if文で判断してforループで処理する。そういうのはどの言語でも同じだ。
現在のワテはピュアJavaScript派
ウェブプログラミングを学習し始めた当時は、htmlファイルの中で実行するJavaScriptコードの記述方法は以下のようにその時の気分で変えていた。
//JavaScript方式
window.onload = function () { ... }
//jQuery方式
$(window).load{...} // DOM構築後、かつ、imageなどの読み込みも完了した時点
$(document).ready{...} // DOM構築後
$(function(){ ... }); // 上と同じ
でも、ワテの場合は現在は以下の記述方法に統一している。
//JavaScript方式 ワテのお勧め
document.addEventListener("DOMContentLoaded", function(){
...
});
その理由は、ワテはjQueryとは決別してピュアJavaScript派に転向したのだ。
display:flexとdisplay:inline-flexの違い
さて、WEBサイト作りを始めた人なら、誰でも経験すると思うが、簡単なサイトだと
1段組
本文のみの簡単なページだ。
それを、段組みして下図のように右側にメニュー用の領域を追加したいなどの要望が出て来る。
2段組
次の段落・・・
divを左右に二段組にするhtmlコード例
この時には、ワテが最初に覚えたのは、以下のようなhtmlだ。
<p>1段組</p> <div style="width:200px;height:200px;border:5px solid #00ff90"> </div> <p>2段組</p> <div style="width:200px;height:200px;border:5px solid #00ff90;float:left;"> </div> <div style="width:200px;height:200px;border:5px solid #ff6a00;float:left;"> </div> <div class="clearfix"></div> <p>次の段落</p>
要点は、float:leftというスタイルを用いると、２つのdivが同じ行に並ぶように出来る。
上記の例では２つのdivだが、３つでも４つでも良い。
この時、最後のdivに関してはfloat:none; でも良いのだが、何も考えずに上記の例のよに全部のdivにfloat:leftを付けてしまう事もよくある。
その場合には、その次に出て来る要素（今の例では<p>要素）もdivと同じ列に並んでしまう。
それを解除するのが、
<div class="clearfix"></div>
と言う奴だ。あるいは、
<div style="clear:both;" ></div>
でも良い。
と言いつつ、実はワテは良く分かっていない。兎に角、このどちらかの行を追加しておけば、float:leftやfloat:rightなどのスタイル設定が解除出来るのだ。
clearfixとは何か？
しかし、良く分からないまま使うのは前々から気になっていたのだが、ワテが良く利用するStackOverflowの記事でこんなのを見つけた。
html – What is clearfix? – Stack Overflow
ワテが翻訳してみた。
A clearfix is performed as follows:
clearfixはこんな風に実行される
.clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; }Or, if you don’t require IE<8 support, the following is fine too:
あるいは、IE9以上のサポートで良いなら以下でも良い
.clearfix:after { content: ""; display: table; clear: both; }Normally you would need to do something as follows:
通常は以下のようにclear:bothを使うと良い
<div> <div style="float: left;">Sidebar</div> <div style="clear: both;"></div> <!-- Clear the float --> </div>With clearfix, you only need the following:
clearfixを使うなら以下のようにするだけで良い
<div class="clearfix"> <div style="float: left;" class="clearfix">Sidebar</div> <!-- No Clearing div! --> </div>
引用元 https://stackoverflow.com/questions/8554043/what-is-a-clearfix
なるほど、そう言う事か。
IE9など古いブラウザー対応が不要ならdisplay:inline-block や display:flexbox がお勧め
さて、同じく上のStackOverflowの記事の中に以下の記述があった。
If you don’t need to support IE9 or lower, you can use flexbox freely, and don’t need to use floated layouts.
It’s worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.display: inline-block – Better
Flexbox – Best (but limited browser support)
引用元 https://stackoverflow.com/questions/8554043/what-is-a-clearfix
つまりIE9などの古いブラウザでの表示を気にせずIE10以上をのみサポートするなら、float:leftなどの方式よりも
display:inline-block; display:flexbox;
のほうがお勧めと言う事だ。
それらを使うと、clearfixも使う必要は無いのだ。
何やて！知らなんだ。
これからはfloatを使うのは止めてflexboxを使う事にする。
ところが、flexboxもややこしいのだ。
display:inline-block; と display:flexbox; の違い
ワテの場合、この辺りを良く理解していない。
だいたい、
display:なんちゃら
と言うオプションは以下のように沢山ある。
display: none; display: inline; display: block; display: inline-block; display: contents; display: list-item; display: inline-list-item; display: table; display: inline-table; display: table-cell; display: table-column; display: table-column-group; display: table-footer-group; display: table-header-group; display: table-row; display: table-row-group; display: table-caption; display: flex; display: inline-flex; display: grid; display: inline-grid; display: ruby; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; display: run-in; /* Global values */ display: inherit; display: initial; display: unset;
こんなのを全部覚えられない。
ここでは、StackOverflow推薦の
display:inline-block; display:flexbox;
の違いを覚えておこうと思ったのだが、検索したら、同じくスタックオーバーフローに説明があった。
ただし、inline-flexとflexの違いだ。ややこしい。
css – Difference between display:inline-flex and display:flex – StackOverflow
display: inline-flex does not make flex items display inline.
It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex.
なるほど、そういう事か。
つまり、flexもinline-flexも共に中身の要素を横並びに出来る。
inline-flexのほうは、自身（divなどのコンテナ要素）がinlineとして表示される。つまり１行に並んで表示すると言う事か。
画面幅にかかわらず２行になる(flex)
日曜日
月曜日
火曜日
水曜日
木曜日
金曜日
土曜日
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
画面幅が十分広いと横並びになる(inline-flex)
日曜日
月曜日
火曜日
水曜日
木曜日
金曜日
土曜日
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
なるほど。
まとめ
ワレコ
WEBプログラミングは奥が深い。
かつ、WEB業界ではどんどん新しい仕様や手法が開発されるので日々勉強だ！
さて、
display: inline-flex; display: flex;
の違いは分かった。
あとは、
display: inline-block; display: flexbox;
この辺りの使い方をマスターすれば完璧だ。
それは別の記事で紹介したい。
本を読んでCSSを勉強する
２日間、必死で読んでも身に付かなかったら責任とってもらえるのか。
分からん。
コメント