読者です 読者をやめる 読者になる 読者になる

blog @arfyasu

プログラミングとか趣味のこととか

「RubyistのためのCSS勉強会」のハンズオンの課題をやってみた

はじめに

先日、この記事を読み内容が素晴らしすぎてCSSを勉強したくなったので、ハンズオンの課題をやってみました。

blog.jnito.com

先に言っておくと、私には難問でした。
CSS知ってる人からすると簡単なのかもしれませんが、1つも解けませんでしたよ。

1問目:グローバルナビゲーション

完成形

f:id:kanz-labs:20160115000053p:plain

結果

display: inline-block を使いましたが、最後の要素が落ちてしまう状況が解決できず断念。 f:id:kanz-labs:20160115000235p:plain

次に、float: left を使いましたが、左右の余白を解決出来ませんでした。 f:id:kanz-labs:20160115000253p:plain

結局、回答を確認(5種類の回答が用意されていました)。

display: table や Flexbox は知りませんでした。
個人的には、Flexbox がかなりいい感じだと思いました。

ポイント
  • リストを横並びにする方法は色々ある
  • display: table の使い方
    以下の記事が分かりやすかったです。 app.codegrid.net
  • Flexbox の使い方
    以下の2つの記事が分かりやすかったです。(バズってるだけある) www.webcreatorbox.com liginc.co.jp

2問目:アラート画面

完成形

f:id:kanz-labs:20160115000351p:plain

結果

惜しいところまでいったと思うんですけどね(ググりながらですけどw)
半透明のスクリーンとダイアログボックスの位置調整が出来ませんでした。 f:id:kanz-labs:20160115000430p:plain

細かなところでいうと、注意の位置が若干左によってます。

回答みれば、なるほど!
というものばかりでした。

ポイント
  • 各要素の位置の指定方法(position や top, right, left など)
  • アイコンの背景の指定方法(正円や位置指定)
  • テキストの間隔等の調整(letter-space)
  • これも知りませんでしたけど、box-sizing も大切ですね。 phiary.me

3問目:記事一覧画面

完成形

f:id:kanz-labs:20160115000836p:plain

結果

早速覚えたての Flexbox を使ってチャレンジしましたが、3つじゃなくて2つで折り返されてしまいました。 f:id:kanz-labs:20160115000920p:plain

原因は、box-sizing を指定してなかったことでした。
1つ前の問題でやったばっかりだったのに...

レイアウトができなかったので、テキストを画像にかぶせるところまでいけず、こっちは回答を確認したのみでした。

ポイント
  • Flexbox の改行方法
  • boxsizing の指定
  • テキストを画像にかぶせる際の位置の指定方法(relative)
回答の訂正

_articles-sample-2.sass.sample はテキストが画像にうまくかぶらなかったので、以下を追加するとうまくいきます。

.articles__item-crerated-at
  background-color: $black-dark
  text-align: right
  line-height: 24px
  padding-right: 8px
  color: $white
  font-size: 14px
  position: absolute
+  left: 0
  bottom: 0
  width: 100%
  box-sizing: border-box

まとめ

全然出来ませんでしたが、知らないことを知るのは楽しいですね。
CSS は Bootstrap やそこから派生したフレームワークに頼りきりなので、こうした勉強は新鮮でした。

知らないことばかりにビビってますw

HTMLと編集すべきクラス要素を指定された状態までお膳立てまでしてもらっても、なかなか出来ないもんですね。
悔しい。
回答を見ずにできるようになるまで、何回も復習しようと思います。

残り1つの課題は、また後日にでもやります。


2016/01/18: 4問目追記

4問目:コメント画面

完成形

f:id:kanz-labs:20160119000313p:plain

結果

こちらも Flexbox を使ってレイアウトを組みました。
っが、吹き出しの部分が作れず、ググってる間に時間切れで以下な結果に、、、

f:id:kanz-labs:20160119000508p:plain

吹き出しはブログのサブタイトルの装飾等でよく目にしていましたが、どう作られているかは全然注意していませんでした。
今回の課題で、それらがどのように作られているかを把握出来ました。

ちなみに、何故三角になるのかは以下のブログの説明が分かりやすかったです。

CSSを使った見出しを勉強すると、デザインの幅が広がります | アフィーロード


理解を深めるためにちょっとアレンジしてみました。

場所の変更

吹き出しの部分のCSSを下記のようにすると、吹き出しを下に表示することが出来ます。

  &:before
    content: ''
    position: absolute
    border-style: solid
    border-width: 16px 22px
    border-color: transparent
    border-top-color: $teal-50
    left: 32px
    bottom: -32px

f:id:kanz-labs:20160119000624p:plain

吹き出しの形を変更

吹き出しの形を丸に変えてみます。
やり方は、2つの円を少しずらして重ね、フロントを背景色と合わせる方法です。

  &:after
    content: ''
    position: absolute
    height: 60px
    width: 60px
    border-radius: 30px
    z-index: -1
    background: #fff
    top: 50px
    left: -45px
  &:before
    content: ''
    position: absolute
    height: 60px
    width: 60px
    border-radius: 30px
    z-index: -2
    background: $teal-50
    top: 25px
    left: -30px

f:id:kanz-labs:20160119000653p:plain

ポイント
  • ターゲットと吹き出しのポジション指定
  • 吹き出しの作り方(before と after の擬似要素を使用)
  • 吹き出しを三角にする場合はボーダー、丸い吹き出しは丸を2つ重ねる