このブログのコンセプトって○○なん、知ってた? 何それ気になる〜

【コーディング週間日報】4/25(日)〜 5/1(土)の学習

たーやま

4/25(日)〜 5/1(土)に行ったことを書きます。

目次

4/26(月)のアウトプット

実務で flexbox を使うことがめっちゃ多いのですが、罠にはまりました。

width の指定が効かない…

flexbox 内にある flex_num に width を指定したのに、うまく効きませんでした。

<div class="flex">
    <div class="flex_txts">
        <div class="flex_num">1</div>
        <p class="flex_txt">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</p>
    </div>
    <div class="flex_txts">
        <div class="flex_num">2</div>
        <p class="flex_txt">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</p>
    </div>
</div>
.flex {
    margin: 100px auto;

    &_txts {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #c3c3c3;
    }

    &_num {
        width: 40px;
        height: 40px;
        margin-right: 20px;
        background-color: #0099FF;
        color: #fff;
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
    }
}

上記のコードで、先ほどの画像のように実装されます。

これですこ〜しだけ悩みましたが、以下の記事を参考にすることで解決しました。

min-width をあまり使用したことがなかったため、ちょっとしたアハ体験ができました。

Sass のコードを直すとこんな感じ。

.flex {
    margin: 100px auto;

    &_txts {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #c3c3c3;
    }

    &_num {
        min-width: 40px;
        height: 40px;
        margin-right: 20px;
        background-color: #0099FF;
        color: #fff;
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
    }
}

4/27(火)のアウトプット

position についてや、テキストの外枠についてまとめました。

position: absolute; は相対表示で

上記のような実装があり、吹き出しにposition: absolute; を使用していました

その時にブラウザで拡大・縮小をすると、大きさに異変が…。

PC 幅にすると、明らかに吹き出しが小さかったのです。

何か解決策がないかと先輩に聞くと…

画面幅で大きさを変えたいなら、%とかvwの方がいいですよ。

とご教授いただきました。

結果、うまく表示されることになりました。

たーやま

相対表示って、画面の幅でも大きくなるんや…。

ということを学べました。

テキストの縁を装飾したいときは…?

いくつか見出しがある中で、一つだけ文字の外側に縁がありました。

ということで、テキストの外側に縁をつけたい時の実装です。

text-shadow を使いましょう。

たーやま

text-stroke でも装飾できますが、対応していないブラウザもあるみたいです。

    <div class="flex">
        <div class="flex_txts">
            <p class="flex_txt">Text-shadow</p>
        </div>
    </div>
body {
    background: yellow;
}

.flex {
    margin: 100px auto;

    &_txts {
        display: flex;
        justify-content: center;
    }

    &_txt {
        font-size: 2rem;
        font-weight: bold;
        letter-spacing: .05em;
        text-shadow:
        2px  2px 1px rgba(255, 0, 0, 0.26),
        -2px  2px 1px rgba(255, 0, 0, 0.26),
         2px -2px 1px rgba(255, 0, 0, 0.26),
        -2px -2px 1px rgba(255, 0, 0, 0.26),
         2px  0px 1px rgba(255, 0, 0, 0.26),
         0px  2px 1px rgba(255, 0, 0, 0.26),
        -2px  0px 1px rgba(255, 0, 0, 0.26),
         0px -2px 1px rgba(255, 0, 0, 0.26); ;
    }
}

これでアイキャッチのような実装ができました。

text-shadow については、ジェネレーターもあるので参考までに…。

しかし、text-shadow にもデメリットがあります。

縁の px を大きくしすぎると、角同士でズレが生じます。

あくまで擬似的に縁をとっているのに過ぎないため、縁取りを大きくしている実装には向きません。

たーやま

ぼかしても何とかならない場合は、文字を画像にするのも手です。

text-shadow のデメリットも、参考サイトがあったので掲載しておきます。

4/28(水)のアウトプット

少々うっかりしたことと、JavaScript について記載します。

z-index ちゃんとしてるのに…

ある実装で、z-index を使う場面がありました。

特に変な重なりがあったわけでもないのに、z-index の指定がおかしいのかと思いました。

しばらくググっても理解できなかったので、先輩に聞いてみました。すると…

あ〜これは、画像をアップしてないですね〜。

アップロードの問題でした(笑)

画像をアップロードすると、きちんと表示されました。

万が一、同じような場面に遭遇した方のために残しておきます。

たーやま

というか何でこんな秒で解決できるん…。
純粋にすごいわ。

今日も先輩の背中が偉大に見えた日でした。

以降、Udemy で 学習している JavaScript について記載します。

プリミティブ型とオブジェクト

データ型:文字列、数値などの異なる値の型のこと。 JavaScript では8つの型があります。

・String
・Number
・Boolean
・Undefined
・Null
・Symbol
・BigInt

この7つのプリミティブ型と Object で構成されます。まずはプリミティブ型から見ていきましょう。

プリミティブ型

プリミティブ型の変数には値が格納され、変更することができません。

これを immutable といいます。

変数の宣言で、let をよく使いますが、let の再代入は値を変更しているわけではありません

あくまでも、参照先を変えているイメージです。

let a = '大阪';
a = '兵庫';

再代入をしているため、呼び出すと兵庫になります。

が、大阪が変更されて兵庫になったわけではありません。

オブジェクト

オブジェクトの変数には参照が格納されています。そして、変更可能なので mutable と呼ばれています

let a = {
 text: '宮古島';
};

イメージとしてはこんな感じです。

a が { } への参照を保持 
・オブジェクト { } は { } 内の参照を保持
・ここでは text があるので、text を保持
・{ text } は値の参照を保持する(ここでは宮古島)

{ } 内が変わっても、a が { } へ参照することに変更はありません。

そのため、mutable と呼ばれています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大阪出身26歳。宮古島の制作会社に勤めています。
コーディングとデザインにシバかれてます。

生き物や自然が好きやけど、特にクワガタムシが好き。
他、チャリとか釣りとか筋トレとかも好き。

目次
閉じる