「RubyistのためのCSS勉強会」のハンズオンの課題をやってみた
はじめに
先日、この記事を読み内容が素晴らしすぎてCSSを勉強したくなったので、ハンズオンの課題をやってみました。
先に言っておくと、私には難問でした。
CSS知ってる人からすると簡単なのかもしれませんが、1つも解けませんでしたよ。
1問目:グローバルナビゲーション
完成形
結果
display: inline-block を使いましたが、最後の要素が落ちてしまう状況が解決できず断念。
次に、float: left を使いましたが、左右の余白を解決出来ませんでした。
結局、回答を確認(5種類の回答が用意されていました)。
display: table や Flexbox は知りませんでした。
個人的には、Flexbox がかなりいい感じだと思いました。
ポイント
- リストを横並びにする方法は色々ある
- display: table の使い方
以下の記事が分かりやすかったです。 app.codegrid.net - Flexbox の使い方
以下の2つの記事が分かりやすかったです。(バズってるだけある) www.webcreatorbox.com liginc.co.jp
2問目:アラート画面
完成形
結果
惜しいところまでいったと思うんですけどね(ググりながらですけどw)
半透明のスクリーンとダイアログボックスの位置調整が出来ませんでした。
細かなところでいうと、注意の位置が若干左によってます。
回答みれば、なるほど!
というものばかりでした。
ポイント
- 各要素の位置の指定方法(position や top, right, left など)
- アイコンの背景の指定方法(正円や位置指定)
- テキストの間隔等の調整(letter-space)
- これも知りませんでしたけど、box-sizing も大切ですね。 phiary.me
3問目:記事一覧画面
完成形
結果
早速覚えたての Flexbox を使ってチャレンジしましたが、3つじゃなくて2つで折り返されてしまいました。
原因は、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問目:コメント画面
完成形
結果
こちらも Flexbox を使ってレイアウトを組みました。
っが、吹き出しの部分が作れず、ググってる間に時間切れで以下な結果に、、、
吹き出しはブログのサブタイトルの装飾等でよく目にしていましたが、どう作られているかは全然注意していませんでした。
今回の課題で、それらがどのように作られているかを把握出来ました。
ちなみに、何故三角になるのかは以下のブログの説明が分かりやすかったです。
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
吹き出しの形を変更
吹き出しの形を丸に変えてみます。
やり方は、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
ポイント
- ターゲットと吹き出しのポジション指定
- 吹き出しの作り方(before と after の擬似要素を使用)
- 吹き出しを三角にする場合はボーダー、丸い吹き出しは丸を2つ重ねる