初出勤から現在までで学んだこと

photoshop

  • 書き出し
  • アクションを登録
  • ショートカットキー
  • 保存の時imgフォルダを作成しないようにする
  • スライスツールを使用した時は、画像を保存する際、ユーザーが定義したスライスを全て選択を選択すると、自分がスライスした画像のみ保存できる。
  • 画像が一枚の場合、長方形ツール(M)を使いcmd+xで切り取りを行う
    (右下のところがレイヤーなのか、背景なのかで切り取りができるかできないか変わる。)
  • 画像を貼り付ける場合は、cmd+cをして貼り付けをする
  • 移動は移動ツール(V)を選択すれば可能
  • 画像を塗る時は塗り絵ツール(G)を使う。さらに、一気に塗りたい時は背景を選び、option+delで一気に塗れる

Illustrator

  • クリッピングマスク

仕様書作成について

  • スクリーンショットはwindowsではクリッピングツールという選択した範囲だけスクリーンショットできる機能がある
  • 画像を縦横比変えずに拡大縮小するにはShift+ドラッグでできる
  • スクリーンショットした画像に文字や枠をするには、Illustratorで行う修正とかが後からしやすい
  • 画像のスクリーンショットは画面をできるだけ小さくして行う。できるだけ余白等をなくす
  • 画像フォルダは、.pdfファイルと同じ階層に配置する。

SouceTree

  • gitflowを使うには、リポジトリの初期化を行ってからfeatureブランチを開始する
  • featureブランチで作業を終えたらfeatureブランチで終了を押す

FTP

  • ファイル検索をするとき検索したい文字を打つとそのフォルダに飛べる
  • バックアップが効かないので、使うフォルダをローカルにダウンロードしておくとバックアップになる。

ギガファイル便

  • データをアップロードして、その時発行されるURLを相手に送れば相手がデータをインストールすることができる

diff

  • 文字の違いがないか確認できるツール

初出勤!!

今日が初出勤だった僕。

初出勤の感想

      1. 大変だったこと
      • 通勤に時間がかかったこと
      • 緊張で…頭痛
    1. 良かったこと
      • 今までやってきたことは無駄ではなかった
      • 時間が経つのが早かったこと

初出勤でやったこと

  1. セットアップ
  2. 業務の確認
  3. ソフトの解説

初出勤を終えて

無事に一日を終えて一言”疲れたー”です。笑
一日働くのが、こんなにーも大変だったとは…
でも、このコロナの中雇ってくれた会社には感謝だし、できるだけ早く業務に慣れて付加価値を付けれるように頑張ろう!!

明日もよろしくお願い致します。

単位の重要性について(px,%,em,rem,vw,vh…)

単位の重要性については、最近作品を作り始めて、重要性に気づきました。

これまでは、px,%を多用していましたが、vw,vhを使った方が良い場合が多いですね。

px:10pxだと、画面が小さくなろうと指定した10pxのままです。

%:親要素の値によって変わります。
  例:body{font-size: 20px;} p{font-size: 80%;}
  この時のp要素のfont-sizeは、16pxになります。

em:これも%と同様に、親要素の値によって変わります。

rem(root em):ルート要素のフォントサイズによって値が変わります。
       ルートとは、最上層に位置する(htmlタグ)のことです。
       つまり、<html></html>のことです。
       remのいいところは、親要素によって値を一つずつ変えなくていい点です!!

vw(viewport width):これは、viewport(表示領域)の幅に合わせて自動で指定してくれます。
          vwのいいところは、レスポンシブなどのPC、スマホ、タブレットなどで画面いっぱいに表示したい時など、に100vwとすると、どのデバイスでも画面いっぱいに表示することができます。
vh(viewport height):上記のvwの高さバージョンです。使い道としては、画像を中央に正確に配置したい時に、要素の高さが分かっていれば、marginプロパティでtopとbottomの値を[(100 – height)/2]vhに設定するだけで表示できます。
さらに、1カラムで表示したい時にも、100vhで簡単に指定できます。

なぜ、vw,vhを進めるのか、これには、理由があります。最近は、スマホでWEBページを見るユーザーが多くなりました。
つまり、WEBページを作る側もそれに合わせる必要が出てきました。
いわゆる…レスポンシブデザインですね!!
モバイルファーストと言うこともありますしね!!

さらに、これを後押ししているのが、googleがデザインパターンとして、レスポンシブデザインを進めているところもあります。

リファレンス:https://yattokoo.com/css-tani#4

もりけん塾
もりけん先生ブログ

background-sizeについて

background-sizeは要素の背景画像の大きさを設定します。

一つずつ見ていきます。

値としては、
contain:画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。

cover:画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。

auto:縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。

たったこれだけのことですが、背景画像を入れる時には、大きめの画像を用意して、containを指定するときれいに表示されます。

ここでは、取り上げていませんが、backgroundプロパティには、グラデーションをつけることができます。(background: radial-gradient)これらを使うとさらに、きれいに画像をいじれます笑

css3は、photoshop,illustratorもいらないかも!?(そこまでではないですが…)

もりけん塾
もりけん先生ブログ

cssフォントサイズの指定の違いについて

cssのフォントサイズの設定で使う物は、大きく分けて2つです。
1、絶対値:10pxと決めれば10pxになります。
2、相対値:親要素のサイズによって変わります。

1、絶対値:px
2、相対値:%,em,rem,

1、のpxについてです。
これは、親要素などに関係なく指定した要素の文字サイズを変化させます。

2、相対値
・%:親要素のfont-sizeを基準にフォントサイズを変更します。
例:css

html {
  font-size: 32px;
}

h1 {
  font-size: 2em; /* -> 64px; */
}

span {
  font-size: 0.5em; /* -> 32px; */
}

・em:これも同様に親要素などに関係なく指定した要素の文字サイズを変化させます。
例:css

html {
  font-size: 32px;
}

h1 {
  font-size: 200%; /* -> 64px; */
}

span {
  font-size: 50%; /* -> 32px; */
}

・rem(root em):文章のルート要素、つまり、html要素のfont-sizeを基準にします。
例:css

html {
  font-size: 32px;
}

h1 {
  font-size: 2rem; /* -> 64px; */
}

span {
  font-size: 0.5rem; /* -> 16px; */
}

pxだとなぜいけないのか…
ブラウザによって表示方法が変わるからです。
これは、fontのデザインにも当てはまりますよね。それを防ぐのによく使われるのは、google fontですよね。

もりけん塾
もりけん先生ブログ

overflowプロパティが効かない…について

結論は、
子要素にposition: absolute;があると効かないです。
親要素にposition: relative;を加えれば解決します。

overflowプロパティについてみていきたいと思います。

overflow:画像がボックスの要素内に内容が収まらない場合に、指定するプロパティです。

visiable:ボックスの要素からはみ出て表示される。
hidden:ボックス内に収まらない場合は、収まらなかった部分は非表示となる。スクロールバーも表示されない。
scroll:内容が僕すに収まらない場合、スクロールバーなどが表示される
auto:ボックスに収まらない内容をどう表示されるかは、ユーザーエージェントに依存する。
 ユーザーエージェント:ホームページを見るとき、各ブラウザが使用しているパソコンのブラウザやOSの情報を発信しています。この情報をユーザーエージェント(User-Agent)と言う
no-display:内容がボックスに収まらない場合は、display:noneが表示されたかのようにボックス全体が削除される。
no-content:内容がボックスに収まらない時は、visibility: hidden;が表示されたかのようにボックス全体が非表示となる。

以上です。

もりけん塾
もりけん先生ブログ

a(アンカータグ)タグ 擬似クラスについて

aタグに用いる擬似要素として、挙げられるのが…

  1. :link 未訪問リンク
  2. :visited 訪問済みリンク
  3. :hover カーソルが重なった時
  4. :active クリックしてから離される時まで

擬似クラスはセレクタに続けて指定します。半角スペースを入れると無効になります。

擬似クラスには、優先順位があります。(上記の順番で!!)

HTML
<p><a href=”#”>リンクテキスト</a></p>

css
a:link {・・・
}
a:visited {・・・
}
a:hover {・・・
}
a:active {・・・
}

:visited擬似クラスは、ブラウザに履歴が残っていると、色を変更しても確認はできません。

実際の制作では:link、:activeは指定せず下記のようにa要素と:visitedと:hoverのみで指定するケースが多くなっているそうです。

:visitedを指定しない場合はa要素の指定と同じになります。

:hover擬似クラスはa要素以外にも使用できます。主にJavascriptというプログラムと併用して利用される場合があるそうです。

最後に今回参考にさせて頂いた、サイト

aタグ内の画像の枠線について
aタグでimgタグを囲むと古いバージョンのブラウザでは1pxの青色のborderが付きます。これはブラウザのデフォルトcssでborderプロパティが設定されているためです。リセットCSSであらかじめimg要素のborderをなしに設定しておきます。

もりけん塾
もりけん先生ブログ

cssで要素を中央に配置する方法

cssを使って、画像を中央に配置したいときどうしますか?
今回は、それをいくつか紹介します。

早速行ってみます。

1、text-align: center;を使う(※インライン要素のみ)
2、margin: auto;を使う(※ブロック要素のみ)
3、img要素は、インライン要素なので、1、2を踏まえると、display: block;を使ってブロック要素にしてしまう。
4、display: flex;を用いる方法

まだ、いくつかありますが、よく使いそうなものをピックアップしました。

1、2、3、はそのままです笑

4、については、少し説明します。

HTML
<div class=”flex-Box”>
 <div class=”flex-Img”>
  <img src=”./img/hoge.jpg” />
 </div>
</div>

css
.flex-Box {
 display:flex
 justify-content: center;(boxを左端から右端へのレイアウト位置)
 justify-items: center;(boxを上から下へのレイアウト位置)
}

ちなみに、ベンダープレフィックスです(まだcssで試験的運用なcssプロパティということです。)

リファレンス:https://webkcampus.com/201501/949/

もりけん塾
もりけん先生ブログ

background-imageで画像をぼかさずフルサイズにする方法

background-imageで画像をぼかさずにフルサイズで表示する方法。

HTML
<div class=”img”>
 <img src=./img/a.jpg alt=”” width=”” height=”” />
 <img src=./img/a.jpg alt=”” width=”” height=”” />
 <img src=./img/a.jpg alt=”” width=”” height=”” />
</div>

css
img {
height: 100vh;
width:auto;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}

こんな感じです。
順番にみていくと、

1,height: 100vh
viewport heightと言って、1%=1vhです。
じゃあ、%使えばよくね?と思われるかもしれませんが…
簡単に言うと、子要素の%は、親要素の%に左右されます。

一方、viewport単位は、viewportの寸法を基準としているため、要素の幅、高さ、サイズをviewportに合わせて設定しなければならない状況でとても便利です。

2,width:auto;
セクションの横幅の指定です。他の要素の指定を基に自動算出させるためautoを指定します。

3,背景画像のサイズを指定しています。
autoは横幅を、100%は高さの指定になります。ここでは単位が%であるところに注意です。

4,background-position: center;
これは、要素いっぱいに画像を広げた際に、画像を中央に寄せる指定です。

5、background-repeat: no-repeat;
ただ単に、画像を繰り返すかどうかの設定です。
これは、背景画像を繰り返して使うときには、よく使います。

リファレンス:https://natsukimemo.com/css-fullscreen

もりけん塾
もりけん先生ブログ

クラス名,id名 命名について

HTML,cssで作品を作っていて思ったのが、意外と、クラス名、id名についての設定で時間をとることが、多くなりました。

ブロックなど親要素で使えそうなclass名

  • container : コンテナ
  • main : メイン
  • global : グローバル
  • home : ホーム
  • hero : でかいブロック。bootstrapのサンプルにある
  • inner : 中味。
  • outer : 囲っているもの。親。wrapperと同じ。
  • wrapper : 囲っているもの。親。

ブロックや子要素で使えそうなclass名

  • articles : 記事の一覧
  • comments : コメント一覧
  • contents : contentを複数囲むなら
  • users : ユーザーの一覧

フォーム要素で使えそうなclass名

  • form form要素関連
  • field input要素関連
  • radio radiobox要素関連
  • checkbox checkbox要素関連
  • submit 送信

基本的には日本語を英語に直せばいいようですが…笑

実際に、クラス名、id名の命名について調べました。
リファレンス:HTMLとCSSクラスでよく使う命名について

こういうクラス名やid名をつけるのは、慣れと、実際に作られているホームページを見て、実際に真似することが、上達の鍵ですね!!

以上です。

もりけん塾
もりけん先生ブログ