SCSSとの出会い

私がSCSSに出会ったのは、個人的にとある案件を引き受けたときでした。

コーディング規則についてのドキュメントを読んでみると、こんな文言が。

また、ベースにしてほしいと伝えられたコーディングファイルを見てみると、

そこにはCSSのようでCSSではない、まるで暗号のようなコードが広がっていました。

個人で引き受けた案件で、休日に取り組んでいたためその場で社長に質問することもできず、

迫る期限に怯えながら、ひたすらコードとにらめっこしていたのを今でも鮮明に覚えています。

そんな私の様子を見て、後日社内で社長がSCSSの勉強会を開いてくださり、

そこから本格的にSCSSの便利さ・魅力を知ることになりました。

SCSSのここがすごい！

1.コードが構造的に書ける「ネスト」

SCSSではネストと言って入れ子構造でセレクタを書くことができます。

/* CSSで書いた場合 */
.sec-company .company-title {
    font-size: 40px;
}

.sec-company .company-title .en {
    font-size: 16px;
    margin-top: 12px;
}

上のコードをSCSSを使って書いてみると、

// SCSSで書いた場合
.sec-company {
    .company-title {
        font-size: 40px;
         .en {
          font-size: 16px;
          margin-top: 12px;
        }
    } 
}

こんなふうに入れ子にして書くことができます。

HTMLの階層とスタイルの階層が対応していて、コードを見ただけで構造が把握しやすくなります。

何度も同じセレクタを書かなくていいので時間短縮になります

2.よく使うスタイルを再利用「ミックスイン」

何度も同じコードを書いていると、『まとめられたら便利なのに』と思うことありませんか？？

HTMLで同じクラス名をつけておけば良い話ですが、

微妙に色が違ったり、サイズが違ったりすると、

同じコードを何度も書かなければいけなくなってしまいます。

そんな時に使えて便利なのがミックスインです。

// 変数$mbに引数40pxを渡している
@mixin flex-center($mb: 40px) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: $mb;
}

ul {
  @include flex-center(56px); 
}

//CSSで出力されるとこうなります👇
ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

mixinは@includeを使って呼び出すことができます。

また、引数（パラメータ）を設定することで、状況に応じて値だけを変えて呼び出せます。

上記のコードではmargin-bottomに変数$mbで置いておくことで、

数値を臨機応変に調整できるようになっています。

3.カラーやサイズを統一できる「変数」

SCSSでは何度も出てくるカラーや数値を変数として管理することができます。

Figmaでもスタイルやバリアブルを登録できるようになっているので、

カラーコードよりも色の名前で変数でまとめておく方が、

実装時の手間が省けると実感しています。

$main-color: #FFFFFF；
$highlight-color: #ff6e6c;
$secondary-color: #67568c;
$tertiary-color: #fbdd74;
$mb: 40px;

//　実際に使うときは...
.sec-title {
    color: $secondary-color;
}

このコードを見て『CSSでも同じことできるんじゃなかったっけ??』と思われた方、

鋭いです

CSSでもカスタムプロパティという『変数のように値を定義して使いまわせる仕組み』があります。

変数を使うことで、色やサイズなどの共通スタイルを一括管理しやすくなります。

:root {
    --main-color: #FFFFFF;
    --highlight-color: #ff6e6c;
    --secondary-color: #67568c;
    --tertiary-color: #fbdd74;
    --mb: 40px;
}

/* 実際に使うときは... */
.sec-title {
    color: var(--secondary-color);
}

ではCSSのカスタムプロパティと比較して、SCSSの変数を使うメリットはあるのでしょうか??

結論、あります

• ネストの階層に関係なく変数を使うことができるSCSSの変数は、どんなに深くネストした場所でも自由に呼び出せます。
• 変数を計算式に使用することができる色の明るさを少し変えたり、サイズを調整したりといった計算も、SCSSの変数なら簡単にできます。例えば、$mb * 1.2 のように書けるので、デザインの微調整がとっても楽になるんです。
• mixinなどの他の機能と合わせて使用できるSCSSの変数は、ミックスインや関数と合わせて使えるのが大きな魅力。共通のスタイルをまとめつつ、変数で細かく調整できるので、コードの再利用性がアップします。
• 変数やスタイルを複数のファイルに分けて管理することが可能SCSSはファイルを分割して管理できるので、変数も「色だけ」「サイズだけ」といった感じでまとめておけます。大きなプロジェクトやチーム開発では、これがあるのとないのとで作業効率が大違い！

SCSSを使う際には変数も合わせて使ってみてほしいです。

4.ファイル分けでプロジェクトが整う

ページ数の多い案件では、複数人で開発を進めることがよくあります。

その際に問題になりやすいのが、「自分以外の人が書いたスタイルがどこにあるか分からない」という状況です。

そこで役立つのが、SCSSの設計手法のひとつである「FLOCSS」です。

FLOCSSでは、スタイルを以下のように役割ごとに分類してファイルを管理します。

├─ foundation/   → リセットCSSや変数、mixinなど土台となる設定
├─ layout/       → ヘッダーやフッター、メインレイアウトなどページ全体の枠組み
├─ object/
│   ├─ component/→ ボタン・カードなど再利用できるUIパーツ
│   ├─ project/  → サイト固有のブロック（例：商品一覧、記事スライダーなど）
├─ utility/      → marginやtext-alignなど、使い捨ての補助クラス

のように**「どんな目的のスタイルか」**を明確にした構成にしておくと、

• 共通パーツとページ専用パーツが混在しない
• 必要なスタイルがどこにあるかをすぐに見つけられる
• うっかり他のページに影響してしまうミスを防げる

といった大きなメリットがあります。

最後に

いかがでしたでしょうか??

最初は少し抵抗があるかもしれませんが、一度使うとその便利さにトリコになってしまいます

今回の記事が、SCSSを始めるきっかけや、「なんか良さそうかも」と思えるヒントになればうれしいです。

私もまだまだ勉強中なので、「こんな書き方あるよ！」などあればぜひ教えてください

一緒に成長していきましょう！

参考文献

【CSS設計】FLOCSS(フロックス)で保守性の高い記述を極める！

Sassとは？CSSとの違いや機能、使い方を初心者向けに解説

【命名規則】BEMを使った書き方についてまとめてみた【CSS】

SCSSってなに??

SCSSは効率的なスタイル設計ができるCSSを拡張した記法です。

見た目はほぼCSSと同じなのが特徴ですが、変数やネスト、関数などの便利機能も使えるのが魅力です。

この後詳しく説明していきます。

SCSSを使う準備

今回はVS Codeでの作業を想定して説明していきます。

拡張機能のダウンロード

画面左端にあるメニューから、拡張機能のアイコンをクリックします。

検索窓で「Sass Compiler」と入力します。

Live Sass Compilerが出てきたらインストールしてください。

『Live Sass Compiler』はSCSSのコードをCSSに直してくれる拡張機能です。

SCSSはそのままでは使えないため、「CSSに変換する作業（＝コンパイル）」が必要です。

コンパイルとは、SCSSのような人間向けのコードを、ブラウザが理解できるCSSに直す作業のことです。

画面下の『Watch Sass』をクリックするとコンパイルが開始されます。

エラーがなければ上記のようにSCSSがコンパイルされて、cssファイルとcss.mapファイルが生成されます。（css.mapファイルを生成する場合は要設定）

css.mapとは「開発者ツール（検証ツール）」で調べたときに、SCSSで書いた元の場所を教えてくれるファイルです。

たとえば、開発者ツールで <h1> の color をチェックすると…

.css.map がある場合 → main.scss の 20行目に書いてある、と表示される

.css.map がない場合 → style.css の 200行目などと表示される（元のSCSSファイルのどこかわからない）

そのため、どこを改善すれば良いかがとてもわかりやすいです。

エラーがあれば赤のボックスで囲った部分のように、

エラーが起こっている箇所を教えてくれます。

基本の書き方

ネスト

まず、SCSSの特徴的な書き方として挙げられるのが『ネスト』です。

ネストとは下のコードのように入れ子のように記述することを言います。

このように書くことで、何度も同じセレクタを書かなくて済むのでとても楽です

.footer-flex-r {
    display: flex;
    gap: 20px;
    a {
        display: block;
        width: clamp(165px, 14.4vw, 231px);
    }
}

変数

SCSSでは、$ を使って値に名前をつけて保存することができます。

これを『変数（へんすう）』と呼びます。

よく使う文字サイズや色を登録しておくととても便利です。

最近では、Figmaのデータでもバリアブルやスタイルを用いて変数を登録できるようになりました。

デザインをコードに起こす際に、Figmaの変数をSCSSにも登録しておけば、

便利で、作業時間も短縮することができます。

$primary-color: #3498db;
$font-size-base: 16px;
$spacing-unit: 8px;

.button {
  background-color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-unit * 2;
}

ミックスイン（@mixin / @include）

ミックスインとは、よく使うコードのパターンを保存しておくことができるものです。

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

ミックスインを呼び出す時は@includeを使います。

.box {
  width: 100px;
  height: 100px;
  @include center-flex;
}

ミックスインの中の値を変えたい場合は以下のように書くことができます。

@mixin text-style($size, $weight, $color) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
}

p {
  @include text-style(14px, normal, #333);
}

実務でよく使うのはレスポンシブ対応する場合のブレークポイントの値です。

@mixin の中に書かれた @content は、

@include を使うときに書いたブロック（中かっこ {} の中身）を、その場所に差し込むという意味です。

$tab_large: 1100px;
@mixin tab_large {
    @media screen and (max-width: ($tab_large)) {
        @content;
    }
}

この場合はincludeを入れ子にして使います。

.l-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include tab_large {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

CSSとして書き出される場合は以下のようになります。

.l-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (max-width: 1100px) {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

ファイル名の付け方

SCSSファイルは基本的に先頭に_（アンダースコア）をつけることになっています。

アンダースコアがついているファイルはコンパイルされないことになっています。

_reset.scss       // CSSリセット
_header.scss      // ヘッダーのスタイル
_footer.scss      // フッターのスタイル

ではどのファイルをコンパイルすればいいのか、次の章で詳しく見ていきましょう。

ファイルの呼び出し

SCSSでコーディングをする時は下記のように各ファイルをフォルダに格納します。

以下はあくまでも一例ですが、SCSSファイルは目的ごとにフォルダを分けます。

この中でSCSSファイルの中でコンパイルされるのはstyle.scssだけです。

css/
├── foundation/          // リセットや基本スタイル
│   ├── _reset.scss
│   └── _base.scss
├── components/    // ボタンやカードなどの部品
│   ├── _button.scss
│   └── _card.scss
├── layout/        // ヘッダー・フッター・グリッドなど
│   ├── _header.scss
│   ├── _footer.scss
├── pages/         // 各ページ専用のスタイル
│   └── _home.scss
└── style.scss      // すべてをまとめるエントリーファイル

style.scssは以下のような記述になります。

@useを使って他のscssファイルを呼び出しています。

@charset "utf-8";

//Foundation
@use "foundation/reset";
@use "foundation/base";

//Component
@use "component/button";
@use "object/card";

//Layout
@use "layout/header";
@use "layout/footer";

//Pages
@use "pages/home";

最後に

いかがでしたでしょうか？？

今回のブログではSCSSの基本構文を紹介しました

初めてSCSSを触った時は、CSSとの違いに混乱し、

見慣れないコードが溢れていることに戸惑いました

今、SCSSのいろんな機能を使ってみて思うのは、『全て使い切る必要はない』ということです。

CSSと比較してSCSSは複数ファイルにまたがって記述します。

『どこに何が書いてあるかわからなくなってしまった』という状態は本末転倒です。

自分や一緒に作業する人にとってわかりやすいように使うことが大事だと感じています。

試行錯誤しながらSCSSを使ってみてください。

最後までご覧いただきありがとうございました

みなさんこんにちは

大阪市のWeb制作会社に、未経験でWebデザイナーとして入社した髙井彩加です！

先日久しぶりに高熱が出てしまい、予期せぬところで季節の変わり目を実感しています

寒くなってきたので皆さんも体調に気をつけて過ごしてくださいね

さて、今回は久しぶりにPremiere Proについてブログを書きたいと思います。

なお、今回はAdobeサポートセンターの担当者様からいただいた回答を、

許可を得て掲載させていただいております。

Premiere Proで画面録画は使えない？

10/24に『Blenderにハマってます』というブログを公開しました。

その記事の中でクマのキャラクターができるまでの制作過程を動画にしているのですが、

その時に画面録画した素材が使えずエラーが出るということがありました。

以前会社のYouTubeを編集する時に画面録画した素材を読み込んだ時は、

問題なく読み込むことができたんですよね

Google先生に聞いてみてもこれだ！という情報が出てこなかったので、

Adobeサポートセンターの方にお話を伺ってみました。

原因は？？

Adobeサポートセンターの方からいただいた回答を記載します。

画面収録された素材に関しましては、Premiere Proなどのプロフェッショナル用編集ソフトでは正常に読み込みできない事例が多くございますため、一度ファイル変換してから読み込みできるようになるか、お試しいただきたく存じます。

画面録画された動画は、編集を想定したデータではないため、正常に編集ソフトに読み込まれない場合があるようです。

先日Adobeでは大規模なアップデートが行われました。その影響があるのかを聞いてみたところ…

movファイルについては現状もサポート対象形式であり、また、25.0から画面収録したファイルが読み込めないという既知の問題などの情報はございませんが、

画面収録した動画、スマホやタブレットで撮影した動画、ゲーム画面をキャプチャした動画などは、多くが再生用として生成されたデータのため、内部のメタデータが正確ではなく、読み込みに失敗してしまう事例がございます。

そのため、上記の方法で撮影した素材が全て読み込みできないというわけではないのですが、読み込みできない場合も多くございますので、その際は今回のようにファイル変換後に読み込みをお試しいただきたく存じます。

とのことでした。

アップデートと今回のエラーは関係ないようですね！

ファイルの変換にはエンコードソフトを使うのですが、Adobeが提供しているMedia EncoderもPremiere Proと同じ理由で画面録画の素材を読み込めない可能性があるため、

Adobe社内で共有されている『Hand Brake』というエンコードソフトを教えていただきました。

Hand Brakeとは

無料で使える動画・エンコードソフトです。

ほぼ全ての形式の動画ファイルに対応しており、広くサポートされているMP4、MKV、WebMなどの動画コーデックに変換することができます。

また、容量の大きな動画ファイルを圧縮することもできます。

ダウンロード方法

Hand Brakeダウンロードページはこちらhttps://handbrake.fr/downloads.php

導入時に.NET 6.0 Runtimeのインストールを求められる場合があります。

こちらはMicrosoftのホームページより導入することができます。

導入の仕方はこちらhttps://answers.microsoft.com/en-us/msoffice/forum/all/net/b64c3c4f-f30b-4fcd-894c-016cd4f44831

※「Run desktop apps」の「Download x64」を選び、インストールするとHandBrakeが起動できます。

ダウンロードが終わったらFinderのダウンロードに入っているHand Brakeのdmgファイルをダブルクリックして開きます。

デスクトップにHand Brakeが開かれるので、さらにクリックして下の画像のアイコンをクリックしてください。

これでHand Brakeが起動できます。

起動後の操作方法

(1）変換をしたいファイルをソースから選択

画面左上の「ソースを開く」を押すとFinder（Macの場合）が開かれるので、エンコードしたい動画を選択してください。

（2）解像度の選択

「解像度」のタブを開き、解像度制限のプルダウンで書き出す際のサイズを選択します。

（3）フレームレートの設定

「映像」のタブを開き、フレームレートを「固定フレームレート」にします。また、品質の固定品質のスライダーを右方向へ移動します。

※スライダーを一番右へ移動するとロスレス圧縮となりますが、その分データ量も大きくなりますためご注意ください。

（4）書き出すときの拡張子を選択

書き出したいファイルの拡張子を選択します。MP4を選択しておけば大丈夫です。

（5）書き出すときのファイル名と場所を設定

画面最下部にある「名前をつけて保存」でファイル名を編集できます。

また、書き出し先がすでに指定されていますが、変更したい時は「開く」をクリックしてください。

（6）エンコード開始

上記設定が終わったら、上部の『開始』をクリックします。

詳しいHandBrakeの使い方を載せておくのでよければご覧ください。

最後に

注意点として、お伝えしておきたいのですが、

大きなファイルだとエンコードにすごく時間がかかります。

今回の素材は2時間以上あったのですが、エンコードにも2時間近くかかりました。

エンコード中かなりPCが熱くなっていたので、PCのスペックによっては同時に作業を進めるのが難しいかもしれません。

余裕を持ってエンコードされることをお勧めします

では今回はこの辺でっ！

また次回のブログでお会いしましょ〜

今回は…

今回は、ローディングアニメーションでよく目にする『プログレスバー』について考えてみたいと思います。

先日、お仕事でプログレスバーを初めて実装しました。

『JSでローディングの進捗情報を取って作ってるんだろうなぁ』と思っていたんですが、

そんなことはできないらしい。。。

上のローディングバーは、CSSアニメーションメインで作っています。

動きのタイミングはローディングの進捗状況とは関係なく、animation-delayで調整しています。

それに加えて、JSでアニメーションが終わったタイミングを取得したり、

if (document.readyState === "complete") {
  //ここにローディングが終わっていた場合の処理を書く
}

のようにローディングが終わったを判定し、

クラス名を付与してCSSアニメーションを発火させるなどの処理を行いました。

今回はローディングの進捗状況と連動したアニメーションに挑戦します

できそうな気がする！！！

プラグインを２種類と、自作で作る方法を模索します。

それぞれのメリット・デメリットもまとめるのでぜひ最後までご覧ください

読みながら作業を進める方へ

jQueryを先にダウンロードしておくとスムーズに進められます

こちらからどうぞっhttps://jquery.com/download/

Pace.js（できなかった）

まず初めにPace.jsです。

最初にお伝えしておきますが、このプラグインではローディングの進捗状況と連動したアニメーションを作ることができませんでした

ただ、とても簡単にすぐ作れるので、

簡易的なプログレスバーを作りたい方もいらっしゃるかと思うので備忘録として残しておきます。

プラグインとして用意されているJSとCSSが連動して、自動的に要素が組み込まれる仕組みです。

【公式】PACEhttps://codebyzach.github.io/pace/

メリット

• CSS・JSをHTMLに読み込むだけで実装できるので、時間をかけずに実装したい場合はめちゃくちゃおすすめ！
• ローディングアニメーションのパターンが多い

デメリット

• JSで作られたHTML要素のため、好みのデザインに変えるためにタグを追加することができない（例）プログレスバーの後ろに背景色を指定したいが、タグが1階層少なくてカスタマイズできない
• デザインが古い

では実際に実装してみましょう！

CSSとJSをダウンロード

【公式】PACEのサイトに入って、『Themes』の各項目に『DOWNLOAD』と書かれているところをクリツクすると、

ローディングアニメーションに必要なCSSファイルがローカルにダウンロードできます。

好みのアニメーションを見つけたらダウンロードしてみましょう

続いてpace.jsをダウンロードしましょう。

Star on GitHub ＞ <>Code ＞ Download ZIPをクリック。

pace-masterフォルダ内のpace.min.jsを使います！

Pace.jsのダウンロードhttps://codebyzach.github.io/pace/docs/

これらをコーディング用のファイルに移しておきましょう。

CSSとJSを読み込む

以下の内容をHTMLに記述しましょう！

<!-- headタグ内にCSSを読み込む（今回はLoading Barを採用） -->
<link rel="stylesheet" href="css/loading-bar.css">

<!-- bodyタグの前にJSを読み込む -->
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/pace.min.js"></script>

完成

たったこれだけでローディングアニメーションが作成できます！

作りたいアニメーションにカスタマイズできないのが悲しいですが…

HTMLのコードがJSによって自動生成されています。

bodyタグはもともと自分で書いていますが、.pace-doneはJSによって付与されています。

<body class="pace-done">

  <!-- pace.jsによって差し込まれた要素ここから -->
  <div class="pace pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
    <div class="pace-progress-inner"></div>
  </div>
  <div class="pace-activity"></div></div> 
  <!-- pace.jsによって差し込まれた要素ここまで -->
  
  
  <header class="header">
      <h1 class="logo">もっと秋</h1>
  </header>
  <main>
   <!----------------------
            省略 
   ----------------------->
  </main>
  <footer>

  </footer>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/pace.min.js"></script>

</body>

ProgressBar.js

続いてProgressBar.jsを実装する方法をご紹介します！

HTML内にid=”container”を付与した要素を記述することで、それに反応してJSによってプログレスバーが組み込まれる仕組みになっています。

メリット

• スタイリッシュなデザインのローディングアニメーションを作ることができる
• すでにHTML / CSS / JSのコードが準備されている
• カスタマイズしやすい
• ローディングの進捗状況に合わせて変化を加えられる（例）100％になったら画像を変える

デメリット

• 特に感じなかった

【公式】ProgressBar.jshttps://kimmobrunfeldt.github.io/progressbar.js/

progressbar.jsをダウンロード

https://github.com/kimmobrunfeldt/progressbar.js/tree/master

<>Code（緑のボタン） ＞ Download ZIPをクリックしてダウンロードしましょう

HTML・CSS・JSを記述

『EXAMPLES』の各項目の左下にある鉛筆のアイコンを押すと、

カスタマイズに必要なHTML、CSS、JSのコードが全て用意されています！

なんと便利な(°_°)

HTML：プログレスバーを作りたい場所に要素を追加し、containerというタグを付与しましょう

 <section class="loading">
  <div class="loading-bg">
    <div class="loading-contents">
      <div class="loading-first is-show">
        <img class="loading-ill" src="images/satsumaimo.png"　alt="なにができるかな？">
      </div>
      <div class="loading-finish">
        <img class="loading-ill" src="images/yakiimo.png" alt="やきいもだっ💜">
      </div>
      
      <!-- 任意の場所に#containerを記述する-->
      <div id="container"></div>
      
      </div>
    </div>
  </div>
</section>

<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/progressbar.min.js"></script>
<script>
  var bar = new ProgressBar.Line(container, {
    strokeWidth: 20, //ローディングバーの太さ
    easing: 'easeInOut', //ローディングバーの動き
    duration: 2000, //アニメーションの速さ
    color: '#580e3e',//ローディングバーの色
    trailColor: '#fff', //背景の色
    trailWidth: 43, //ローディングバーの背景の太さ（CSSで#containerの高さと合わせる）
    svgStyle: {
        width: '100%',
        height: '100%',
        borderRadius: '22px'
    }, //#containerを100％として、ローディングバーと背景の幅・高さなどを指定
    text: {
        style: {
        fontSize: '40px', //文字の大きさを変更
        fontWeight: 'bold', //文字の太さを変更
        fontFamily: 'Zen Kaku Gothic New', //フォントを変更
        color: '#fff', //文字の色を変更
        position: 'absolute',
        left: '50%', //デフォルトでは右端。左右中央に移動させた。
        top: '60px',
        transform: 'translateX(-50%)',
        padding: 0,
        margin: 0,
        },
        autoStyleContainer: false //デフォルトの指定を無効にする
    },
    step: (state, bar) => {
      bar.setText(Math.round(bar.value() * 100) + ' %');
  
      if (Math.round(bar.value() * 100) === 100) {
        //プログレスバーが100％になったら画像を入れ替え
        $('.loading-first').removeClass('is-show');
        $('.loading-finish').addClass('is-show');
        
        setTimeout(() => {
            $('.loading').fadeOut();
        }, 2000); //100％になって、2秒経ったらローディング画面を消す
      } 
    }
  });
  
  bar.animate(1.0);  
 </script>

JSではstyle:{ }の中にCSSを入れることで要素に指定を加えることができます。

『font-size』のようにハイフンが含まれるプロパティを記述する場合は、ハイフンを使わず『fontSize』のように本来ハイフンの後ろに続く単語の1文字目を大文字にします。

CSS：もともと用意されているコードを使えば綺麗に実装できます！

/* もともと用意されているCSS */
#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

CSSのカスタマイズ例

/* 画像の入れ替え */
.loading .loading-first.is-show {
    display: block;
}

.loading .loading-first {
    display: none;
}

.loading .loading-finish {
    display: none;
}

.loading .loading-finish.is-show {
    display: block;
}

/* 画像とプログレスバーの間の余白 */
.loading .loading-ill {
    margin-bottom: 45px;
}

/* プログレスバーの指定（必須） */
.loading #container {
    width: 600px;
    height: 43px;
    border: 2px solid #580e3e;
    background: #fff;
    border-radius: 22px;
    padding: 5px;
    margin: 20px;
    position: relative;
}

完成

実際に出来上がったソースを確認してみると、以下の内容がHTMLに生成されてプログレスバーとして動いているのがわかりました。

さきほどJSで加えたCSSもstyle属性に反映されているのがわかります。

<div id="container">
  <svg viewBox="0 0 100 20" preserveAspectRatio="none" style="width: 100%; height: 100%; border-radius: 22px;">
    <path d="M 0,10 L 100,10" stroke="#fff" stroke-width="43" fill-opacity="0"></path>
    <path d="M 0,10 L 100,10" stroke="#580e3e" stroke-width="20" fill-opacity="0" style="stroke-dasharray: 100, 100; stroke-dashoffset: 0;"></path>
  </svg>
  <div class="progressbar-text" style="font-size: 40px; font-weight: bold; font-family: "Zen Kaku Gothic New"; color: rgb(255, 255, 255); position: absolute; left: 50%; top: 60px; transform: translateX(-50%); padding: 0px; margin: 0px;">100 %</div>
</div>

コードが準備されているのですぐに実装ができて、

カスタマイズにたくさん時間を使えるのが個人的にはとても嬉しいなと思いました

最後に

いかがでしたでしょうか??

今回はプロフレスバーの作り方について考えてみました。

本格的にJSの勉強を始めてみて、JSへの苦手意識がなくなってきました。

1時間弱でも、日々取り組み続けると呪文みたいなコードも見慣れてくるものですね

これからも楽しく続けられる方法を探しながら勉強を続けていきます

次はGSAPやってみたいな〜

それではこの辺でっ！

JSきれい ～JavaScript整形ツール～

圧縮されたJSファイルをダウンロードしたのはいいけど、

ファイルの中に何が書かれているか分からず困ったことはありませんか??

JSきれい ～JavaScript整形ツール～にダウンロードしたコードをコピペすると、

綺麗にコードを整えてくれます！

たとえばこんなJSも

for(var key in samples){
	$("#samples").append($("<option>").text(key).val(key));
}

var samples={"":"","東京":"AKB","名古屋":"SKE","大阪":"NMB","博多":"HKT","\u65b0\u6f5f":"\x4e\x47\x54"};
var PRIME_NUMBERS=[
2,3,5,7,11,13,17,19,23,29,31,37,41,43,
47,53,59,61,67,71,73,79,83,89,97,101];

改行されて綺麗にみやすく

for (var key in samples) {
	$("#samples").append($("<option>").text(key).val(key));
}

var samples = {
	"": "",
	"東京": "AKB",
	"名古屋": "SKE",
	"大阪": "NMB",
	"博多": "HKT",
	"新潟": "NGT"
};
var PRIME_NUMBERS = [
	2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43,
	47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101
];

下のような解読する気も起きないコードでも

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6(4 0 m 1){$("#1").8($("<9>").a(0).b(0))}4 1={"":"","東京":"c","名古屋":"d","大阪":"e","博多":"f","\\g\\h":"\\i\\j\\k"};4 l=[2,3,5,7,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I];',45,45,'key|samples|||var||for||append|option|val|html|AKB|SKE|NMB|HKT|u65b0|u6f5f|x4e|x47|x54|PRIME_NUMBERS|in|11|13|17|19|23|29|31|37|41|43|47|53|59|61|67|71|73|79|83|89|97|101'.split('|'),0,{}))

これだったら『ちょっと読んでみようか』という気になれますよね

eval(function(p, a, c, k, e, r) {
	e = function(c) {
		return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(
			c + 29) : c.toString(36))
	};
	if (!''.replace(/^/, String)) {
		while (c--) r[e(c)] = k[c] || e(c);
		k = [function(e) {
			return r[e]
		}];
		e = function() {
			return '\\w+'
		};
		c = 1
	};
	while (c--)
		if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
	return p
}(
	'6(4 0 m 1){$("#1").8($("<9>").a(0).b(0))}4 1={"":"","東京":"c","名古屋":"d","大阪":"e","博多":"f","\\g\\h":"\\i\\j\\k"};4 l=[2,3,5,7,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I];',
	45, 45,
	'key|samples|||var||for||append|option|val|html|AKB|SKE|NMB|HKT|u65b0|u6f5f|x4e|x47|x54|PRIME_NUMBERS|in|11|13|17|19|23|29|31|37|41|43|47|53|59|61|67|71|73|79|83|89|97|101'
	.split('|'), 0, {}))

簡単に使えて一瞬で整形してくれるのでぜひ使ってみてください

ちなみにVS Codeでは【⇧+⌥+F（Shift+Alt+F）】を押すと自動整形してくれます。

思ったように整形されないこともありますが。。。

HTML5 入れ子チートシート

HTML5にはマークアップのルールがあります。

最近コーディングの勉強を始めた方にとっては複雑で覚えにくいものかもしれません。

私自身、『職業訓練校で特に何も言われなかったし大丈夫』と思っていましたが、

社長から『この書き方はHTML5の入れ子ルールでは許容されていない』と指摘していただいたことがあります。

ルールを守っていなくても外側が綺麗に表示されていれば問題ないと感じてしまいがちですが、

長く使われるWebサイトにしていくためにも、ルールを守って綺麗なコーディングを心がけています。

HTML5 入れ子チートシートの使い方をご紹介します！

タグ名にカーソルを合わせると『親』『子』という2つのボタンが出現します。

例えば、divの子要素に何が使えるんだろう？と思ったら『子』をクリックすると

divの子要素で使える要素が黄色になります。

逆にdivの親要素は何が使えるんだろうと思ったら『親』をクリックしてみてください！

親要素で使えるタグが水色に変化します！

これでタグの使い方に迷うことなくコーディングできます

ちなみにこちらのサイトを作られた吉川雅彦さんは吉川ウェブというブログを運営されています。

コーディングのTipsを多数投稿されているので興味のある方は一度ご覧ください！

最後に

いかがでしたでしょうか??

日々業務を進めながら、

少しでも早く正確なコーディングをするためにいろんなツールサイトを調べています。

『これも便利だよ！』というサイトがあればぜひ教えてください

最後までご覧いただきありがとうございました！

次のブログでお会いしましょ~！！

業務の変化

入社して3ヶ月の時に書いたブログ『未経験Webデザイナーの３カ月間を振り返ります！』で書いた業務内容と比較してみたいと思います！

デザイン

デザインの業務ではブログ運営やYouTube投稿のため、アイキャッチやサムネイルをデザインする機会がとても多くなりました。

コーディング

Webisに入社した当初は、HTMLコーディングしかできなかったのですが、

このブログを立ち上げるためにPHPやWordPressを学んで、

HTMLコーディングされたものをWordPress化できるようになりました。

また、クライアントワークを通してShopifyやecforceというECプラットフォームの実装に携わらせていただいたので、

LiquidやRuby、jsonという言語を学ぶ機会もありました。

動画制作

このブログを始めた当初から、業務で動画編集をしたいという目標がありました。

3ヶ月目の時はアルバイトとして勤めており、フルタイムではなかったので、

動画編集のために業務内で時間を取れていませんでした。

4ヶ月目に正社員になり、YouTubeチャンネルを開設してからは、

毎月vlogを投稿していて、

クライアントワークでも動画編集を経験することができました。

お客様との関わり

現在も打ち合わせに参加する機会は少ないですし、

Webisは仲介業者の方からお仕事をいただくことが多いので、

お客様と直接関わることはほぼほぼありません。

3ヶ月目と比較すると、営業活動をするようになったのが大きな変化だと思います。

また、メールで外部の方とやり取りをすることも増えました。

社内業務

動画制作でも述べたように、

SNS運営をはじめ、新規事業の立ち上げ・採用活動・ココナラの運営など、

3ヶ月目と比べると社内業務はかなり幅広くなりました。

一番大きな変化はマネジメント業務が増えたことです。

2024年2月からメンバーが2人増えたので、

業務の割り振り、進捗確認、完了した業務の確認・フィードバックをするという業務が増えました。

私は前職を1ヶ月で辞めているので、

（詳しくは『新卒で入社した会社を1ヶ月で退職して、職業訓練校に通った話。』を読んでみてください！）

マネジメントに関する知識はほぼありません。

不慣れなせいで、少なからずお2人にはご迷惑をおかけしているかもしれません

2人が円滑に業務に取り組めるようにするには、どうすればいいか手探りの毎日です。

精進します！！！！

1日のスケジュール

入社して3ヶ月の時点では6時間×5日間の勤務だったので、

ブログの記事・サムネイル作成など、社内業務に1時間半、

クライアントワークに4時間半とっていました。

今は正社員としてフルタイムで働かせてもらっていて、

担当する業務も幅広くなったため、

日によって社内業務とクライアントワークの割合は異なります。

ある日の1日をまとめてみました

次の1年をどう過ごす？？

Webisに入社した当時、叶えたいと思っていた17個の目標は8個達成し、

4個が対応中、残りの4個はまだまだ先になりそうです。

この1年は興味のあることにたくさん挑戦させてもらいました。

幅広く経験してみて、私はコーディングが好きだなと再認識することができました。

WordPressやShopifyの実装をするために新しい言語を勉強したのですが、

それがとても楽しかったんです

2年目は『コーディングを極める』を目標に頑張りたいと思います。

このことを社長に話してみたら、

『Node.js、three.js、Canvasに挑戦してみたらどう?』と言っていただいたので、

挑戦してみます

来年に今頃には３次元空間をコードで操れるWebデザイナーになれていますように！！！！

最後に

いかがでしたでしょうか??

今回は入社してからの1年間を振り返ってみました。

改めて振り返ってみると、思っていた以上にいろんな変化があったことに気がつくことができましたし、

次の1年の目標も決まったので、悔いのないように取り組みたいと思います。

最後までご覧いただきありがとうございました

2023年の振り返り

2023年を一言で表すなら、『転機』という言葉がピッタリだと思います。

2022年5月、職業訓練校に通いはじめ、

同年11月から始めた就職活動。

年を跨いで2023年2月24日、Webisから内定をいただき、

Webデザイナーとして働く日々が始まりました。

今年の元旦に目標を書いた時、

一番最初に書いたのが『Webデザイナーになる』でした。

1年目とは思えないくらい多岐にわたる業務を担当させていただいて、

充実しまくりの1年だったなと改めて思っています

そしてYouTubeを始めたり、ブログを始めたり、新規事業の立ち上げに関わったり、

新しいことにも沢山挑戦した1年でした。

Webデザイナーになることも含め、元旦に書いた15個の目標が全部叶ったので、

やっぱり目標は口に出すこと・書くことが大事なんだなと改めて実感しました。

最近友人と食事に行った時、

『毎年元旦にウィッシュリストを書いている』という話を聞きました。

もう数年間書き続けているのだそうです。

私も書きたい！！と思ったので、Amazonで可愛いノートを買いました

今は目標や夢を思いついたらリマインダーアプリに書き貯めしていて、

2024年の元旦に念を込めて書こうと思っています

最近は毎日ウィッシュリストのことばっかり考えているので、

頭の中が大忙しです（仕事のことも考えて！）

2024年の目標

仕事の目標 ー スキル

入社当初よりも余裕が持てるようになってきて、1つ1つの業務にかかる時間も短くなってきました。

2024年は、デザインやコーディング、動画編集、イラストについて勉強する時間を積極的に取り、

Webデザイナーとしての引き出しを増やせるように、

こつこつ積み重ねる1年にしたいです。

仕事の目標 ー 人間性

ここだけの話ですが、来年Webisは新しいメンバーを募集します！

（詳細が決まったらお知らせいたします）

教えてもらう立場から教える立場になるので、

私に務まるのかと大変心配ではありますが。。。

自分の担当している業務に加えて、

メンバーのこと、会社のことを考える余裕を作り、

人として成長できるようにしたいです。

仕事の目標 ー Webis

今年の10月から新規事業の立ち上げに向けて話し合いを進めてきました。

回を追うごとに内容も具体的になってきて、

いよいよ来年はアイデアを形にする1年だと思っています。

まだ詳細をお伝えできないのが残念ですが、

私は個人的にとてもワクワクしています。

Webisの今後にご期待ください！！

プライベートの目標

今年の11月に友人に誘ってもらって、

初めてキャンプに行きました。

夜が更け、明けて行く空の様子、

みんなで作ったご飯を『おいしいね』って言いながら食べたり、

焚き火を見て癒されたり、

たわいもない話で盛り上がったり。

普段、一人暮らしでは経験できないことばかりで、

キャンプにどハマりしました

2024年はこだわりのキャンプグッズを揃えてキャンプに行きたいです！

そして、人脈を広げて、人付き合いを大切にする1年にしたいなとも思っています。

2023年後半からフットサルに行き始めて、友達が沢山できました。

大阪に友達がいなかったので本当に嬉しくて

それがきっかけでバスケに誘ってもらったり、

ご飯に誘ってもらったり、

『将来Webサイト作って欲しい』って言ってくれる人がいたり、

新しい出会いに刺激を受け、さまざまな価値観を知ることができました。

Webisに入社できたことも含め、

『出会いってタイミングだな』と思う出来事が今年は沢山あったので、

来年も縁を大切にできるといいなと思っています

最後に

いかがでしたでしょうか??

今回は2023年の振り返りと、2024年の目標についてお話ししました。

2024年の年末にこのブログを書くときは、

2023年よりも充実していたと迷いなく言えるように頑張ります

そのためにもお休み中に沢山パワーをチャージしないと！！！

最後まで見ていただきありがとうございました

寒い日が続きますので、

くれぐれもお体に気をつけて、皆様も良いお年をお迎えください

また来年お会いしましょう

3ヶ月間で担当した業務

4〜6ヶ月目は以下の業務を担当させていただきました。

改めて1年目ではありえない業務の幅広さに自分でも驚いています

それではひとつづつ確認していきましょう！

Webサイト分析

社内のブログサイト（Webis Tech LABO）で、Webデザイン参考サイトを作るため、週3日Webサイトの分析をしています。

分析した内容は、notionというアプリにまとめています。

個人ブログの運営

6月末に本サイトを開設し、現在は週1本投稿を目標に運営しています!

主にブログのネタ集め・記事の作成・アイキャッチのデザインをしています。

Webサイトのデザイン（新規作成・修正）

PhotoshopでWebサイトのデザインカンプを制作しました。

完成したカンプは、当社の社長のチェックの後、クライアントに確認していただきます。

そこでご指摘いただいた点は修正し、再度提出してご確認いただきます。

コーディング（HTMLコーディング、Wordpress）

この3ヶ月間でWordpressを使う案件に多く携わるができました！

更新業務（HTML・Wordpress）

HTMLでは文言の変更、画像の置換をしました。

WordPressではHTMLやCSSで作られたWebサイトを部分的にWordpressにしたり、

HTML同様の更新業務もありました。

ShopifyでECサイトを制作

現在ShopifyでECサイトを制作中です。

職業訓練や就職活動でShopifyの話を聞いたことがなかったので、

社長にお話をいただいた時はとても驚きました！

初めてのことで苦戦はしていますが、

少しずつ理解できるようになって、楽しく取り組んでいます。

Webis Tech Laboの運営業務

自社のブログサイト、Webis Tech LABOに投稿する記事を作成しました。

前述のShopifyのことについてまとめた記事と書籍レビューに投稿しています。

以下からご覧いただけます。

Shopifyについてまとめた記事はこちらから

書籍レビューはこちらから

ぜひご覧ください！

動画撮影・編集

本サイトの連載で投稿している動画の撮影・編集を行いました。

社内向けの書類作成

更新業務で守って欲しい社内のルールをまとめて、PDFを作成しました。

書類は社内のポータルサイトで見れるようになっています。

良かったこと

目標を沢山叶えられたこと

2023年の元旦に、『Webデザイナーとして叶えたい目標』を紙に書きました。

当時12個あった目標のうち、入社半年で4個叶えることができました。

やっぱり目標は書くこと・口に出すことが大事だなと改めて思いました。

実際にWebデザイナーとして働いたことで明確になった目標もあります。

これからも現状に満足せずに上を目指して頑張りたいと思います!!

コーディングできる言語が増えたこと

4~6ヶ月目の一番大きな変化はコーディングできる言語が増えたことです。

私は半年前まで、HTMLとCSSしか書けませんでした。

Webisに入社して、コーディングを沢山経験して、

JavaScriptやjQueryを自分の力で記述できるようになりました。

加えてWordpressやShopifyのコーディングを通して、

新しいプログラミング言語を学び、コーディングできるようにもなりました。

（まだまだ調べながらですが…）

特にWordpressは前述の『Webデザイナーとして叶えたい目標』の1つでもあり、

挑戦する機会を頂けて本当に嬉しかったです

生活リズムを変えたこと

入社当時、遅寝遅起きの生活をしていました。

日付が変わってから布団に入ることがほとんどでした。

朝もギリギリに起きて、バタバタ用意して仕事に行っていました。

ある日体調を崩したことがきっかけで、生活習慣を見直そうと思い、

早寝早起きの生活を心がけるようになりました。

帰宅したら家事や寝る準備を済ませて、11時までに寝る。

朝は6時半に起きて身支度を済ませてから、勉強する時間をとっています。

業務開始時間には、頭がちゃんと起きている状態で、

仕事も頑張れるのでこの生活がとても気に入っています。

クリエイターの交流会に参加できたこと

先日、MEBICという大阪のクリエイターが集まる交流会に参加しました。

社外のクリエイターさんとお話しするのは初めてで、刺激受けまくりでした!!

そして、人生初の名刺交換も経験しました。

とても緊張しました…

まとめ

いかがでしたでしょうか??

今回は入社してからの半年間を振り返りました。

毎月末に社長面談があるので、1ヶ月単位での振り返りはしていますが、

3ヶ月まとめて振り返るのは想像以上に時間がかかってしまいました。

言い換えれば、そのくらい沢山経験を積むことができた3ヶ月間だったということです。

本当にあっという間の半年間でした。

次回は１年間の振り返りをしたいなと思います。

最後までご覧いただきありがとうございました

素敵な1日をお過ごしください

入社後に担当した業務

3ヶ月間で担当させていただいた業務内容です。

①デザイン（Webサイト・バナー・印刷物）

②コーディング

③打ち合わせへの参加

④ブログ

⑤更新業務

3ヶ月間で多種多様なお仕事を経験させていただきました。

業務を進める上で一番大切なことは自分の制作スピードを理解し、納期に対して余裕のあるスケジュールを決めることだと思います。

私の場合現在は、6時間勤務なので自社の業務を1時間半、お客様の案件を進める時間は4時間半です。

4時間半のおよそ７割で1日3時間半としてスケジュールを立てるようにしています。

例えばWebサイトデザインの案件であれば、1ページあたりPCとスマホのデザインがあるので、それぞれどの程度時間がかかるかを考え、何時間で進められるか、いつまでに終わらせるかを予測しスケジュールを組んでいます。

１日のスケジュール

09:50 出社

10:00~10:30 業務開始・朝礼

今日1日のスケジュールの確認をしたり、業務のアイデアを出し合ったりしています。

10:30~11:30 自社メディア関連の業務

ブログに掲載する文章を書いたり、自社のやっているWeb参考サイトのネタ集めをしています。

11:30~13:00 制作

案件の制作を進めます。

13:00~13:45 お昼休憩

たわいもない話をしながらみんなでお昼ご飯を食べています。

業務中はどうしてもパソコンと睨めっこになってしまうので顔を合わせて話す時間が私にとってはとても貴重です。

話しすぎてついつい休憩時間をオーバーしてしまいがちです。

13:45~16:45制作

午前の制作の続きをします。

16:50　退社

勤務時間が終わったら日報を提出し、荷物をまとめて退社します。

学んだこと

3ヶ月間Webデザイナーとして働く中で、多くの気づきがありましたが、その中でも一番大きな学び「デザインの意図を説明することもデザイナーができる価値の提供」ということでした。

これは2ヶ月目に一緒に案件を担当した社外の方からいただいた言葉です。

日常のなかで利用する商品やサービスを使う時、私は商品の強みや機能についての説明をよく読んで取捨選択し、利用しています。

Webデザインもデザインを見るだけでは良し悪しの判断基準がありません。

この日以降お客様には、デザインとなぜこのデザインにしたのかという意図をまとめて一緒にお渡しするようにしています。

また、意図をまとめるにあたってデザインを作る段階で、より1つ1つデザインの意味を考えながら制作を進めるようになったと思います。

今となって考えてみれば当然のことですが、私にとってはとても大切な学びだったと思います。

また日常での自分の何気ない行動も、意識して振り返るとお客様の気持ちを理解するヒントになると思いました。

最後に

3ヶ月間、毎日が学びの連続で目まぐるしく過ぎていきました。1日が一瞬です…

そんな中でも自分のデザインが世の中に出るという経験は言葉に表せないほど嬉しいし、この仕事に関われて毎日充実しています。

これからもWebデザイナーとしての目標や、Webisの一員としての目標を1つ1つ叶えていけるようにお仕事に取り組んでいきたいと思います。

ご覧いただきありがとうございました！

素敵な1日をお過ごしください