WEB学習の記録

超初心者でWEB業界へ。日々勉強。1日1記事目指してます。 WEBクリエイター能力認定試験受験するのがまずの目標。

WEB学習の記録

超初心者でWEB業界へ。日々勉強。1日1記事目指してます。 WEBクリエイター能力認定試験受験するのがまずの目標。

マガジン

最近の記事

  • 固定された記事

WEB学習の記録

これからの記録について先日、遅ればせながらWEBの世界に少し足を踏み入れました。 学習を始める年齢としては、かなり遅いですが やらない事には進まないですし、今が一番若い! とりあえず前を向いてできるところまでやっていこうと決めました。 そして、学習をしても記憶に全く残らないため、 記録をしていくことにしました。 自分の老化と戦い、 またいつでも読み返して思い出せるような 引き出しとしてnoteを利用出来たらいいなと思います。 目標宣言平日毎日1記事更新 ー 既存記事の修正

    • 【拡張機能追加編2】VSCodeをインストールしてみた

      1.Code Spell Checker スペルが違うところを波線で表示してくれます。 ちょいちょいスペル間違い起こすので便利です。 2.Path Autocomplete 外部ファイルのパス入力を補助してくれます。 3.zenkaku 全角スペースを知らせてくれます。 でも、VSCode側で標準装備されたはずなので、これはなくてもいいかも。 きっと黄色の枠がVSCodeでの全角表示です。 アンインストールしてみても黄色の枠でるので、インストールしなくていいか

      • 今日はイレギュラーなことが起きて更新おやすみ。これもまた言いわけ?!

        • そうだ。GIMPバージョン上げてなかった。明日いろいろと設定しよう。 またずるい更新してる…

        • 固定された記事

        WEB学習の記録

        マガジン

        • テキストエディタ
          3本
        • 【上級】Web試験対策
          3本
        • CSS基礎
          7本
        • メモ的
          7本
        • HTML基礎
          10本
        • ゆっくり進める-ゼロから創るWEBサイト-
          15本

        記事

          【Web設計】Web試験対策上級#003 配色2

          メインカラー 25%  【使用場所】ナビゲーション・フッターなど ナビゲーションやフッターなどあまり面積が大きくなり過ぎないところに使用する。 ベースカラー 70% 【使用場所】背景色 主に背景色に使用する色。白またはグレーの無彩色にするか、メインカラーの薄い色をしようするのが基本。 アクセントカラー 5% 【使用場所】ボタン、バナー、リンクテキストなど メインカラーとベースカラーだけでは単調になりがちなので、アクセントをつけるために入れる色。 あざやかな色を選び、

          【Web設計】Web試験対策上級#003 配色2

          2日目のサボり更新です…実は体調悪めなので大事をとって今日もお休みです。 無理は良くないので調整することも大切なのです。という言いわけ?!

          2日目のサボり更新です…実は体調悪めなので大事をとって今日もお休みです。 無理は良くないので調整することも大切なのです。という言いわけ?!

          体調不良で今日はおやすみです。

          体調不良で今日はおやすみです。

          【拡張機能追加編】VSCodeをインストールしてみた

          1.vscode-icons ファイルなどにアイコンを付けてくれるので視覚的にとても操作しやすくなります。 2.indent-rainbow 薄い色なので若干わかりにくいのですが、インデント部分も色を付けてくれるのでこちらも視覚的にミス防止になります。 3.Prettier-Code formatter(要設定) 成形されていないインデントを保存と同時に整形してくれる拡張機能。 最初に設定が2か所必要。 設定画面で「onsave」で検索。 Editor:Forma

          【拡張機能追加編】VSCodeをインストールしてみた

          【日本語化編】VSCodeをインストールしてみた

          AdobeのCreativeCloudを止めたのでテキストエディタをVSCodeを使ってみることにしました。 Dwは遥か昔に少し触ったことがあるレベルで、ここ最近はMeryなど機能があまりないものをテキストエディタとして使っていました。 VSCodeの名前はしってたけど、Microsoftだったとは知らずかなりの初心者っぷりです恥。 とりあえずダウンロード。 英語バージョンで焦るけど、すぐ右下に日本語化できるように表示がでました。親切ですね。 インストールして再起動を

          【日本語化編】VSCodeをインストールしてみた

          【Web設計】Web試験対策上級#002 ウェブアクセシビリティ

          ウェブアクセシビリティ 音声ブラウザで読み上げに適している書き方 令和4年10月14日 imgにはalt属性を付けてわかりやすい画像の説明を付ける。

          【Web設計】Web試験対策上級#002 ウェブアクセシビリティ

          【Web設計】Web試験対策上級#001 配色について

          配色について 最初に配色を決めておくとデザインしやすくなる。 メインカラー コーポレートカラーやロゴのカラーでメインに使っていく色 サブカラー メインカラーと一緒に使っても違和感のない色 同じトーンで選ぶことが多い アクセントカラー アクセントとして使う色。全体の数パーセント使う。 メインカラーの逆の色を選ぶことが多い。 背景カラー サイト全体の背景に使う色。 面積が大きいのでまぶしい色は避けること。 テキストカラー/リンクカラー 視認性・可読性に気を付けること。

          【Web設計】Web試験対策上級#001 配色について

          CSS基礎#007 セレクタについて【フクロウセレクタ】

          * + * フクロウセレクタ ユニバーサルセレクタについて調べていると気になるセレクタが! フクロウセレクタ * + * これがふくろうの顔に見えるからだとか。 なんだかかわいくて、本来調べようと思っていたことそっちのけで ふくろうのとりこに。 フクロウセレクタとは 最初の要素以外を指定するセレクタらしい。 どんな時に利用できるのかなと見ていると ナビゲーションの余白設定に便利だということ。 他にも、リストの一番上に余白を持たせたくない時などにも使えるらしい。 作り

          CSS基礎#007 セレクタについて【フクロウセレクタ】

          CSS基礎#006 セレクタについて【ユニバーサルセレクタ】

          *{~}ユニバーサルセレクタ *アスタリスクをセレクタに指定すると、すべての要素を対象にスタイルを適用できる。 単独で指定する以外にも他のセレクタとの組み合わせで使用することもできる。

          CSS基礎#006 セレクタについて【ユニバーサルセレクタ】

          CSS基礎#005 セレクターについて【タイプセレクター】

          要素名{~}タイプセレクター 要素名を各セレクターに指定すると、指定した要素にスタイルが適用される。 最も基礎となるセレクター。 h1 { color: #000;}p { background-color: #888;}strong { color: #fff;} <h1>WEB_STUDY</h1><p><strong>0からはじめる</strong>WEB_STUDY</p>

          CSS基礎#005 セレクターについて【タイプセレクター】

          今日はちょっとサボりの日の日記

          なんだかここ最近ぐっと寒くなって、起きるのも動くのも嫌になってます。 それに付け加えnoteの更新もさぼりたくなるのです。 デザイン考える日なのに、すっかりネットショッピング漬けの日曜日になってしまいました。 明日は早い時間に更新できるようにがんばろう。 そして、どんなサイトにするかしっかり考えなきゃ。 平日はWEB関連の仕事なんだけど、HTMLにめっきり触れない状態でやばいです。 せっかく勉強して少し理解しそうになっていたのに、忘れてしまいそう。 またゼロからつなぎ合わせ

          今日はちょっとサボりの日の日記

          HTML基礎#010 title要素

          <title>~</title> 文書のタイトルを表す。 基本的には省略することができない。 ブラウザのウィンドウやタブの名前として表示される。 <!DOCTYPE html><html lang="ja"><head><title>0から始めるWEB STUDY / TOP</title></head><body></body></html> タイトルはブックマークや履歴一覧、検索エンジンの結果ページに表示されるので、各ページの内容がわかりやすいタイトルを付ける事が望

          HTML基礎#010 title要素