Webページのよくわかんないアレの呼び方

Webページ作ってるときに「こういう感じのレイアウトにしたいけど、どうやればいいかわかんない!呼び方わかんないから調べることもできない!」っていうことが、Webページ作成始めたばっかりの初心者の頃よくありました。

なので、よく使いそうなのをまとめてみようかな、と。調べ方が分かりそうなものは外したつもりです。間違ってたら教えてください。

サイトの全部のページに設置するメニューみたいなやつ

だいたいどのサイトも、上とか横にサイト内を移動するためのメニューが付いてますよね。これは「グローバルナビゲーション」と呼ばれています。このサイトにも上に付いてます。

よく使われるものなので、使いやすいようにデザインしたいですね。

記事の横にあるカテゴリ一覧とかプロフィールとかあるやつ

パソコンでブログなんかを見ると、よく記事の横にカテゴリ一覧とか書いた人のプロフィールとか、月別アーカイブとか載ってる部分ありますよね。あれは「サイドメニュー」とか「サイドバー」とか呼ばれています。サイドメニューで検索すると飯テロにあうのでサイドバーで調べたほうがいいかも。

なんか横にならべるやつ

このサイトみたいに、記事の部分と横のメニューの部分、みたいに2つに分かれてるようなものがあります。これは「段組みレイアウト」と呼ばれています。2つに分けるなら「2段組み」ですね。

調べればわかると思いますが簡単にCSSでの実装方法を紹介しておくと、「floatを使う方法」と「Flexboxを使う方法」があります。他には「display: inline-block」とかで並べたりも出来そうだけど、ここで使うのはちょっと違う感じがするなあ。

おそらく今のところは「floatを使う方法」が主流かと思われますが、今後はFlexboxに対応したブラウザが増えて「Flexboxを使う方法」も多く使われてくると思います。

Can I Useで調べたところ、もう既に96%のブラウザが対応しているらしいです。初めてFlexbox知った時はまだ80%くらいだった気がするんだけど、もうこんなに使えるようになってるのね。

サイトの上の方にある現在の場所を表示してくれるやつ

このページにも赤色のヘッダーの下に「ホーム > ブログ > 記事名」みたいなやつがありますよね。これは「パンくずリスト」と呼ばれるものです。なんか迷子にならないようにパンくずちぎって置いていくお話があったようななかったような…

ページ数がそれなりにあるようなサイトを作るのであれば、設置したほうがいいと思います。

一応リストなので、HTMLを書くときもリストで書いたほうがいいと思います。出来れば

<

ul>タグではなく、順序に意味があるよって教えてくれる

<

ol>タグを使いましょう。

パソコンでもスマホでも幅が違っても見れるやつ

ブラウザの幅を変えたらグイーンって動いてメニューが折りたたみ式になったり、2段組みレイアウトになってたのが下に移動したり、わざわざスマホ用のページ用意しなくても1つのHTMLとCSSで全部対応できるようなやつ、最近増えてますよね。

これは「レスポンシブデザイン」と呼ばれています。まだまだ企業のWebサイトなんかはブラウザの幅を縮めると横向きのスクロールバーが出てくるものが多い感じがありますが、徐々にレスポンシブなサイトが増えてくると思います。最近作られたようなブログだったり、リニューアルしたばっかりのサイトなんかは大体レスポンシブになってる感じがします。

でもサイト初めて作るのにいきなりこれに挑戦しようとすると結構大変なので、慣れてからのほうがいいと思います。

とりあえず思いついたの並べてみました。HTMLとCSSの勉強中に「ここがわからない!」っていうのメモしておけばよかったなあ、もうそこそこ勉強しちゃったし初心者には戻れないからどういうの書けばいいのか出てこなかった…っ!w

誰か書いてほしいのあったら教えてください、分かる範囲で追記したいと思います。ツイッターとかで会話しながらなら検索の仕方分かんなくてもなんとなく伝えられるでしょ(テキトー)

Webページを作ろうと挑戦している誰かの役に立てばいいなあ。