概要

今回はsemantic-uiを使って手軽にスタイリングしていこうと思います。
前回書いた記事のアプリをスタイリングしていきます。

前回の記事

https://qiita.com/ssnyarii/items/d9758d6ab573b9b53c4b

前回の記事のコードは全くスタイルを当てていないので、実際起動するとものすごく見づらいです。

semantic-uiとは

semantic-uiとはcssフレームワークのことで、直接cssを書かなくても指定されたクラス名をつけてあげればスタイルがつくといった優れものです。

詳細

https://semantic-ui.com/

使ってみる

semantic-uiはcdnが提供されているのでそこのsemantic.min.cssをコピーして貼りましょう。

詳細

https://cdnjs.com/libraries/semantic-ui

コード

public/index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

あとは公式サイトのdocsを見ながら指定されているクラス名をつけていくだけです。

とりあえず全体の左右にいい感じの余白、そしてボタンをリッチにして中央寄せ、あとカメラのアイコンもつけちゃいましょう。
コードは一部抜粋です。少し直接css当ててます。

src/App.js

render() {
    return(
      <div className="ui container" style={{marginTop: 20}}>
        <h2 className="ui center aligned icon header">
          <i className="circular camera retro icon"></i>
          <button 
            onClick={this.getPhotos}
            className="ui positive basic button"
          >
            get photos
          </button>
        </h2>
        <ImageList  images={this.state.images} />
      </div>
    );
  }

次に表示される写真一覧も見やすくしたいと思います。

現状ではサイズも大きくて見づらいのでサイズを小さくして、写真の間に線を入れて分断をわかりやすくして、写真の詳細のメッセージも入れるようにしましょう。こちらも少し直接css当ててます。

src/ImageList.js

const ImageList = (props) => {
  const images = props.images.map(({id, urls, description}) => {
    return (
      <div key={id}>
        <img 
          className="ui middle aligned small image"
          src={urls.regular}
          alt={description}
        />
        <span style={{marginLeft: 10}}>{description}</span>
        <div className="ui divider"></div>
      </div>
    );
  });

  return (
    <div>
      {images}
    </div>
  );
}

以上で終了です。以下が完成画像になります。
get photosのボタンをクリックした後の画面です。

githubにコードあげています。
GetPhotos https://github.com/ssnyarii/GetPhotos

詳細のメッセージがある画像とnullになっている画像があったので空白の写真も多いと思いますが、そこは触れないでください笑

まとめ

semantic-ui、個人的には大変好んでいます。種類も多いです！！
cssを書くのがあまり好きではないのでこういったフレームワークには助けられます笑
まだまだ触っていないデザインもたくさんあるので色々試していきます、、！！

semantic-ui を使って手軽にスタイリング

概要

semantic-uiとは

使ってみる

まとめ