この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
2021年02月11日
サイト変更のお知らせ
平素、この度当「Webデザイナーへの道」をお読みいただきありがとうございます。
本サイトは次のサイト「office-one-scene（オフィス・ワン・シーン）」を立ち上げ、内容を改正しております。
今後とも、よろしくお願いいたします。
http://www.office-one-scene.com/portfolio/blog
本サイトは次のサイト「office-one-scene（オフィス・ワン・シーン）」を立ち上げ、内容を改正しております。
今後とも、よろしくお願いいたします。
http://www.office-one-scene.com/portfolio/blog
2020年12月10日
あ〜寝不足だ
睡眠不足に注意
昨日は、手古摺（てこず）りました。
しっかりと、マークアップしたはずなのですが、プレビュー表示しても反映されないのです。
何度、見返しても間違っている要素がありません。
悩んだ、悩んだ。
時間が、刻一刻と過ぎていく〜
そして、見つけた問題と解決方法。
問題は、パスの指定方法でした。
パスとは
・・・
パスとは、Webページやファイルなどの場所を指定することで、指定方法には2種類あります。
リンクを設定するWebページを基準にして指定する「相対パス」と、URLで指定する「絶対パス」です。
相対パスは、パスを書き込むWebページを基準として、目的のファイルの場所を記述します。
同じwebサイト内のページリンクを張るときは、この方法でします。
絶対パスとは、href 属性または src 属性の値に「http://」または「https://」から始まる URL を記述する方法です。
URLというのはインターネット上のアドレスをさしますから、住所みたいなもので、自分の Web サイト以外（外部リンク）をリンク先に指定する際に使います。
昨日は相対パスの記述方法に問題がありました。
相対パスを記述する際に注意すべき「ディレクトリ構造」について見直す必要がありました。
ディレクトリ構造とは
・・・
ディレクトリ構造とは、パソコンのフォルダのように改装に分かれ、親子関係を持っている構造のことです。
ファイル名とフォルダ名と「 / 」「 .. 」を組み合わせます。
「 / 」はディレクトリ（階層）、「 .. 」で一つ上のディレクトリという意味を持ちます。
＊同じディレクトリ（階層）のファイルにリンク
index.html
＊一つ上のディレクトリ（階層）にあるファイルにリンク
../index.html
＊二つ上のディレクトリ（階層）にあるファイルにリンク
../../index.html
ファイルを複製し別に用意したフォルダにファイルを保存したんですが、フォルダ内に保存すると階層が下がるので、ファイル内のスタイルシートを指定する記述を変更していなかったのが原因でした。
解決し、ホッとしたものの、寝なければならない時間はとうに過ぎ、寝不足です。
しかしながら、問題を解決できたことは大きな前進かと思います。
2020年12月09日
独学で使用した書籍（第三巻目）
実践＝訓練として選んだ書籍三冊目
紹介するのは
初心者からちゃんとしたプロになるHTML CSS標準入門
です。
特に目を引いたのが「1日30分からはじめる」というサブタイトルですね。
「1日30分」なら毎日続けられそうではないですか？
コンテンツですが、
- Webデザインの"今"
- Webサイトを制作する準備
- HTML と CSS の基礎
- HTML と CSS の応用
- シンプルなWebページを作る
- シングルページのサイトを作る
- Flexbox を使ったサイトを作る
- CSS Grid を取り入れる
- レスポンシブ対応サイトを作る
となっています。
徐々に実践形式が増えてきました。
制作方法？
記述の仕方は、それぞれ違います。
予備校で例えるなら、先生・講師によって基礎は同じでも手法が違うようなものですね。
さらに、どうしても学びたかった「ハンバーガーメニュー」の作り方が載っていたことです。
「ハンバーガーメニュー」は JavaScript でも作れるそうですが、まだ私は知識不足で JavaScript での作り方を知りません。
「ハンバーガーメニュー」とは、スマホ画面の通常右上にある三本線をタップもしくはクリックすると現れるメニューのことです。
スマホで検索、スマホでショッピングなどが当たり前になってきて、そういったニーズに対応すべく必須の知識ではないでしょうか。
三冊目の教科書なのですが、やはり書籍を利用するのは私なりのオススメ勉強法です。
そして、時折、動画を使って学んだり、オンライン学習ツールを利用する。
人それぞれの学習スピードがありますから、あなたなりの学習方法を見出してください。
20代の頃・・・
20代の頃、私はバックパッカーをしていました。
バックパッカーですので、基本的にローカルバス・列車を利用し、時にヒッチハイクで国境を渡って旅をしていました。
飛行機は使いません。
理由は、早すぎるからです。
早すぎて、途中で出会えるはずであった、素晴らしい景色を見逃してしまうかもしれなかったからです。
この Webの世界は果てしもなく広いです。
急ぎ過ぎて、大事なものを見落とさないようにしていただきたい。
コロナの影響もあり、これからは人と人とのコミュニケーションのあり方にも変化が訪れます。
「急がば回れ」ではないですが、自分のペースで歩を進め、楽しみたいと思う今日この頃です。
読んでくださっている、あなたも楽しんでいただきたいと思います。
ありがとうございます。
2020年12月08日
ヒントはそこに・・・
さてさて、書籍であったり、オンライン学習したり、YouTubeを使ったりとプログラミングを学ぶ方法はいくらでもあることがわかりましたね。
ようするに、やる気一つで様変わりする時代なんです。
ひと昔前は、単語を調べるのに辞書を引いていました。
調べるのに時間はかかったが、同時に得るのもありました。
現代は、スマホ一つで何でも調べられます。
一瞬です。
容易に、調べ上げられるようになった分、調べる努力や諦めない努力が失われつつあるように思います。
個人でも努力をして、自分らしさを存分に発揮できるのが、インターネットの世界だと思っています。
さてさて、がむしゃらに勉強に励んできたでしょうが、今一パッとしくないですか？
何をどうすれば、ビジネスにつ繋げられるか。
何をどうすれば、その努力が少しのお金として収入に近づけられるのか。
ヒントは、そこにあります。
それは、案件（仕事）紹介サイトです。
案件紹介のサイト内で、クライアント（依頼者・発注者）の必要なスキルを見てください。
どのような、能力が必要なのかわかります。
私は、Web制作の基礎として、HTML、CSS、JavaScript を学ぶことにしました。
その次に、WordPress です。
ここまでくれば、探せる仕事量はかなり増えます。
「 クラウドワークス 」や「 ランサーズ 」を活用してみてはどうでしょうか。
ようするに、やる気一つで様変わりする時代なんです。
ひと昔前は、単語を調べるのに辞書を引いていました。
調べるのに時間はかかったが、同時に得るのもありました。
現代は、スマホ一つで何でも調べられます。
一瞬です。
容易に、調べ上げられるようになった分、調べる努力や諦めない努力が失われつつあるように思います。
個人でも努力をして、自分らしさを存分に発揮できるのが、インターネットの世界だと思っています。
さてさて、がむしゃらに勉強に励んできたでしょうが、今一パッとしくないですか？
何をどうすれば、ビジネスにつ繋げられるか。
何をどうすれば、その努力が少しのお金として収入に近づけられるのか。
ヒントは、そこにあります。
それは、案件（仕事）紹介サイトです。
案件紹介のサイト内で、クライアント（依頼者・発注者）の必要なスキルを見てください。
どのような、能力が必要なのかわかります。
私は、Web制作の基礎として、HTML、CSS、JavaScript を学ぶことにしました。
その次に、WordPress です。
ここまでくれば、探せる仕事量はかなり増えます。
「 クラウドワークス 」や「 ランサーズ 」を活用してみてはどうでしょうか。
2020年12月07日
オンラインでプログラミング学習！（動画編）
動画を視聴して学習しよう！
前回は、オンラインプログラミング学習ということで、「 プロゲート 」を紹介しました。
説明の後に、プログラミングをする内容です。
わからなければ、ヒントを得ることもできますし、非常に便利です。
今回は、動画を見ながら学ぶ形式です。
それは、「 ドットインストール 」といいます。
動画を見て、覚える、動画を止めては、記述する。
こちらも豊富なレッスン内容となっています。
- ウエブサイトを作れるようになろう
- JavaScript ではじめるお手軽プログラミング
- よく見る UI を作ってみよう
- Canvas を使ってみよう
- 人気の言語を体験してみよう
- PHP でウエブサービスを作れるようになろう
- サーバー環境を作れるようになろう
- Ruby でウエブサービスを作れるようになろう
- Unity でゲームを作ってみよう
- UNIX をもっと使いこなそう
- データベースを学ぼう
- エディタを使いこなそう
- もっと JavaScript に触れてみよう
- Google が提供するツールを使おう
- iPhone アプリを作ってみよう
- Android アプリを作ってみよう
- デザインやアートに触れよう
- いろんな言語に触れてみよう
- その他のレッスン
と大きく19種類ものレッスン動画があります。
ただし、このサイトで使用している「エディタ」は「VS code」です。
私も初期の頃は、「Brackets」を使っていましたが、レッスン動画を見てからは「VS code」に変えました。
どれを使っても制作はできますが、個々の好み次第なので、気にならない方はそのままで大丈夫です。
このサイトも一部は無料です。
有料のプレミアム会員になっても、月々1,080円（税込）で動画見放題です。
もうすぐ年末年始の大型連休に入ります。
そういったときに、短期集中という手もありますね。
2020年12月04日
オンラインでプログラミング学習 ！
プログラミング学習サービスを利用しよう
いくつかあるオンラインプログラミング学習の中から、まず私は「 プロゲート 」を選びました。
理由は、単純にあるサイトで目に付いたからです。
Webサイトをみて驚いたのが、以下のような豊富なコース内容でした。
- HTML & CSS
- JavaScript
- jQuery
- Ruby
- Ruby on Rails 5
- PHP
- Java
- Python
- Command Line
- Git
- SQL
- Sass
- Go
- React
- Node . js
しかも、ある程度までは無料で学べます。
学習の流れは、インプットとアウトプットの繰り返しですのすごくわかりやすいです。
さらに、無料の壁を越え、有料会員になると奥深く学べます。
料金がリーズナブルで、月々980円（税別）なのです。
短期間で集中して学ぶにはもってこいですよ。
学習ロードマップというのもあるので、将来のビジョンが浮かばない人は、こちらも利用価値ありです。
2020年12月03日
タグと要素と属性
タグとは
タグ部分の記号と英数字は、全て半角文字で記述するのが決まりとなっています。
タグ名は大文字でも認識するようですが、小文字手統一するのが一般的です。
タグは「開始タグ」と「終了タグ」のセットでです。
開始タグの形式は、予め決められているタグ名を「<」と「>」で囲みます。
終了タグは、タグ名の直前に「/」を入れます。
要素とは
HTMLの開始タグと終了タグ、そしてその中に何かしらの内容が入ります。
これらを「要素」といいます。
タグが目印なのに対して、要素は内容物を含めたまとまりのことになります。
Webページの中身は、全て何らかの要素が並んで、さらには中に内容物が入る（入れ子とよぶ）ことによって構成されているのです。
ただ、終了タグが必要のない場合もあります。
一部のタグ（ meta や img など）は、空（から）要素と呼ばれ、終了タグを持ちません。
通常は、「ここから」「ここまで」と範囲指定がされますが、空要素はピンポイントにその場所を指します。
例えば、画像の挿入です。
属性とは
属性とは、個々のタグに対して何らかの性質を与えるものです。
属性を使用する場合、それに対する「値」もセットです。
属性はそれぞれのタグに対して専用のものがあったり、全てのタグに対して使える凡用的なものであったりと様々です。
また、一つのタグに対して複数の属性を設定することも可能です。
href 属性は「a タグからリンク指定と、その値」ですが、半角スペースで区切ったあと、「target 属性」に対して属性の値をしていします。
これによって、リンクをクリックした際に、ブラウザは新しいタブまたは新しいウィンドウでリンク先のページを開くようになります。
2020年12月02日
Webページの構成
ヘッダーエリア
Webページ（ホームページ）の中で一番上にくるのが、「ヘッダー」です。
名前の由来はヘッド（頭）からきているそうです。
ヘッダーには、ロゴやナビゲーションメニューなどが配置されます。
最近では、ページ上部にいつも表示される場合が多いです。
ナビゲーション
ヘッダー内にある場合と、独立している場合があります。
ページ間を移動するためのリンクが張られます。
コンテンツエリア
コンテンツ（情報や内容）を表示するエリアです。
サイドバー
最近では、サイドバーのないレイアウトも増えていますが、詳細メニューやバナー、プロフィールや新着情報など、ブログサイトに多く見かけられます。
フッター
ページ最下部に位置する「フッター」の語源は FOOT（足）です。
最近では、補足情報を掲載するケースが増えているようです。
と、ざっくりとこれだけのエリアに分かれています。
これらを、大まかに配置、構図を作ったのを「フレームワーク」といいます。
いわゆる、下書きですかね。
私も、何度も手古摺りましたが、やはり最初に大まかな配置、構図を作成することがスムーズに Web制作することが可能となります。
タグ： フレームワーク
2020年12月01日
コーディングについて
コーディングとは
コーディングとは、「コードを書く」ことです。
Web制作でのコーディングは HTML と CSS を使って、デザイン案をコンピューターが処理できるように言語化することになります。
思い描いたことを「ソースコード」という形で記述して、それをコンピューターが読み込んで Webページとして表現されます。
ただ、どうしても見た目を気にしてしまいがちですが、コンピューターにとっては見た目ではなく、論理的に正しいかどうかを判断します。
これを、「文書構造」といいます。
「文書構造」とは、見出しや文章、画像などの論理的な配列のことを指します。
なぜ、正しい文書構造で記述しなければならないのか・・・
それは、皆さんがよく使う検索サイトに関係かあります。
キーワードを入れて、表示された中のどれくらい上位にくれば見てもらいやすくなるかなのです。
これを「SEO」( Search Engine Optimization )といいます。
正しい文書構造で記述された Webサイトは検索エンジンのクローラーと呼ばれる巡回システムに正確に理解してもらいやすくなるので,結果、ヒットされやすくなるというわけです。
ここが一番大事なところです。
せっかく、制作したわけですから、やはり多くの人に見てもらいたい。
ビジネスをする上では、優良顧客をいかに獲得できるかが存続に影響します。
Web制作を依頼されるクライアントもお金を出すわけですから、もちろん投資したお金を回収、それ以上を望んでいるわけです。
（ちょっとマーケティングもはいりました）
2020年11月30日
書籍を比較
作りながら学ぼう
前回の、「オススメの書籍」で
世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書
を、紹介しました。
今回は第二弾とういうことで、実際に私が勉強に使用した2冊目を紹介したいと思います。
二冊目のWeb制作を学ぶ書籍として
を選びました。
実際に、使った書籍です。
では、コンテンツを見ていきましょう。
この書籍では4つのレイアウト手法が学べます。
- フルスクリーン（PC）
- シングルカラム（スマホ）
- 2カラム（ブログ）
- グリッド
内容ですが、
- 知っておきたいサイトとデザインのきほん知識
- サイト制作の前に準備しておくこと
- 知っておきたいHTMLのきほんと書き方
- 知っておきたいCSSのきほんと書き方
- フルスクリーンページを制作する
- シングルカラムページを制作する
- 2カラムページを制作する
- グリッドレイアウトページの制作と動画の埋め込み
- 問い合わせページを制作する
- マルチデバイス対応ページを制作する
前回の書籍と比べても、前半はほぼ基本が掲載されています。
ただ、こちらも Brackets を使用しながらの説明であることが選んだ理由の一つです。
そして、2冊目に突入すると、わかってくるのは記述の仕方は多少異なるということ。
ですから、よくあるうたい文句で「この1冊で大丈夫」というわけではなく、いろんな手法を体験し学ぶことは大事だと思います。
