WEB学習の記録
テキストエディタ
【上級】Web試験対策 Webクリエイター能力認定試験の勉強
CSS基礎
メモ
HTMLの基礎
これからの記録について先日、遅ればせながらWEBの世界に少し足を踏み入れました。 学習を始める年齢としては、かなり遅いですが やらない事には進まないですし、今が一番…
1.Code Spell Checker スペルが違うところを波線で表示してくれます。 ちょいちょいスペル間違い起こすので便利です。 2.Path Autocomplete 外部ファイルのパス入…
メインカラー 25% 【使用場所】ナビゲーション・フッターなど ナビゲーションやフッターなどあまり面積が大きくなり過ぎないところに使用する。 ベースカラー 70% 【…
1.vscode-icons ファイルなどにアイコンを付けてくれるので視覚的にとても操作しやすくなります。 2.indent-rainbow 薄い色なので若干わかりにくいのですが、インデ…
AdobeのCreativeCloudを止めたのでテキストエディタをVSCodeを使ってみることにしました。 Dwは遥か昔に少し触ったことがあるレベルで、ここ最近はMeryなど機能があまりな…
ウェブアクセシビリティ 音声ブラウザで読み上げに適している書き方 令和4年10月14日 imgにはalt属性を付けてわかりやすい画像の説明を付ける。
配色について 最初に配色を決めておくとデザインしやすくなる。 メインカラー コーポレートカラーやロゴのカラーでメインに使っていく色 サブカラー メインカラーと一緒…
* + * フクロウセレクタ ユニバーサルセレクタについて調べていると気になるセレクタが! フクロウセレクタ * + * これがふくろうの顔に見えるからだとか。 なんだかか…
*{~}ユニバーサルセレクタ *アスタリスクをセレクタに指定すると、すべての要素を対象にスタイルを適用できる。 単独で指定する以外にも他のセレクタとの組み合わせで…
要素名{~}タイプセレクター 要素名を各セレクターに指定すると、指定した要素にスタイルが適用される。 最も基礎となるセレクター。 h1 { color: #000 ;}p { backgroun…
なんだかここ最近ぐっと寒くなって、起きるのも動くのも嫌になってます。 それに付け加えnoteの更新もさぼりたくなるのです。 デザイン考える日なのに、すっかりネットショ…
<title>~</title> 文書のタイトルを表す。 基本的には省略することができない。 ブラウザのウィンドウやタブの名前として表示される。 <!DOCTYPE html><html lang="ja"><…
これからの記録について先日、遅ればせながらWEBの世界に少し足を踏み入れました。 学習を始める年齢としては、かなり遅いですが やらない事には進まないですし、今が一番若い! とりあえず前を向いてできるところまでやっていこうと決めました。 そして、学習をしても記憶に全く残らないため、 記録をしていくことにしました。 自分の老化と戦い、 またいつでも読み返して思い出せるような 引き出しとしてnoteを利用出来たらいいなと思います。 目標宣言平日毎日1記事更新 ー 既存記事の修正
1.Code Spell Checker スペルが違うところを波線で表示してくれます。 ちょいちょいスペル間違い起こすので便利です。 2.Path Autocomplete 外部ファイルのパス入力を補助してくれます。 3.zenkaku 全角スペースを知らせてくれます。 でも、VSCode側で標準装備されたはずなので、これはなくてもいいかも。 きっと黄色の枠がVSCodeでの全角表示です。 アンインストールしてみても黄色の枠でるので、インストールしなくていいか
今日はイレギュラーなことが起きて更新おやすみ。これもまた言いわけ?!
そうだ。GIMPバージョン上げてなかった。明日いろいろと設定しよう。 またずるい更新してる…
メインカラー 25% 【使用場所】ナビゲーション・フッターなど ナビゲーションやフッターなどあまり面積が大きくなり過ぎないところに使用する。 ベースカラー 70% 【使用場所】背景色 主に背景色に使用する色。白またはグレーの無彩色にするか、メインカラーの薄い色をしようするのが基本。 アクセントカラー 5% 【使用場所】ボタン、バナー、リンクテキストなど メインカラーとベースカラーだけでは単調になりがちなので、アクセントをつけるために入れる色。 あざやかな色を選び、
2日目のサボり更新です…実は体調悪めなので大事をとって今日もお休みです。 無理は良くないので調整することも大切なのです。という言いわけ?!
体調不良で今日はおやすみです。
1.vscode-icons ファイルなどにアイコンを付けてくれるので視覚的にとても操作しやすくなります。 2.indent-rainbow 薄い色なので若干わかりにくいのですが、インデント部分も色を付けてくれるのでこちらも視覚的にミス防止になります。 3.Prettier-Code formatter(要設定) 成形されていないインデントを保存と同時に整形してくれる拡張機能。 最初に設定が2か所必要。 設定画面で「onsave」で検索。 Editor:Forma
AdobeのCreativeCloudを止めたのでテキストエディタをVSCodeを使ってみることにしました。 Dwは遥か昔に少し触ったことがあるレベルで、ここ最近はMeryなど機能があまりないものをテキストエディタとして使っていました。 VSCodeの名前はしってたけど、Microsoftだったとは知らずかなりの初心者っぷりです恥。 とりあえずダウンロード。 英語バージョンで焦るけど、すぐ右下に日本語化できるように表示がでました。親切ですね。 インストールして再起動を
配色について 最初に配色を決めておくとデザインしやすくなる。 メインカラー コーポレートカラーやロゴのカラーでメインに使っていく色 サブカラー メインカラーと一緒に使っても違和感のない色 同じトーンで選ぶことが多い アクセントカラー アクセントとして使う色。全体の数パーセント使う。 メインカラーの逆の色を選ぶことが多い。 背景カラー サイト全体の背景に使う色。 面積が大きいのでまぶしい色は避けること。 テキストカラー/リンクカラー 視認性・可読性に気を付けること。
* + * フクロウセレクタ ユニバーサルセレクタについて調べていると気になるセレクタが! フクロウセレクタ * + * これがふくろうの顔に見えるからだとか。 なんだかかわいくて、本来調べようと思っていたことそっちのけで ふくろうのとりこに。 フクロウセレクタとは 最初の要素以外を指定するセレクタらしい。 どんな時に利用できるのかなと見ていると ナビゲーションの余白設定に便利だということ。 他にも、リストの一番上に余白を持たせたくない時などにも使えるらしい。 作り
*{~}ユニバーサルセレクタ *アスタリスクをセレクタに指定すると、すべての要素を対象にスタイルを適用できる。 単独で指定する以外にも他のセレクタとの組み合わせで使用することもできる。
要素名{~}タイプセレクター 要素名を各セレクターに指定すると、指定した要素にスタイルが適用される。 最も基礎となるセレクター。 h1 { color: #000;}p { background-color: #888;}strong { color: #fff;} <h1>WEB_STUDY</h1><p><strong>0からはじめる</strong>WEB_STUDY</p>
なんだかここ最近ぐっと寒くなって、起きるのも動くのも嫌になってます。 それに付け加えnoteの更新もさぼりたくなるのです。 デザイン考える日なのに、すっかりネットショッピング漬けの日曜日になってしまいました。 明日は早い時間に更新できるようにがんばろう。 そして、どんなサイトにするかしっかり考えなきゃ。 平日はWEB関連の仕事なんだけど、HTMLにめっきり触れない状態でやばいです。 せっかく勉強して少し理解しそうになっていたのに、忘れてしまいそう。 またゼロからつなぎ合わせ
<title>~</title> 文書のタイトルを表す。 基本的には省略することができない。 ブラウザのウィンドウやタブの名前として表示される。 <!DOCTYPE html><html lang="ja"><head><title>0から始めるWEB STUDY / TOP</title></head><body></body></html> タイトルはブックマークや履歴一覧、検索エンジンの結果ページに表示されるので、各ページの内容がわかりやすいタイトルを付ける事が望