呟く茸の日記帳HOMEBLOGABOUTCONTACT呟く茸の日記帳ホームブログプログラミングWebページのよくわかんないアレの呼び方Webページのよくわかんないアレの呼び方2016-09-03プログラミングHiratakeWebページ作ってるときに「こういう感じのレイアウトにしたいけど、どうやればいいかわかんない!呼び方わかんないから調べることもできない!」っていうことが、Webページ作成始めたばっかりの初心者の頃よくありました。使いそうなのをまとめてみようかな、と。調べ方が分かりそうなものは外したつもりです。間違ってたら教えてください。サイトの全部のページに設置するメニューみたいなやつだいたいどのサイトも、上とか横にサイト内を移動するためのメニューが付いてますよね。これは「グローバルナビゲーション」と呼ばれています。このサイトにも上に付いてます。使われるものなので、使いやすいようにデザインしたいですね。記事の横にあるカテゴリ一覧とかプロフィールとかあるやつパソコンでブログなんかを見ると、よく記事の横にカテゴリ一覧とか書いた人のプロフィールとか、月別アーカイブとか載ってる部分ありますよね。あれは「サイドメニュー」とか「サイドバー」とか呼ばれています。サイドメニューで検索すると飯テロにあうのでサイドバーで調べたほうがいいかも。なんか横にならべるやつこのサイトみたいに、記事の部分と横のメニューの部分、みたいに2つに分かれてるようなものがあります。これは「段組みレイアウト」と呼ばれています。2つに分けるなら「2段組み」ですね。調べればわかると思いますが簡単にCSSでの実装方法を紹介しておくと、「floatを使う方法」と「Flexboxを使う方法」があります。inline-block」とかで並べたりも出来そうだけど、ここで使うのはちょっと違う感じがするなあ。今のところは「floatを使う方法」が主流かと思われますが、今後はFlexboxに対応したブラウザが増えて「Flexboxを使う方法」も多く使われてくると思います。Useで調べたところ、もう既に96%のブラウザが対応しているらしいです。Flexbox知った時はまだ80%くらいだった気がするんだけど、もうこんなに使えるようになってるのね。記事名」みたいなやつがありますよね。これは「パンくずリスト」と呼ばれるものです。なんか迷子にならないようにパンくずちぎって置いていくお話があったようななかったような...ページ数がそれなりにあるようなサイトを作るのであれば、設置したほうがいいと思います。一応リストなので、HTMLを書くときもリストで書いたほうがいいと思います。出来れば<ul>タグではなく、順序に意味があるよって教えてくれる<ol>タグを使いましょう。パソコンでもスマホでも幅が違っても見れるやつブラウザの幅を変えたらグイーンって動いてメニューが折りたたみ式になったり、2段組みレイアウトになってたのが下に移動したり、わざわざスマホ用のページ用意しなくても1つのHTMLとCSSで全部対応できるようなやつ、最近増えてますよね。これは「レスポンシブデザイン」と呼ばれています。企業のWebサイトなんかはブラウザの幅を縮めると横向きのスクロールバーが出てくるものが多い感じがありますが、徐々にレスポンシブなサイトが増えてくると思います。最近作られたようなブログだったり、リニューアルしたばっかりのサイトなんかは大体レスポンシブになってる感じがします。サイト初めて作るのにいきなりこれに挑戦しようとすると結構大変なので、慣れてからのほうがいいと思います。思いついたの並べてみました。HTMLとCSSの勉強中に「ここがわからない!」っていうのメモしておけばよかったなあ、もうそこそこ勉強しちゃったし初心者には戻れないからどういうの書けばいいのか出てこなかった...っ!w誰か書いてほしいのあったら教えてください、分かる範囲で追記したいと思います。ツイッターとかで会話しながらなら検索の仕方分かんなくてもなんとなく伝えられるでしょ(テキトー)Webページを作ろうと挑戦している誰かの役に立てばいいなあ。はてブHiratakeCSSとプリキュアがすき。