INFOBARをHTML&CSSでつくってみた

INFOBAR15周年モデルの新型INFOBARが発売されるということで、INFOBARをHTML&CSSでつくってみました。

https://infobar.netlify.com/

デザインはケータイの形態学の表紙に描かれていたイラストをもとにしてつくっています。
Netlifyはあいかわらず便利ですね。zipファイルでサクっとアップすることができるんですもん。

ただHTMLで描かれているというだけなのですが、今後ボディカラーを追加するか、スマホ版もつくってみる、はたまたアニメーションを勉強も兼ねてやってみるとか検討しているところです。
でも他にもやりたいことがあったりするので、気が向いたらになってしまうかもしれませんが……

一応、INFOBAR xvは予約する予定でいます。まだ価格も分からない、実物すら見ていない状態で行うのはちょっと気が引けますが、キャンセルもできるようなのでとりあえずやっておこうかなぁと思っています。

IEのflexboxバグに毎回引っかかる(上下中央寄せ)

最近はもっぱらレイアウトを作成するときはflexboxを利用しているのですが、やるたびにIEのflexboxバグに毎回引っかかって悩まされていたので、もう忘れないようにしようと、ここに残しておくことにしました。

IEだと上下中央寄せがうまくいかない

flexboxだと上下中央寄せも簡単なのでよくやっているのですが、はじめにつくっているときはChromeでやっているので、表示の確認するときにIEを開いてみると「位置がずれてるやん!?」ってことが何度も起きて、そのたびに毎回調べるハメに…

ここは毎回見ている気がします。
flexboxのバグに立ち向かう(flexboxバグまとめ) – Qiita

HTML
<div class="gaiya">
  <div class="box-inner">
    <h1>ICHIRO</h1>
  </div>
<div>
CSS
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  height: 400px;
}

.box-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.box-inner h1 {
  margin: 0;
}

Chromeでの表示

Chromeだとちゃんと上下中央寄せで表示されていますが…

IE11での表示

IEだとなぜか中央ではなく、右に寄せられてしまっています。

かんたんな解決策

IEだと表示がずれるということが分かりました。
では、どうすればIEでもきちんと表示されるようになるかというと…

うまくいかなかった理由はbox-innerにmarginを使っていたからだと思われるので、かんたんに解決できる策としては、box-innerにdiv要素を1枚かぶせてあげるとうまくいきました。

HTML
<div class="box">
<div class="container">
  <div class="box-inner">
    <h1>ICHIRO</h1>
  </div>
</div>
<div>

このコードに書き換え、IEで確認してみると、うまく上下中央寄せさせることができました。

IEでも上下中央寄せされた

flexboxは便利だけれども

flexboxは使えば便利ですけど、今回の例のように表示が思ったとおりにならないことが多いのが困りモノ。
IEだけとは限りませんが、URLなどのアルファベットの文字列がきたときに枠からはみだしちゃったり、min-heightの指定でうまくいかないことがあったりしたので、よく確認して使わないとなぁと思いました。

自分だけのマイCSSフレームワークをつくる(パンくずリスト・ページネーション編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、パンくずリストとページネーション部分のパーツをつくりたいと思います。

どちらも私の中で、いざやろうとすると面倒くさいベスト3に入るモノですが、ここであらかじめつくっておくことでこれからは開放されて楽チンですね。

まずはパンくずリストから作成します。

パンくずリストの作成

パンくずリストのHTML

HTML
<div class="bread">
  <ol>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">ブログ</a></li>
    <li><a>記事</a></li>
  </ol>
</div>

パンくずリストのCSS

style.css
.bread {
  padding: 20px;
}

.bread ol {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  list-style: none;
}

.bread li a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
}

.bread li a[href]:hover {
  text-decoration: underline;
}

.bread li a:not([href]) {
  color: #888;
}

.bread ol {
  display: flex;
}

.bread li {
  display: flex;
}

.bread li+li::before {
  content: '\003e';
  padding: 10px 0;
  color: #888;
}

a[href]だとかは、あまり使う機会がないのでどう書くんだったか?とか忘れちゃうんですよねぇ。

次はページネーションを作成します。

ページネーションの作成

ページネーションのHTML

HTML
<nav class="pagination>
  <ul>
    <li><span>1</span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</nav>

ページネーションのCSS

style.css

.pagination {
  text-align: center;
}

.pagination ul {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination li a,
.pagination li > span {
  display: block;
  margin: 0 5px;
  padding: 5px 10px;
  color: #bbb;
  font-size: 1.4rem;
  border-bottom: solid 1px #ddd;
}

.pagination li > span {
  color: #666;
  border-color: #aaa;
}

.pagination li a:hover {
  color: #666;
  border-color: #aaa;
}

flexboxを使えば、簡単に横並びして中央寄せできるぜ!チクショーッ!!
今回は、ボーダーを下部にのみ装飾していますが、好みに合わせてアレンジするのもいいですね。

自分だけのマイCSSフレームワークをつくる(フォーム編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、フォーム部分をつくりたいと思います。
あまりフォーム部分を作成する機会が少ないので、未だにフォームのHTMLやCSSの記述に関しては疎いんですよね…
ですので、最初からこのように設定しておくと、作る際にコピペするだけでOKになるので、今後は楽になるかも?

基本となるフォームのHTML

HTML
<form action="#" method="post">
<p>
<label for="name">お名前 <span class="required">*</span></label>
<input type="text" name="your-name" id="name">
</p>

<p>
<label for="email">メールアドレス <span class="required">*</span></label>
<input type="email" name="your-email" id="email">
</p>

<p>
<label for="title">題名</label>
<input type="text" name="your-subject" id="title">
</p>

<p>
<label for="message">メッセージ本文</label>
<textarea name="your-message" id="message"></textarea>
</p>

<p>
<input type="submit" value="送信" class="button">
</p>
</form>

基本となるフォームのCSS

style.css
form {
  padding: 20px;
}

form p {
  margin: 0 0 20px 0;
}

label {
  display: block;
  margin: 0 0 5px 0;
  font-size: 1.4rem;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 5px 10px;
  border: solid 1px #aaa;
  border-radius: 0;
  background-image: none;
  font-family: inherit;
  font-size: 1.4rem;
}

textarea {
  height: 120px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: solid 1px #ddd;
  box-shadow: 0 0 1px #aaa inset;
  outline: none;
}

.required {
  color: #f00;
}

シンプルでベーシックなスタイルになっているので、さらに装飾を加えていくときの土台用としても活用できるかもしれません。
もっとおしゃれにもしたいんですけど、まだまだフォーム部分のCSSの設定は慣れていないもので…

自分だけのマイCSSフレームワークをつくる(ラベル編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ラベルとバッジのパーツをつくります。

まずはラベルをつくります。

ラベルパーツの作成

ラベルパーツは、記事のタグの装飾に使うときなどに用いる予定です。

ラベルパーツのHTMLの設定

HTML
<a href="#" class="label">ラベル</a>

ラベルパーツのCSSの設定の設定

style.css
.label {
  display: inline-block;
  padding: 2.5px 15px;
  border-radius: 3px;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  text-decoration: none;
}

.label:hover,
.label:focus {
  outline: none;
  opacity: 0.8;
}

次にバッジの部分を作成します。

バッジパーツの作成

バッジは、コメントやお知らせの件数などを表示するときに使えそうです。

バッジパーツのHTMLの設定

HTML
<span class="badge">3</span>

バッジパーツのCSSの設定

style.css
.badge {
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  width: 2em;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
}

ラベルとバッジを組み合わせることもできます。

ラベルとバッジを組み合わせたパーツ

ラベルとバッジを組み合わせたパーツのHTMLの設定

HTML
<a href="#" class="label">ラベル<span class="badge">3</span></a>

ラベルとバッジを組み合わせたパーツのCSSの設定

style.css
.label {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 3px;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  line-height: 2rem;
  text-decoration: none;
}

.label .badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  font-size: 1.2rem;
  width: 2em;
  line-height: 2rem;
  text-align: center;
}

私の場合、あまり使うことはないかもしれませんが、何かあったときにパッと確認するときのために載せておきます。