Webを学んで2か月目
筆者はWeb関連の技術を職業訓練校で学ぶひと
前々から興味のあったWeb関係の仕事・知識について切磋琢磨のお勉強中。
今後、ブログの更新にもWebの知識は必要だろうなというのもありまして。
2か月前まではWebの知識がからっきしなわたしでしたが、現段階ではHTML・CSSを学んでなんとなぁく形にするところまでできるようになりました。
今は実習で課題作ったり、自身で調べて実践してみたり。
学んでいった知識を今後は弊ブログ「廻る猫と考える人」で少しずつでも少しずつでもアウトプットできたらと思います。
お役に立てるようであればこれ幸い。
Web現場で働く人に聞いた・Web関連お役立ちサイト8選
今回はWeb関係のお仕事を現職としている方からおすすめしてもらった
『Webに関わる覚えておいて損のないサイト』
をご紹介いたします。
サイトのワイヤーフレーム、画像やカラーパターンで見た目をそれなりにしたい！
サイトを構築する上で『全体の配色』や『画像の配置』に悩まされることが多いのですが、
そんな迷える子羊にヒントになってくれるのが以下の２つのサイト。
▼Palettable
Palettable簡単に言うと『好き！嫌い！を選択するだけでベースとなる色を５つまで表示してくれるサイト』です。
「次に作るサイトこんな色使いたいな～（ぼんやり）」と思っているひとはとりあえずこのサイトで近い色を５つまで表示させると便利です。
シンプルでとっても使いやすい。
Palettableの出力画面表示された色は『URL』と『PNGファイル』で保存できます。用途に合わせて使い分けましょう。
▼Lorem Picsum
Lorem Picsumかっちょいいダミー画像サイト。
指定したサイズの画像がランダムで出力されます。
Webサイトで『仮に画像を置きたいとき』に非常に重宝します。
上記画像の高さと幅をURLに打ち込むと、指定したサイズの画像がランダムで出てきます。
「レイアウトはできたけど、実際にとりあえず画像入れて表示させたいな～」というときに便利。画像を入れてみると意外と出てくるデザインの良し悪し。
class名のルールどうしよう！
▼CSSのクラス名を決めるときに使うリストをつくりました(Qiita)
QiitaCSSを打ち込む際に『CLASS名どうしよう～～』と悩むことはWeb初心者では誰でもおちいる罠。
Class名の一部参考最初のころは適当に『box01』とか『main-navi』とかとりあえずわかれば良いかくらいでClass名を作っていましたが、
上記のサイトにあるClass名を参考にするだけでだいーぶ見やすくなりました。
コメントアウトとかも駆使はしていますが、初めてチームでサイトを作るときとかにはこちらを参考にしてみるのも良いかも。
ちなみにCSSの考え方については『CSS設計』と呼ばれるテンプレートがいくつか存在します。
その中でも今年（2020年）の3月に札幌の人が出版した本もあるので、Webに興味がある方は頭に入れておくと良いかと。
「CSSの世界を平和にしたい！」という願いの元つくられたという噂の本。
現在読み進めてはいますが、中級者以上向けな印象。
▼HTMLとCSSでカレーライスを作った(Qiita)
HTMLとCSSでカレーライスを作った上記と同じQiitaさんが作った『無駄に洗礼された無駄のない無駄な技術』の巻。
「画像編集ソフトとか使わなくてもここまでできるんだよぉぉ！」と思い知らされます。
positionとかbox-shadowの応用方法が非常にわかりやすくきれいにまとめられています。
どの部分がどのように作られてるか、実際にソースコードをコピーしたり消したりしながら見てみるのが吉かと。
なんかデザインの参考になるいいサイトはないの！？
▼bookma!
bookma!ぶっくま！
格好良いWebデザインを『パソコンでの見た目』と『スマホからの見た目』の両方を横に並べて表示しているサイト。
いわゆるレスポンシブルというものが一目でわかります。
パソコンとスマホの両方に対応させるためには、大きい画像やメニューの配置など悩むことが多いので非常に参考になります。
▼Web Design Clip
Web Design Clipこちらも格好良いWebデザインが数多く更新されています。
今作っているサイトや今後作りたいサイトの構想を練る際にぜひ。
上記２サイトに関しては今のWebデザインの流行を追うのにも役立つので、ブックマークして定期的に覗くようにしています。
タイポグラフィを学ぶならまず触ってみよう
【タイポグラフィとは？】
定義がやや曖昧になっており、主に以下の２通りで使われている。
１．適切なフォント種類を選び、美しく配置すること
２．文字を華やかに、アートのようにデザインする手法
サルワカさん【タイポグラフィとは？】より引用
文字を美しく見せるのはWebでは必須ともいえる要素。
とはいえタイポグラフィの何から手を付ければよいかわからない！という人も多いのではないでしょうか。
そんな方は下記２つのサイト。
『文字のいろはをゲーム感覚で教えてくれるサイト』をご紹介。
▼KERNTYPE
KERNTYPEカーニング（字詰め）の練習をゲーム感覚でできるサイト。
文字と文字の間の調整、いわゆる『字間の調整』はWebデザインでもポスターのデザインでも必須ともいえるスキル。
文字が数ミリ詰まってるだけで見やすさやジャンプ率が変わるという。ふしぎ。
▼SHAPE TYPE
SHAPE TYPE上記のKERNTYPEの兄弟サイト。
現存するフォントの形をできるだけ再現しよう！というサイト。
Webを習いたてで、Adobe Illustratorなどを触る前にやっておくと、ベジェ曲線の扱いがなんとな～くわかるかも。
Web関連お役立ちサイト８選・まとめ
【画像やカラーパターンで見た目をそれなりにしたい！】
▼Palettable
▼Lorem Picsum
【class名のルールどうしよう！】
▼CSSのクラス名を決めるときに使うリストをつくりました(Qiita)
▼HTMLとCSSでカレーライスを作った（Qiita）【なんか参考になるいいサイトはないの！？】
▼bookma!
▼Web Design Clip
【タイポグラフィを学ぶならまず触ってみよう】
▼KERNTYPE
▼SHAPE TYPE
教えてくださった方の『わーるどわいどうぇぶな業種なので、知識の共有大事ですよ。』という意見に激しく同意。
今後もちょっとずつ、見つけたり実際に触ってみて良いなと思ったWeb関連の知識を更新していきたいと思います。
