この記事の目的

スキルアップのため。後述します。
SemanticUIに関する日本語記事が少ないため。私の検索力が低いだけならごめんなさい。

なんでやろうと思ったの？

SemanticUIの練習です！！！
スキルアップのためです！！！

ある現場で初めてSemanticUI(cssフレームワーク)に触れ、「こんなに便利なものがあるのか！」とワクワクしました。

それと同時に出てきた疑問があります。
どうしたら「SemanticUI使えます！」と言えるのだろうか？

ということで日常的に利用しているQiitaのトップページをSemanticUIで作ってみようと思います！
(付随してwebデザインの勉強にもなるのかな？くらいの軽い気持ちでやっていきます)

練習が目的なので、細かいところまで作り込みません。完璧は求めません。
やりきる事、完成させることを第一にやってみます！
※レスポンシブ対応は微妙です。
※公式はGitHubを再作成しています。

優れた芸術家は真似る。偉大な芸術家は盗む。　パブロ・ピカソ

環境

Win10 Home 64bit
Google Chrome 77.0.3865.90(Official Build)(64 ビット)
Atom

進め方

準備

CDNでSemanticUIを使用します。
内部でJQueryも使用しているため、JQueryも忘れないようにしましょう。

ベースのHTMLはこちら

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="vieport" content="width=device-width"/>
  <title>Qiita</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>
<body>
  <!-- ここに追加していきます -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>

ヘッダーとジャンボトロン

構成

公式のレイアウトにあるHomepageを参考にします。
開発者ツールを用いてこのページのHTML構成を覗いてみると、

segment…背景色
- container…表示幅
  - menu…ヘッダー
- text container…表示幅
  - header…テキスト

となっています。

Qiitaはジャンボトロンの内部が左右に分かれているので、
そこはGridを使って分ける方針とします。
幅はヘッダーもジャンボトロンも同じようですので以下のような構成になりそうですね。

segment…背景色
- container…表示幅
  - menu…ヘッダー
  - grid…ジャンボトロン
    - column…テキスト
    - column…フォーム

ヘッダー

公式のMenuを参考にします。
アイテムとしてドロップダウン、インプット、右寄せされたボタンがあるので、公式からいい感じに引用します。

Menu
Icon

ヘッダーを見様見真似で実装してみました。

HTMLはこちら

<body>
  <div class="ui green inverted segment">
    <div class="ui container">
      <div class="ui green inverted borderless tiny menu">
        <div class="header item">Qiita</div>
        <div class="ui dropdown item">
          <i class="caret square down icon"></i>
          <div class="menu">
            <a class="item">
              <i class="check icon"></i>
              Qiita
            </a>
            <div class="divider"></div>
            <p class="disabled item">ログイン中のチームがありません</p>
            <a class="item">
              <i class="sign-in icon"></i>
              Qiita:Teamにログイン...
            </a>
          </div>
        </div>
        <div class="ui dropdown item">
          コミュニティ
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">
              <i class="users icon"></i>
              ユーザー一覧
            </a>
            <a class="item">
              <i class="building outline icon"></i>
              Organization一覧
            </a>
            <a class="item">
              <i class="calendar alternate outline icon"></i>
              アドベントカレンダー
            </a>
            <div class="divider"></div>
            <a class="item">
              <i class="search icon"></i>
              Qiita Jobs
            </a>
            <a class="item">
              <i class="comments outline icon"></i>
              Qiitadon (β)
            </a>
            <a class="item">
              <i class="keyboard icon"></i>
              Qiita:Zine
            </a>
            <div class="divider"></div>
            <a class="item">
              <i class="book icon"></i>
              コミュニティガイドライン
            </a>
            <a class="item">
              <i class="book icon"></i>
              良い記事を書くために
            </a>
          </div>
        </div>
        <div class="item">
          <div class="ui left icon input">
            <input type="text" placeholder="キーワードを入力">
            <i class="search icon"></i>
          </div>
        </div>
        <div class="right item">
          <div class="item">
            <button class="ui inverted button">ユーザ登録</button>
          </div>
          <div class="item">
            <a href="#">ログイン</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>

こんな感じになると思います。まぁまぁいい感じですね。

ジャンボトロン

Qiitaのトップページを開発者ツールで見てみると、
ジャンボトロン含めてheight:500pxになっているようです。
こればっかりはCSSを書きましょう。

左側のテキスト

Headerを使用しましょう。
ただし提供されている機能だけでは文字サイズが足りなかったり、
テキストを位置が再現できないので、そこはCSSを書いていきます。

HTMLはこちら


<head>
  <style>
    .ui.jumbotron.inverted.header {
      margin-top: 2em;
      font-size: 3.5em;
    }
    .jumbotron.text {
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <div class="ui green inverted segment">
    <div class="ui container">
      <div class="ui grid">
        <div class="nine wide column">
          <h1 class="ui jumbotron inverted header">Hello hackers !</h1>
          <p class="jumbotron text">
            Qiitaは、エンジニアリングに関する知識を記録・共有するためのサービスです。コードを書いていて気づいたことや、自分がハマったあの仕様について、他のエンジニアと知見を共有しましょう ;)
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

右側のログインフォーム

Formにinlineはあるのですが、いわゆるhorizontal formが作れない様子…。
致し方ないので、Gridを用いて表現してみます。
以下のようなイメージです。

reCAPTCHA

調べてみたところGoogleへWEBサイトの登録や、APIキーの取得が必要なようです。
今回はあくまでローカル環境で作っていますのでWEBサイトを登録できません。
画像で転用します。

ここまでの実装内容を載せます。

HTMLはこちら

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="vieport" content="width=device-width"/>
  <title>Qiita</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
  <style>
    .ui.green.inverted.segment {
      height: 500px;
    }
    .ui.jumbotron.inverted.header {
      margin-top: 2em;
      font-size: 3.5em;
    }
    .jumbotron.text {
      font-size: 1.2em;
    }
    .row {
      padding: 5px!important;
    }
    .label.column {
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <div class="ui green inverted segment">
    <div class="ui container">
      <div class="ui green inverted borderless tiny menu">
        <div class="header item">Qiita</div>
        <div class="ui dropdown item">
          <i class="caret square down icon"></i>
          <div class="menu">
            <a class="item">
              <i class="check icon"></i>
              Qiita
            </a>
            <div class="divider"></div>
            <p class="disabled item">ログイン中のチームがありません</p>
            <a class="item">
              <i class="sign-in icon"></i>
              Qiita:Teamにログイン...
            </a>
          </div>
        </div>
        <div class="ui dropdown item">
          コミュニティ
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">
              <i class="users icon"></i>
              ユーザー一覧
            </a>
            <a class="item">
              <i class="building outline icon"></i>
              Organization一覧
            </a>
            <a class="item">
              <i class="calendar alternate outline icon"></i>
              アドベントカレンダー
            </a>
            <div class="divider"></div>
            <a class="item">
              <i class="search icon"></i>
              Qiita Jobs
            </a>
            <a class="item">
              <i class="comments outline icon"></i>
              Qiitadon (β)
            </a>
            <a class="item">
              <i class="keyboard icon"></i>
              Qiita:Zine
            </a>
            <div class="divider"></div>
            <a class="item">
              <i class="book icon"></i>
              コミュニティガイドライン
            </a>
            <a class="item">
              <i class="book icon"></i>
              良い記事を書くために
            </a>
          </div>
        </div>
        <div class="item">
          <div class="ui left icon input">
            <input type="text" placeholder="キーワードを入力">
            <i class="search icon"></i>
          </div>
        </div>
        <div class="right item">
          <div class="item">
            <button class="ui inverted button">ユーザ登録</button>
          </div>
          <div class="item">
            <a href="#">ログイン</a>
          </div>
        </div>
      </div>
      <div class="ui grid">
        <div class="nine wide column">
          <h1 class="ui jumbotron inverted header">Hello hackers !</h1>
          <p class="jumbotron text">
            Qiitaは、エンジニアリングに関する知識を記録・共有するためのサービスです。コードを書いていて気づいたことや、自分がハマったあの仕様について、他のエンジニアと知見を共有しましょう ;)
          </p>
        </div>
        <div class="seven wide column">
          <form class="ui grid form">
            <div class="row">
              <div class="four wide column"></div>
              <div class="twelve wide column">
                <button class="ui icon large button" type="button">
                  <i class="github icon"></i>
                  GitHub
                </button>
                <button class="ui icon large button" type="button">
                  <i class="twitter icon"></i>
                  Twitter
                </button>
                <button class="ui icon large button" type="button">
                  <i class="google icon"></i>
                  Google
                </button>
              </div>
            </div>
            <div class="row">
              <div class="four wide column"></div>
              <div class="twelve wide column">
                <div class="ui horizontal inverted divider">OR</div>
              </div>
            </div>
            <div class="row">
              <div class="four wide right aligned label column">
                ユーザ名
              </div>
              <div class="twelve wide column">
                <input class="ui input" type="text" placeholder="qiitan"/>
              </div>
            </div>
            <div class="row">
              <div class="four wide right aligned label column">
                メールアドレス
              </div>
              <div class="twelve wide column">
                <input class="ui input" type="text" placeholder="qiitan"/>
              </div>
            </div>
            <div class="row">
              <div class="four wide right aligned label column">
                パスワード
              </div>
              <div class="twelve wide column">
                <input class="ui input" type="password" placeholder="qiitan"/>
                <p>8文字以上、英・数・記号が使えます</p>
              </div>
            </div>
            <div class="row">
              <div class="four wide column"></div>
              <div class="twelve wide column">
                <img src="reCAPTCHA.png"></img>
              </div>
            </div>
            <div class="row">
              <div class="four wide column"></div>
              <div class="five wide column">
                <button class="ui inverted fluid button" type="button">登録する</button>
              </div>
              <div class="seven wide column">
                登録には<a href="#">利用規約</a>に同意する必要があります。
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>
</html>

上記ソースで下記のような画面になるはずです。

ヘッダーとジャンボトロンは完成です！！
（細かい突っ込みお待ちしてます！）

下の3カラム構成

こちらもGridを使用します。
イメージは以下の通りです。

左側のメニューバー

公式のMenuを参考に作ってみます。

Menu
- Tabular

HTMLはこちら

<div class="ui container grid">
    <div class="three wide column">
      <div class="ui vertical green fluid tabular menu">
        <a class="active item">
          トレンド
          <i class="chart line icon"></i>
        </a>
        <a class="item">
          マイルストーン
          <i class="flag checkered icon"></i>
        </a>
      </div>
    </div>
    <div class="ten wide column">
      <div class="ui segment">
      </div>
    </div>
    <div class="three wide column">
    </div>
  </div>

完コピとまではいきませんが、雰囲気は出せているかなと思います！

中央の投稿一覧

様々なもので再現できそうではありますが、
今回はListで作ってみます！
ちょっと背景色を変えたり、微修正も加えました。

HTMLはこちら

　　<div class="nine wide column">
      <div class="ui segment">
        <h4 class="ui header">
          <i class="chart line icon"></i>
          トレンド
        </h4>
        <div class="ui green small secondary pointing menu">
          <a class="active item">1日</a>
          <a class="item">週間</a>
          <a class="item">月間</a>
        </div>
        <div class="ui large relaxed divided list">
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">なるべくわかりやすいJavaScript</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>1
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">新人開発エンジニアに知っておいてほしいLinux知識</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>6
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">新人エンジニアへ伝えたいこと</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>4
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">PlantUMLでシーケンス図を書いてみよう</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>0
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">05. SpringBootのソースをスタブ化してみた</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>1
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">04. SpringBoot + Thymeleafでフロントエンドを作ってみた</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>3
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

するとこんな感じです。

文字サイズだったり、スペースは異なりますが、
概ね本物と変わりないかと思います。

右側の広告等

ここは難しくないですね！
サイズだったり色合いだけ似せたSegmentを使ってあげれば問題ないかなと思います！
※箱を並べていくだけになるので割愛します；；

HTMLはこちら

    <div class="four wide column">
      <div class="ui advertisement segment">
        広告
      </div>
    </div>

右に一つ箱ができただけですが、
実際は広告を入れれば似たような見栄えになるかなと思います！

完成形

ほんの少しレスポンシブ対応も入れています。

HTMLはこちら

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="vieport" content="width=device-width"/>
  <title>Qiita</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
  <style>
    body {
      background-color: #f6f6f6;
    }
    .ui.green.inverted.segment {
      height: 500px;
    }
    .ui.jumbotron.inverted.header {
      margin-top: 2em;
      font-size: 3.5em;
    }
    .jumbotron.text {
      font-size: 1.2em;
    }
    .row {
      padding: 5px!important;
    }
    .label.column {
      font-size: 0.9em;
    }
    .ui.advertisement.segment {
      height: 228px;
    }
  </style>
</head>
<body>
  <div class="ui green inverted segment">
    <div class="ui container">
      <div class="ui green inverted borderless tiny menu">
        <div class="header item">Qiita</div>
        <div class="ui dropdown item">
          <i class="caret square down icon"></i>
          <div class="menu">
            <a class="item">
              <i class="check icon"></i>
              Qiita
            </a>
            <div class="divider"></div>
            <p class="disabled item">ログイン中のチームがありません</p>
            <a class="item">
              <i class="sign-in icon"></i>
              Qiita:Teamにログイン...
            </a>
          </div>
        </div>
        <div class="ui dropdown item">
          コミュニティ
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">
              <i class="users icon"></i>
              ユーザー一覧
            </a>
            <a class="item">
              <i class="building outline icon"></i>
              Organization一覧
            </a>
            <a class="item">
              <i class="calendar alternate outline icon"></i>
              アドベントカレンダー
            </a>
            <div class="divider"></div>
            <a class="item">
              <i class="search icon"></i>
              Qiita Jobs
            </a>
            <a class="item">
              <i class="comments outline icon"></i>
              Qiitadon (β)
            </a>
            <a class="item">
              <i class="keyboard icon"></i>
              Qiita:Zine
            </a>
            <div class="divider"></div>
            <a class="item">
              <i class="book icon"></i>
              コミュニティガイドライン
            </a>
            <a class="item">
              <i class="book icon"></i>
              良い記事を書くために
            </a>
          </div>
        </div>
        <div class="item">
          <div class="ui left icon input">
            <input type="text" placeholder="キーワードを入力">
            <i class="search icon"></i>
          </div>
        </div>
        <div class="right item">
          <div class="item">
            <button class="ui inverted button">ユーザ登録</button>
          </div>
          <div class="item">
            <a href="#">ログイン</a>
          </div>
        </div>
      </div>
      <div class="ui stackable grid">
        <div class="nine wide column">
          <h1 class="ui jumbotron inverted header">Hello hackers !</h1>
          <p class="jumbotron text">
            Qiitaは、エンジニアリングに関する知識を記録・共有するためのサービスです。コードを書いていて気づいたことや、自分がハマったあの仕様について、他のエンジニアと知見を共有しましょう ;)
          </p>
        </div>
        <div class="computer only seven wide column">
          <form class="ui grid form">
            <div class="row">
              <div class="four wide column"></div>
              <div class="twelve wide column">
                <button class="ui icon large button" type="button">
                  <i class="github icon"></i>
                  GitHub
                </button>
                <button class="ui icon large button" type="button">
                  <i class="twitter icon"></i>
                  Twitter
                </button>
                <button class="ui icon large button" type="button">
                  <i class="google icon"></i>
                  Google
                </button>
              </div>
            </div>
            <div class="row">
              <div class="four wide column"></div>
              <div class="twelve wide column">
                <div class="ui horizontal inverted divider">OR</div>
              </div>
            </div>
            <div class="row">
              <div class="four wide right aligned label column">
                ユーザ名
              </div>
              <div class="twelve wide column">
                <input class="ui input" type="text" placeholder="qiitan"/>
              </div>
            </div>
            <div class="row">
              <div class="four wide right aligned label column">
                メールアドレス
              </div>
              <div class="twelve wide column">
                <input class="ui input" type="text" placeholder="qiitan"/>
              </div>
            </div>
            <div class="row">
              <div class="four wide right aligned label column">
                パスワード
              </div>
              <div class="twelve wide column">
                <input class="ui input" type="password" placeholder="qiitan"/>
                <p>8文字以上、英・数・記号が使えます</p>
              </div>
            </div>
            <div class="row">
              <div class="four wide column"></div>
              <div class="twelve wide column">
                <img src="reCAPTCHA.png"></img>
              </div>
            </div>
            <div class="row">
              <div class="four wide column"></div>
              <div class="five wide column">
                <button class="ui inverted fluid button" type="button">登録する</button>
              </div>
              <div class="seven wide column">
                登録には<a href="#">利用規約</a>に同意する必要があります。
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="ui container stackable grid">
    <div class="three wide column">
      <div class="ui vertical green fluid tabular menu">
        <a class="active item">
          トレンド
          <i class="chart line icon"></i>
        </a>
        <a class="item">
          マイルストーン
          <i class="flag checkered icon"></i>
        </a>
      </div>
    </div>
    <div class="nine wide column">
      <div class="ui segment">
        <h4 class="ui header">
          <i class="chart line icon"></i>
          トレンド
        </h4>
        <div class="ui green small secondary pointing menu">
          <a class="active item">1日</a>
          <a class="item">週間</a>
          <a class="item">月間</a>
        </div>
        <div class="ui large relaxed divided list">
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">なるべくわかりやすいJavaScript</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>1
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">新人開発エンジニアに知っておいてほしいLinux知識</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>6
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">新人エンジニアへ伝えたいこと</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>4
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">PlantUMLでシーケンス図を書いてみよう</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>0
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">05. SpringBootのソースをスタブ化してみた</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>1
              </div>
            </div>
          </div>
          <div class="item">
            <i class="large user icon"></i>
            <div class="content">
              <a class="header">04. SpringBoot + Thymeleafでフロントエンドを作ってみた</a>
              <div class="description">
                by supreme0110 X days ago<i class="thumbs up icon"></i>3
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="four wide column">
      <div class="ui advertisement segment">
        広告
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
</body>
</html>

やってみた感想

改めてSemantic uiはとてもシンプルに作れるんだなと感じると共に、
細かい修正をしようと思うとCSSも書かないといけないんだなと、少し煩わしさも感じました。

とはいえ今回は模倣だからそう思っただけであって、
新規サイトであれば大抵のワイヤーフレームは実現できるんだろうなと思います！
ブロークングリッドなどは難しいかもしれませんが…。

当初の目的だったスキルアップは出来たんじゃないかなと感じます。
公式サイトをここまで読み込んだのはSemantic uiが初めてだと思いますし、
「〇〇をしたい時は〇〇を見ればできたような」という目星を付けられるくらいにはなったと思います！

最後に

Semantic uiを使う方や、CSSフレームワークを触ろうとしている方のためになれば幸いです！
最後までお読みいただきありがとうございました！！

残る疑問

ご存知の方はコメントお願いします！

horizontal formは本当に作れないのか？
フォントのサイズ、カラーなどはcssを書くしかないのか？

SemanticUIでQiitaのトップページを作ろう！！

この記事の目的

なんでやろうと思ったの？

環境

進め方

準備

ヘッダーとジャンボトロン

構成

ヘッダー

ジャンボトロン

左側のテキスト

右側のログインフォーム

reCAPTCHA

下の3カラム構成

左側のメニューバー

中央の投稿一覧

右側の広告等

完成形

やってみた感想

最後に

残る疑問