WEB制作
やる事
- まずはバナーデザインをできるようにすること
- photoshop、illustratorを自由自在に使えるようにすること
- ページはWEBの勉強も考えて、cssなどを使い回さない。敢えて、1ページづつ作る。毎回がランディングページ
- インプットよりもアウトプットをする
- 毎日、どこかのWEBサイトを見る
- Figmaやphotoshop、htmlなど、常に少しは触れ続ける
- ダメだったら次の仕事、仕事なんて世の中にたくさんある
- まずは、何よりも生活を維持すること!
ポートフォリオ
- デザインと内容を少しづつ進める
ノーマライズcssを設定
- pictureでの画像表示(設定)
CSS
- (済)テキストを選択した時に、背景に色がつく
- スムーススクロール
html {
scroll-behavior: smooth;
}
- ボディ、フォントファミリー設置
- ul、デフォルトのスタイルを消す?
- pのラインハイト
- imgのマックスウィズ、ディスプレイをブロック?
- アニメーションでリンク
- コンテナの幅と中央揃え
- 過去のポートフォリオ
ソース確認、幅は?、どこのブロックで幅の指定を効かせている?
- ボタン、ディスプレイ、インラインブロック
- aタグのホバーとフォーカス
- 隣接セレクタ
- フレックスボックス、アラインアイテムズ
- >、cssで左記の意味って何?
- aタグのテキストの色は、aタグに指定する
- ラストチャイルドでマージンなど、何かの設定をする
- 画像の後ろのシャドウ
- バックグランドカラーに指定しているトランスペアレントって何?
- ラストチャイルドとラストオブタイプの違いは?
- 画像にボーダーラディウス50%を指定して丸くする
- フレックスボックスの中央揃えは、同じ記載場所に
ジャスティファイコンテントか
アラインアイテムズで
センター
コレは主軸と交差軸による
- アラインアイテムズのベースライン指定しては何?
- nth-child
- アラインアイテムズのフレックスエンド、
アラインアイテムズのフレックススタート、
って?
- 非表示にしていたbrを、pcなどで効かせる時は、
displayをinline
- 変化球的なフレックスボックスのサイズ指定
写真参照、p186
- 100vhではなく、dvh、svh、lvh
- バックグラウンド、ライナーグラディエント
- cssの強さ
タグに直書き
ID
クラス、aのホバー疑似クラス
それより低いのが
pなど要素セレクタ、beforeなど疑似要素
- チャプター2、cssの基本(現場のプロから学ぶ CSSコーディングバイブル P69〜)
- ユニバーサルセレクタ
例、ボックスの最後の何かに、マージンボトム0などを指定
(現場のプロから学ぶ CSSコーディングバイブル P75)
- 属性、aのtarget(現場のプロから学ぶ CSSコーディングバイブル P78)
- ファーストチャイルド他(現場のプロから学ぶ CSSコーディングバイブル P83)
- 疑似要素は、1つのセレクタに1つだけ使用OK(現場のプロから学ぶ CSSコーディングバイブル P84)
ビフォー、アフターの両方を使いたい時は、別々に書く、(現場のプロから学ぶ CSSコーディングバイブル P86)
- pictureは、ディスプレイの値がインラインとのこと
- インライン、幅、高さの指定ができない、上下のマージンが適用されない
パディング、ボーダーは適用できる
- マージンの相殺(現場のプロから学ぶ CSSコーディングバイブル P101)
原則として、マージンが直接、接している場合に相殺がおこる、パディング、ボーダーが挟まれば起こらない
- css、演算、calcの使い方、ネットで検索してみる
- 『現場のプロから学ぶ CSSコーディングバイブル』 p186くらいまではけっこう必要(誤字が多いけど)
- 『現場のプロから学ぶ CSSコーディングバイブル』のチャプター4はサイトを作るときの心得、準備など。いつか再読してもいいかも
ToDo
- ブレイクポイントはchromeのデベロッパーツールの幅を使う
- ソースチェック、validation
- Sass、まずはネスト、変数を使う
その他
- クロームでローカルの画像を引っ張ってくる方法って何だっけ?
勉強
- 毎日、色々なWEBサイトを見る
- 参考書で勉強
- YouTubeのチャンネルで勉強
- WEBの流行、最新情報、リテラシーをアップデート
- バナーを真似て作ってみる(吉野家、ソフトバンクなど)
- 良いと思ったバナーをストック
- Sassを勉強する
- ソースツリーを使う
- アドビのサイト、Creative Cloudの学ぶ、ことはじめ、YouTube
- Webの練習
メモ
- 村上訳、柴田訳、訳者によって訳し方が違う。デザインも同じなのだろう。
- reiはギターがめちゃくちゃうまい、でもミュージシャンとしてはそこまで響かない。人それぞれ、得意、不得意がある。デザインも同じなのだろう。
- 奥田民生『俺のギター』の歌詞
♪俺だけが弾くだけのギター、おkれを他人が弾いても、こうゆう音しない
- 奥田民生も、斉藤和義も、ギターが上手い。つまり、練習をしているってこと。
- WEBデザイナー=大工さんの仕事
- バナーを作る時、手書きのラフを書いてみる!?
- サイト制作の疑問
ワイヤーなどのグリッドは、具体的にどう使うの?
- ロケットニュース
絵がうまくなりたい人に贈る、過去一効果を感じた練習法 / 描けばうまくなるはガチ!
数を撃て!!
https://rocketnews24.com/2023/08/29/1978625/
Google
Adobe
Photoshop
Illustrator
After Effects
html、css、Sass
バナーギャラリーサイト
バナー参考サイト
バナーの作り方
パーツ参考サイト
デザイン・ガイドライン
色・カラー
Mac
素材
フォント
ツールサイト
アプリケーション
制作会社(料金)
学習サイト
WEBの求人サイト・転職サイト
その他の求人サイト・転職サイト
ロリポップ
WEBデザイナー
プログラミング
iMacメモリ増設
TIPSサイト
リンク
副業
情報サイト
The Long Goodbye