Font Awesome

Web上でよく利用される上記のようなアイコンをアイコンフォントという文字として使うことができるツールです。画像ではなく文字なので、大きさ・回転・重ね表示、そして色までも変更することができるという優れもの！もちろん無料で、商用利用も可能です。

ライン・イラスト

スマートな線画イラストが配布されています。どれもシンプルで使いやすいと思います。ファイル形式はJPEGのみ。色を変えることができないのが難点です。

FLAT ICON DESIGN

フラットなアイコンイラストがまとまっています。どれもおしゃれで超ハイクオリティ。背景色を選ぶことができるのもこのサイトの良いところだと思います。

ハンコでアソブ

タイトルの通り、ハンコ風のデザイン素材が配布されています。シンプルな形のものが多いのですが、どれも味があり、とてもかわいいです。チラシやウェブサイトにちょっとしたアクセントを加えたいときに使えそうですね。

まとめ

普段から、イラストの素材サイトを探していますが。無料でもずいぶんとおしゃれで高品質なものが利用できるサイトが多いと感じました。また良いサイトを見つけたら追記していきたいと思います。

Deeplの紹介

DeepL翻訳は、2017年8月28日にサービスを開始した無償のニューラル機械翻訳サービスで、ドイツのケルンに本拠地を置く DeepL GmbH が開発した。Google 翻訳よりも精度が高く、微妙なニュアンスのある翻訳ができると肯定的な報道を受けている。

https://ja.wikipedia.org/wiki/DeepL%E7%BF%BB%E8%A8%B3

Deeplの拡張機能でできること

２つの機能が利用できます

• 読む: ブラウザ上の文章を任意の言語に翻訳して表示できる
• 書く: ブラウザ上に入力している文字を任意の言語に変換できる

書く機能が画期的

この機能を使えば、ブラウザ上のSlackやTwitterやGmailなど日本語で書いたものを翻訳して英語など他の言語で発言し放題です

ぜひ皆さんも使ってみてください。

日時

2月3日

場所

トライデントコンピュータ専門学校
https://computer.trident.ac.jp/

作品

・Web サイト制作
・フロントエンドプログラミング（アプリ）
・UI/UX

この3種類の中から一つを選び、学生一人ひとりが制作します。

自分は、Webサイトの制作をしています。
つまみ細工とアートプラスターの制作販売をしているひとのサイトを制作させて頂いています。
はじめての事だらけで、四苦八苦しながらがんばっています。

ぜひお越しくださいい

２０２１年の振り返り

今年もあと２週間あまり、今年も新型コロナウイルスの影響で大変な年となりました。

４月にトライデントに入学してから、もう12月なのかと思うぐらいの自分にとって激動の年でした。

入る前はネットを見るときに使う時しかパソコンをさわらない人間にだった自分にとってHTMLやcssやJavaScriptなどのプログラミング言語は全くの未知の世界でした。そんな自分の環境や意識を変ようと思い「若年者ものずくり競技大会」に挑戦しました。

「若年者ものずくり競技大会」に挑戦して気づいたこと・思ったこと

　入学して、HTMLも書いたことがない、プログラミングのプの字も知らない状態で、挑戦しました。
本番の日まで、毎日のように遅くまで補習を受けました。HTMLやCSSはもちろんのことSCSSのBEM形式の書き方やJavaScriptやjQueryの基本的な部分からAPIの取得など、短い期間の中で四苦八苦しながらも学びました。その知識を持って本番に挑みました。

　本番は愛媛で行われました。出場者の中には同じ愛知県から来ている人もいました。
詳しい競技の内容などは、下の記事をご覧ください

https://tridentwebdesign.blog.fc2.com/e/jakunen2021

　競技が終わってから、それぞれの人の作品が見れるのですが、高校生の人のほうが自分よりもレベルが高くて実力の差を痛烈に見せつけられました。

夏休みにブログを作る

　愛媛では、自分のレベルを知ることができそこから1ヶ月がたち、今度は自分のブログの制作し始めました。
初めて1からすべてをデザインしたので、ものすごく大変でした。もともとデザインは得意ではないので、ピンタレストや海外のギャラリーサイトを見漁ってデザインしました。XDでデザイをしたのもこれが初めてでした。

進級制作に取り掛かる

　なんだかんだでブログが形になり、次は進級制作の制作が始まりました。
現在進行形で制作を頑張って取り組んでいます。

　自分でクライアントを見つけてきて、ヒアリングをしてデザインをしてコーディングまでするのは初めてのことばかりで大変でした。詳しい話は、進級制作が終わってから改めて記事を書きたいとおもいます。

2022年の抱負

　2021年も新しい技術や知識や機会に飛びついていきましたが、2022年も続けていくことに加えて、積極的にアウトプットして行きたいです。
　生活面では、朝起きられないので、朝が強くなりたいのと整理するのが苦手なので、整理整頓が上手になりたいと思います。

scssってなに？

Scssとは、CSSを効率的に書くことが出来るメタ言語のことです。

正式名称は「Syntactically Awesome StyleSheet」の略で、直訳すると「文法的に素晴らしいスタイルシート」です。

なんかかっこいいですね〜(^o^)

Scssを使うことで、CSSよりも作業効率やメンテナンス性が向上し、コードの記述量も減らすことが出来ます。

一度Scssで書くことに慣れてしまったら、もうCSSには戻れないですね…。

効率よく勉強するために、Scssを使っていきましょう！

VSコードでScssを作ろう！

scssのメリット・デメリット

便利なscssですがもちろんメリット・デメリット両方あるので紹介していきます

メリット

コーディングの作業効率がUP！！

理由としては

• ネストを使用することで、セレクタやプロパティの記述量が減ります。
• 一度定義したスタイルは後で簡単に呼び出せます。
• 複雑なコードも再利用できます。

メンテナンス性がUP！！

• 変数で値を使い回すことができる
• 四則演算ができる
• 関数が使える

例として、メインカラーやサブカラー、カラムの幅など、よく使うものを変数にしておくことで、たった1箇所の変数を書き換えれば、同じ変数を使っている部分の修正が全て済んでしまいます。

他にもいろいろと便利なことがあります

デメリット

環境を準備するのがめんどくさい

Sassファイルはそのままではブラウザで認識できません。なので、「コンパイル」という作業をして、CSSに変換してあげる必要があります。そのために必要なツールをインストールしたり設定をしたりしないとならないのが難点です。これが面倒で導入しない方も多いです。

全ての人がSassを導入しているわけではない

最大のデメリット。例えば公開まではこちらで作業をして、公開以降はクライアントでメンテをしていくなんて場合も多いでしょう。逆も然りで、クライアントの既存サイトを修正していくこともあります。そんな場合、クライアント側がSassを導入していなければCSSを編集していくことになり、Sassは使えなくなってしまいます。

環境を準備使用

scssを書く環境を作りましょう。

今回は、VSコードでscssを書く方法を紹介していた記事を見つけたのでそちらを参考にしてください。

「VSコードでScssを作ろう！」

sccsの書き方

ネスト

セレクタをネストで書く

HTML

<nav>
   <ul>
      <li><a href="">TOP</a></li>
      <li><a href="">デザイン</a></li>
      <li><a href="">プログラミング</a></li>
      <li><a href="">商品</a></li>
   </ul>
</nav>

CSS

nav {
  padding: 0 20px;
  background: #fdbebe;
}

nav ul {
  list-style: none;
}

nav a {
  text-decoration: none;
}

SCSS

nav{
  padding: 0 20px;
  background: rgb(253, 190, 190);
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
}

変数に代入して使い回し

CSS

body{
 background:#ccc;
}
header li a{
color:#fdbebe;
}
footer{
 background:#ccc;
}

SCSS

$main-color:#ccc;
$sub-color:#fdbebe;
$main-font:serif;


body{
 background:$main-color;
}
header li a{
color:$sub-color;
font-family:$main-font;
}
footer{
 background:$main-color;
}

まとめ

今回は、scansの使い方を説明しました。まだまだ、便利な機能や書き方はあるので興味を持った方は調べてみてください。

JavaScriptを絶対身につけるをテーマに学習していこうと思います。『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』を参考に記事を書いています。

DOMとDocumentオブジェクト

DOM

Webブラウザは、HTMLファイルを読み込み、Webページを表示します。JavaScriptのプログラミングは、このWebページを直接操作できません。DOM(Document Object MOdel)と呼ばれる、文章を構造化したものを通して HTML文書を 利用するための仕組みです。

DOMツリー

上の図のように、<html>タグを頂点とするツリー構造を持ち、この階層のことを DOM（Document Object Model）ツリーと言います。

ノード

DOMはWebページの内容を、ツリー状に構造化したものです。 開始タグから終了タグまでの塊、属性、テキストをすべて ノード(Node)と呼びます。HTMLタグに対応するノードや、内部の文字列に対応するノード、コメントに対するノードなどで、DOMのツリーは構成されます。
一番の元になるノード（html）のことをルートノードと言います。

Windowオブジェクト(Windo)

Windowオブジェクト使う準備

Windowオブジェクト は、ブラウザのウィンドウそのものをあらわす大きなオブジェクトで、Webページが表示されるコンテンツ領域(Documentオブジェクト)を始めとする様々なオブジェクトを束なています。

ウィンドウ(タブ)の生成と同時にwindow(先頭が小文字)という名前のグローバル変数が内部的に生成されるので、自分でインスタンス化しなくてもすぐに使えます。

Windowオブジェクトのプロパティ(内部オブジェクト)

Windowオブジェクトは、たくさんの内部オブジェクトをプロパティとして持っています。

主要な内部オブジェクト

Windowオブジェクトのプロパティやメソッドを使うときはオブジェクト名の”Window”を省略できます。

オブジェクト記法

名前と値のペアをプロパティ、値のつける名前のことをプロパティ名と言います。オブジェクトは{}で括って定義しプロパティ名と値を:(コロン)で区切り、ペアを,(カンマ)で区切ります。Windowオブジェクトもこの記法で表現できます。

Windowオブジェクトの操作

入れ子 になっているプロパティは、次のように.(ピリオド)を複数つなげることで取得できます。

console.log(window.document.URL);//ファイルの場所が表示されます。

オブジェクトの操作は、現在のJavaScriptプログラミングでは、理解することが必須です。

1. 取得は、オブジェクト名.プロパティ名(キー)もしくは、オブジェクト名[“プロパティ名(キー)”]
2. 入れ子(ネスト)は.(ピリオド)もしくは、[](ブランケット)でつなぐ
3. オブジェクト名.プロパティ名=値もしくは、オブジェクト名[“プロパティ名”]=値で、更新・追加ができる。

はじめに

JavaScriptを絶対身につけるをテーマに学習していこうと思います。『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』を参考に記事を書いています。

chapter03 配列を学ぼう

05 連想配列とは？

配列の問題点

以下のコードは受験者の一覧を出力する例ですが、受験者名の配列に新井太郎さんを書き忘れてしまいました。

//受験番号と受験者名の配列
let id= [20224,20031,20193];
let meibo = ["井上次郎","山本花子"]; //書き忘れた！
//受験者の一覧を出力
console.log(id[0] + meibo[0]); //20224:井上次郎
console.log(id[1] + meibo[1]);　//20031:山本花子

本当はmeibo[0]に新井太郎さんが入っているはずなのに、書き忘れたために要素番号がずれてmeibo[0]が井上次郎さんになり受験者の一覧がおかしくなっています

//20224:井上次郎
//20031:山本花子

受験番号と受験者名はセットで管理されるべきデータです。しかし、上のコードは受験番号名と受験者名が別々の配列になっているので、どちらかの配列が変わると順番が合わなくなってしまいます。

連想配列

JavaScriptには連想配列という特別な配列の書き方が用意されています。

連想配列は、配列要素を入れる箱に名前付きの鍵をかけた形になります

普通の配列との大きな違いは、meibo[“20031”]のように鍵の名前を指定して中身が取り出せる点です。鍵の名前があっていればよいので、配列要素が何番目に入っているかを気にする必要がありません。

連想配列という名前は、鍵の名前からデータの中身を連想できる配列から来ています。

連想配列ではなくオブジェクト

JavaScriptでは「連想配列」は使いません。他のプログラミング言語で言う連想配列のことを、JavaScriptではオブジェクトといいます。

『図解！JavaScriptのツボとコツがゼッタイにわかる本「”超”入門編」』では「連想配列」で解説されていますが、JavaScriptでは「オブジェクト」、他の言語では「連想配列」と呼びますので、同じようなもの（keyとvalueのセット）と覚えておいてください。

オブジェクトの宣言と初期化

鍵の部分を“キー”と呼び、キーに対応するデータのことを値(value,あたい)と呼びます。このキーと値のセットをプロパティと呼びます。オブジェクトを宣言するには、キーと値を半角コロンでつなげたものを半角カンマで区切って書き並べ、全体を{}(オブジェクトリテラル)で囲みます。

let 変数名 = {キー:値, キー:値, キー:値};

オブジェクトの中身（配列要素）を取り出そう

キーを指定して取り出す

オブジェクトの中に入っているデータを取り出すには次のように書きます。

変数名["キー"]

オブジェクト（meib）の値(受験者名)をキー（受験番号）で取り出して、consoleに表示させてみよう。

let meibo ={
 20224 : "新井太郎",
 20031 : "井上次郎",
 20193 : "山本花子",
}
console.log("20031:" + meibo["20031"]); //受験者の20031の受験者名出力

20031:井上次郎

と出力されたら成功です。

オブジェクトの要素を取り出すとき、meibo[“20031”]のようにキーの両端に””で囲むことに注意しましょう。meibo[20031]にすると要素番号(添字)を意味します。

オブジェクトの中身(配列要素)を書き換える

好きなものは、ゲーム、You Tube、Marvel、うさぎです。

Webデザインを学んでいるWebデザイン学科の専門学生です。

このcocoroブログでは、プログラミング・デザイン・学習・趣味の４つのテーマをメインで記事を書いていきます。

これまでにブログを運用した経験はないので、初めてのことばかりですが最初は、20記事を目標にして頑張っていればいいなと思っています。

投稿頻度は、週１〜2記事書いていきたいと思います