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

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

たーやま

4/11(日)〜 4/17(土)のアウトプットをまとめます。

目次

4/11(日)のアウトプット

今日はアウトプットの時間は設けていませんでした。

先週の記事の体裁を整えたり、来週の準備をしたりはしましたが、それ以外は特にしていません。

また明日からアウトプットしていこうと思います。

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

カルーセルを使う時のことをまとめました。

Swiper.js の読み込み

CDNでの読み込みが簡単だと思いますが、設定しても反映されないことがありました。

なのでファイルを読み込むパターンが多いのですが…

たーやま

どれ使えばええねん。

と毎度思うので、メモしておきます。

公式サイトではありませんが、「【1-2(1-1とどっちかで)】ローカルで使いたい場合。」の箇所のリンクを参照ください。

すると、UNPKG があります。

View Raw 」というところを選択すると、コードが確認できます。

Mac の場合、「 Ctrl + トラックパッドのクリック 」で、「別名を保存」を選択。

これで Swiper のコードを保存できました。

たーやま

一応、Swiper.js の UNPKG も貼っておきますね。

サムネイル付きスライダーの実装

以下の記事を見ながら、スライダーの実装を試みました。

たーやま

2つ目のサイトにあるデモのような実装を考えてます。

スライダーをただ実装するだけならそこまで難しくはないのですが、問題はカスタマイズ。

Swiper.js で使われているクラスや動きを把握する必要があります。

色々といじくっていますが、今日に完成することはできませんでした。

たーやま

時間ができたら、また挑戦します。

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

午前中に先輩からのレクチャーがありました。自分にとってはかなり参考になり、この情報は使っていこうと思います。

Photoshop での書き出しのコツ

今まではスライスツールを使って一つ一つ選択し、書き出していました。

なので…

クッソめんどくさい(笑)

しかし、そんなめんどくさいことをせずとも一気に書き出しできます。

まず Photoshop で、ファイル > 生成 > 画像アセット で、画像アセットにチェックが入った状態にしてください。

そして画像にしたいところの末尾を、「.png」か「.jpg」にします。

例えば「テキスト1」というのがあったら、「テキスト1.jpg」か「テキスト1.png」にすればOKです。

たーやま

グループ化したやつもできるで。

こうすると勝手にフォルダが作成されて、保存されています。

〜asset」というフォルダに格納されているので、目的に合わせて使用しましょう。

たーやま

Zeplin 使う必要ないねん。個人的にすげぇと思った。

書き出しの形式のまとめ

画像の書き出し形式は、主に「.jpg」、「.png」、「.svg」の3つあります。

たーやま

svg はあんまり使い勝手しらんな…。

と思っていましたが、使い分けの目安を教えてもらいました。

.jpg の場合

写真などの画像を保存するときに使います。

基本的に「.png」よりは容量が少なくすみますが、文字を画像として保存するのには向きません

あと背景の透過もできないので、長方形での画像を使いたいときの方がいいでしょう。

たーやま

円とか多角形やったら、背景白なってもうたわ(笑)

.png の場合

.jpg よりかは容量が大きくなりがちです。

しかし透過して保存ができるので、文字やイラスト、ロゴなどに向いてます。

また、画質は .jpg よりも良くて、特に色数が少ない場合に威力を発揮。

たーやま

写真ってめっちゃ色合い多いやん。
でもイラストとか文字って写真ほど色合い多ないやん。
そんなイメージでいいと思う。

.svg の場合

先輩は激推ししていました。

どれだけ画像を伸縮させても、崩れないしめっちゃ軽いみたいです。

しかし写真には不向きなので、基本的にテキストやロゴ関係で使います

あと Illustrator では表示できますが、Photoshop では表示できません。

しかも、古いブラウザで対応していない場合もあります。

たーやま

まぁ、いつまでも古いの使ってる方が難ありやと思うけど(笑)

もし「.svg」の拡張子が使えるなら、先輩は迷わず使うとのこと。

慣れない形式ですが、わたしも使っていこうと思います。

たーやま

参考リンクも貼っておきますね。

1x か 2x はどっちがいいの問題

先ほど紹介した方法であればこの問題はおきません。

ただ、書き出し方によっては 1x か 2x で画像が出てくることもあります。

これってどっちがいいか迷いますよね。

たーやま

どっちも変わらんやろ。

って私は思ってましたが、これも違うみたいです。

PCは1xで、スマホは2x」を使ってくださいとのことでした。

基本的にスマホの場合は解像度が2倍あるので、2xじゃないと荒れやすいみたいです。

今後のためにメモとして残しておきました。

たーやま

拡張子が svg なら気にせんでいいねんて。

テキストがいいか画像がいいか

先輩に聞いてみました。

たーやま

画像かテキストにするかで迷うんですが、先輩ってどんな感じで振り分けてますか?

これもめっちゃ丁寧に答えてくれました。

結論を言うと、「短期間のものは画像多めで、長期間使うものはテキスト多め」とのことです。

たーやま

サイトによっても変わるみたい。あくまで目安って感じやね。

画像ばかりよりもテキストが多い方が、SEO 的に効果がある可能性が高いからです。

ですが、Webサイトは必ずしも長期間使われるものばかりではありません。

塾の季節ごとの講習とか、一時期の催し物とかもありますよね。

それらをテキストばかりにすると、工数がかかってしまいます。

そういう場合は、画像を多めにすることが多いそうです。

たーやま

LPも短期間での使用が多いから、画像多めでコーディングしていくみたい。

あと、画像の名前もある程度気にするべきだという記事もみつけました。

リンクを貼っておきます。

background-repeat の脅威

しましまや水玉など、繰り返しの模様が背景にあったらめんどくさいですよね。

CSSでの表現をしようと思えばできますが、楽にコーディングしたいものです。

そういうときは、一部を小さく切り取って「 background-repeat 」をするのがオススメ!

小さく切り取ることで、容量もほとんど食いません。

他に割く時間もあるので、ここはサクッとすませましょう。

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

仕事でのコーディングに時間がかかりすぎてしまい、かけるようなことがありません。

やっていることもスクールでやった内容がほとんど。

少々ややこしいというだけで、残すほどの内容を見つけられませんでした。

また何かあれば、アウトプットとして残しておきます。

4/15(木)のアウトプット

今日は、今となっては超珍しい実装にであいました。

float 」です。

flexbox が出る前は大活躍だったみたいですが、わたしはあまり見かけませんでした。

何なら progate で習って以降みてません(笑)

そんな float を使った実装をしたので、メモします。

flexbox で唯一できない実装があった…

上記の画像のように、画像の下にテキストを回り込ませたい場合は flexbox では対処できません。

こんな時は float を使いましょう。具体的なコードはこんな感じです。

<div class="wrap">
 <div class="contents">
  <h3 class="subtitle">サブタイトル的な要素です。</h3>
   <img src="/img/miyako-island_beach.jpg" alt="宮古島の海と砂浜">
    <p class="txt">
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミー
    </p>
  </div>
</div>
.wrap {
    max-width: 700px;
    width: 100%;
    margin: 3.75em auto;

    &::after {
        clear: both;
        content: "";
    }  
}

.contents > img {
    width: 400px;
    margin-left: 1.25em;
    float: right;
}

.contents:after {
 display: block;
    clear: both;
    content: "";
}

.subtitle {
    font-size: 1.5rem;
}

こうすることで、画像の下にうまくテキストが回り込むようになります。

そしてもう1つ新しい発見をしました。

clear が擬似要素にも使える

ということです。

Progate では、空タグを作って clear: both; を使っていた記憶があります。

が、擬似要素でも対処可能。

他にも、overflow: hidden; でもfloat を解除できるみたいですね。

4/16(金)のアウトプット

仕事が終わってから、ブログを書いたり宮古島への準備をしたりしていました。

なので、アウトプットに書けるような内容がありません。

たーやま

毎日アウトプットする方針は厳しいかもな。
『今週のアウトプット』みたいな感じに変更するかもです。

「お仕事日報」よりも記事を書くのに時間がかかるため、ちょっと考えます。

4/17(土)のアウトプット

久々に Udemy をする時間を確保できました。JavaScript についてメモしていきます。

即時関数

定義すると速攻で実行される関数のことです。IIFE と略される場合もあります。

今までのコードとは若干記述方法が違うので、早速みてみましょう。

// よく見る関数の書き方

function hello() {
    console.log('hello! world');
}
hello();

// 即時関数の書き方

(function () {
    console.log('hello! world');
})();

これが即時関数の記述方法です。よく見る方で考えると、「 (hello)(); 」で実行したのと同じようになります。

たーやま

あくまで考え方です。実行しても意味はありません。

また、引数や返り値を持つこともできます。

let result = (function (fn1, fn2) {
    return fn1 + fn2;
}('hello! ', 'world'));

console.log(result); // 主力結果:hello! world

書き方は何となくわかったけど、使い道は?

ってなりますよね。

関数スコープを利用して、関数の内外で使える変数・関数を分けたいときに使えます。

let result = (function () {

    console.log('called');
    let private = 0;
    let public = 10;

    function privateFunction() {
        console.log('privateFunctionです。');
    }
    function publicFunction() {
        console.log('publicFunctionです。');
    }

    return {
        public,
        publicFunction
    };

})()

result.publicFunction(); // 出力結果:publicFunctionです。
console.log(result.public); // 出力結果:10 

let private = 0; 」は関数のスコープでしか存在していないので、関数内部でしか使用できません。

let public = 10; 」も関数のスコープですが、戻り値 return で 記述しているため、外部からでも呼び出せます。

たーやま

return が 変数 result に格納されるから呼び出せるようになります。

実用的に使う場合、ページの初期化や機能判定などに使えます。

この辺りは参考記事を載せておきますので、興味があればどうぞ。

4/11(日)〜 4/17(土)で感じたこと

実務と JavaScript でのアウトプットが多い週でした。

スクールで経験したスライダーや、書き出しのコツ、float の実装などを経験しました。

しかし、やったことがそのまま出るというよりは、応用して使っていく感じがします。

たーやま

サムネ付きのスライダーとかガッツリ応用やしな。

そして JavaScript の方は、今週で1セクションを完了させました。

理解に苦しんだので、いろんな記事を読みあさった記憶があります。

カタカナ多いし複雑なんですよ…(笑)

ただ、何回か読み直したり、アウトプットにまとめたりしたらある程度理解できるようになりました。

たーやま

この調子でどんどんやっていきます。

そして今考えているのが、アウトプットに関することです。

細かく分けすぎている感じがして、自分への負担がかかりすぎている感じがします。

特にコーディング日報が。

始めは毎日できましたが、やることが増えています。実際今週は、先週ほどアウトプットができませんでした。

アウトプットできなかったら、「今日はしてません」って書けばいいのですが…。

何となく「またやってないな」感がでちゃうんですよね…。

別に他人のためのアウトプットじゃないのでいいんですけど、何となく「自分あかんな」感が出そうな予感がしています。

なので、やり方を変えるかもしれません。

たーやま

無理してしんどい思いしたないからな(笑)
ブログばっかじゃ本末転倒やし。

まぁ、変えないかもしれませんが(笑)

ひとまず、今週はこんな感じでした。来週も努力・精進を惜しまずに進んでいきます。

たーやま

何かしら役に立てたら、拡散していただけると大変励みになります。

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

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

この記事を書いた人

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

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

目次
閉じる