はてなのロゴが新しくなったのでHTMLとCSSで作ってみた！

はてなのロゴをHTMLとCSSで作ってみた！

どうも！フジグチです！

はてなのロゴが新しくなりました。わたしが思うはてな（ブログ）のロゴはなのですが、変わったのは、株式会社はてなのロゴマークです。

以前のひし形のマークからシンプルな丸になり、「？」はてなマークが浮かんでいるのがよく分かるようになりました。

株式会社はてなのロゴ

新しいロゴを見て気付いたのですが、以前のロゴも「？」はてなマークをモチーフにしていたんですね。

このロゴについてはてなは以下のように述べています。

ロゴマークは、「ノード」や「二進法」をモチーフに、知的好奇心と当社を象徴する「はてなマーク」が浮かび上がるデザインです。

また、技術の力でWebサービスを開発する「ものづくり」企業として、シンボルマークも身近なものを使って「つくる」ことができるよう設計しました。

「身近なものを使ってつくることができる」という言葉に「知的好奇心」がくすぐられたのでHTMLとCSSでこのロゴを作ってみました。

とは言っても丸を並べただけで簡単にできそうなので、「Hatena」の部分も合わせて作ってみました。

とりあえずロゴは簡単そうなので、属性セレクタや否定疑似クラスなどを使用して、いかに難しそうな感じのCSSで書くかということ。

「Hatena」の部分は１文字につき使っていい要素は空の<span>タグ１つのみとし、あとはCSSで工夫して作ること。という謎のルールを決めて作ってみました。

そうして出来たのがこちら▽

もう一度ホントのロゴ▽

株式会社はてなのロゴ

どれがホントのロゴ？（正解はクリックするとポップアップされます）

株式会社はてなのロゴ

コードは以下のようになっていますが、見たまま編集では空タグは削除されてしまうので使えません。

<div class="logo">
  <div class="logo-container">
    <div class="logo-wrap1">
      <span></span>
      <span></span>
    </div>
    <div class="logo-wrap2">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="logo-wrap3">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="logo-wrap4">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="logo-wrap5">
      <span></span>
    </div>
  </div>
  <div class="title-container">
  <span class="H"></span>
  <span class="a"></span>
  <span class="t"></span>
  <span class="e"></span>
  <span class="n"></span>
  <span class="a"></span>
  </div>
</div>

<style>
.logo {
  display: flex;
  align-items: center;
  padding: 2em 0 2em 2em;
  font-size: 2.7vw;
}
@media (min-width: 360px) {
  .logo {
    font-size: 10px;
    padding: 2em;
  }
}
.logo-container {
  min-width: 7em;
  margin-right: 1.5em;
}
[class^="logo-wrap"] {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-evenly;
  margin-bottom: .25em;
}
[class^="logo-wrap"]:last-child {
  margin-top: .5em;
}
[class^="logo-wrap"] span {
  display: block;
  width: 1em;
  height: 1em;
  background: #eeefef;
  border-radius: 50%;
}
.logo-wrap1 {
  justify-content: center;
}
.logo-wrap1 span {
  margin: 0 .5em;
}
.logo-wrap3 {
  justify-content: space-between;
}
.logo-wrap1 span, .logo-wrap2 span:not(:nth-child(2)), .logo-wrap3 span:nth-child(3), .logo-wrap5 span {
  background: #00a1f0;  
}

.title-container {
  display: flex;
  align-items: flex-end;
}
.H {
  width: .8em;
  height: 4em;
  display: flex;
  background: #0c0c12;
  border-radius: 1px;
  position: relative;
  box-shadow: 2.6em 0 0 #0c0c12;
  margin-right: 2.6em;
}
.H::before {
  content: "";
  display: block;
  width: 3.3em;
  height: .6em;
  background: #0c0c12;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.a {
  border-radius: 50%;
  width: 3em;
  height: 3.2em;
  background: #fff;
  position: relative;
  margin-left: .5em;
  box-shadow: inset .1em 0 0 .6em #0c0c12;
  z-index: 1;
}
.a::before {
  content: "";
  display: block;
  width: .8em;
  height: 3em;
  background: #0c0c12;
  border-radius: 1px;
  position: absolute;
  right: -.2em;
  top: .1em;
  z-index: 2;
}
.t {
  background: #0c0c12;
  width: 1.3em;
  height: 3.7em;
  margin-left: 1.3em;
  border-radius: .1em 0 .1em .8em;
  position: relative;
}
.t::before {
  content: "";
  display: block;
  width: .6em;
  height: 3.1em;
  background: #fff;
  border-radius: 0 0 0 1px;
  position: absolute;
  top: -.1em;
  right: -.1em;
  z-index: 2;
}
.t::after {
  content: "";
  display: block;
  width: 1.8em;
  height: .6em;
  background: #0c0c12;
  border-radius: 1px;
  position: absolute;
  top: .7em;
  right: 0;
  z-index: 3;
}
.e {
  background: #fff;
  width: 3.2em;
  height: 3.2em;
  margin-left: .5em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .7em #0c0c12;
  position: relative;
}
.e::before {
  content: "";
  display: block;
  width: 2.8em;
  height: .6em;
  background: #0c0c12;
  border-radius: .1em .5em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
}
.e::after {
  content: "";
  display: block;
  border-style: solid;
  border-width: .9em 1.8em 0 1.8em;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  right: -2em;
  bottom: .4em;
  z-index: 2;
}
.n {
  background: #0c0c12;
  width: 2.2em;
  height: 3em;
  margin-left: 1.3em;
  border-radius: 1.2em 1.2em .2em 0;
  position: relative;
}
.n::before {
  content: "";
  display: block;
  width: .8em;
  height: 2.9em;
  background: #0c0c12;
  border-radius: 1px;
  position: absolute;
  top: .1em;
  left: -.7em;
  z-index: 2;
}
.n::after {
  content: "";
  display: block;
  width: 1.4em;
  height: 2.3em;
  background: #fff;
  border-radius: 1em 1em 0 0;
  position: absolute;
  bottom: -.1em;
  right: .8em;
  z-index: 1;
}
</style>