subtechild

Playful Technology & Design.

position:absoluteした要素に可変の高さを与える

書きました。

qiita.com

positionは便利だけど、リキッドデザインで使う場合囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。

これは高さを指定しないから起こるのだが、 高さ固定したらそもそもdivの中の画像が伸縮しなくなるじゃん!!

こんな場面に出会った人は少なくないはず、多分。

どうにかなります

<div class="box ratio-1_1">
    <div class="inner">
        <p>1 : 1</p>
    </div>
</div>
.box {
    position: relative;
    width: 50%;
    height: auto;
    background: #444;
}
.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
}
.inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

ブラウザの幅を変えてみてください。

See the Pen position:abosoluteしたdivに可変の高さをつける by kenta kanno (@nknkt) on CodePen.

divに:beforeでpaddingを与えることで 擬似的に高さを与えます。

padding-topの値を変えることで比率を変えることももちろんできます。

.innerwidthheightは100%に指定することでratio-1_1の高さを拾いますね。

無事Webの制作会社で働き始めました。

しばらく更新できていなかった。

職業訓練校と独学での約半年間を経て、 全くの未経験の私はついに

Webの制作会社に就職しました。

年齢もあり、それなりに苦労もしましたが、 未経験のハンディキャップは思ったよりは低く、 頑張り次第で、経験者のみの求人でも、 お話しさせていただけるケースもかなり多かったです。

いずれ、これについては、今から未経験でWebの世界を目指したい人のためにも記事にしたいなと考えてます。

とはいえ、実際に現場に入り、まだまだ勉強することが山積みだと痛感しているところなので、 このブログの更新もぼちぼちと再会していきたいなと思ったおります。

さあ、何書こうか。

はてなブログテーマDUDEでCodepen埋め込み時にきちんと表示されるようにCSSをカスタマイズしました。

DUDE使ってます

tsukuruiroiro.hatenablog.com

私はこのテーマが大好きで最初からこちらを使わせていただいてます。 かなり完成されているのでほとんどいじっていなかったんですけど、 先日記事を書いている時に思わぬ落とし穴が。

Codepenの埋め込みをするとResultが同時に表示されないよ

コーダー御用達のCodepenの埋め込みをするとこのように、 コードと一緒にResult部分が見れなくなっているのです。

f:id:nknkt:20170114180926p:plain

これはCodepenの表示がある幅からコンパクトに収まるようになっているからです。 記事部分の幅がそのある幅に足りていないようです。

(ある幅までちゃんと調べてません、すいません)

投稿記事部分とそれに合わせて右のカラムの調整をする

以下のCSSをカスタムCSSに追加しています。 (幅1024pxの15インチの画面までの対応を想定しています)

/* contents幅の調整 */
#container #content {
    width: 990px;
}

#main {
    width: 650px;
}

@media (max-width: 1024px) and (min-width: 768px) {
#main {
    width: 70%;
    }

#box2 {    
    width: 25%;
    }
}

#contentは記事と右のカラム全てを含んでいます。 #mainが左のカラム、記事部分となっています。 #box2は右のカラムです。

不自然でない程度に少しづつ表示する幅をデフォルトより広げています。 元々の空白の取り方が綺麗なのでなるべくギリギリまでしか広げません。

結果こうなる

f:id:nknkt:20170114182102p:plain

おそらく微妙な調整すぎてぱっと見は見た目の変化には気づかないかもしれませんが、 コンテンツ部分に幅ができたので、Result部分を表示することができるようになりました。

用途によって幅は調整してください

今回はCodepenの表示を目的に幅は設定したので、 似たような悩みで別のサービスを貼りつけたい時などは それに合わせて幅を変えていくといいと思います。

Chromeデベロッパーツールでプレビューしながら幅を変えてみることができるので、 そちらで最適な数値を見つけてもらうのがいいかと思います。