日: 2023年2月21日

2023年2月21日 コメントする

2月21日（火）－CSS基礎①マークアップ/タグチェッカー/FTPサーバー

マークアップについて

◆マークアップ練習
【要参考】HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※L2.12 マークアップの練習以下

◆HTML例
【要参考】HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※L2.2.2 HTML 例をコピペしてテンプレ使用すると楽

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

【ワンポイントアドバイス】
Web関連の求人情報で、マークアップエンジニアという職種があります。マークアップエンジニアというのは、専門知識を必要とする仕事ではあります。Webサイト制作で、フロント寄りの領域を扱うことから、エンジニアやプログラミングとは大きく業務内容が異なります。
マークアップエンジニアは、制作現場で数多く求められている職種です。 未経験者であってもある程度の勉強や実践経験を積めば、募集企業によって十分チャレンジが可能な職種と言われています。

【参考サイト】

タグチェッカーについて

正確なHTMLが書けているか、自分の目ですべてをチェックするのはとても大変作業です。とはいえ、適切なHTMLが書けていないとレイアウト崩れの素となったり、修正に大幅に時間がかかったりなど決していいことはありません。そんな時に活用したいのがHTMLのエラーチェックツールです。

◆先生サイト（HTML-CSS の勉強を始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋）L1.1.6 HTML/CSS チェックより
現在は（https://validator.w3.org/）がおすすめとのこと。（一番右の「Validate by direct input」に直接コードコピペでチェックできる）

【ワンポイントアドバイス】
マークアップエンジニアやコーダーの求人応募をして、見られるのはソースコードです。最低限のやっておくべき事として文法エラーは減らしておきましょう。

【参考サイト】

FTPサーバーについて

FTPサーバとは、FTPを使用してファイルの送受信を行うサーバのことである。 ファイルのアップロード・ダウンロードにはFTPクライアントソフトウェアが必要だが、最近のウェブブラウザにはこれが組み込まれている場合が多い。 

◆よく使われるFTPクライアントソフトウェアは「FFFTP（64bit版）」
【FFFTP】の使い方
①ホスト一覧→新規ホスト→ホストの設定
②・ホストの設定名：任意でサーバー名を付ける（山田のHTMLサーバー　など）
　・ホスト名（アドレス）、ユーザー名、パスワードは指定された情報を入力する→OK
③右側の画面に3つファイルがあるが、触らないようにする
　※「.htaccess」＝絶対に触らない、「default_page.png」「index.html」はサーバーになにもデータがないときに表示される文言のファイル
④右側の3つには触らず、画面を右クリック→新規フォルダ作成で任意のフォルダを作成する（testなど）
⑤作ったフォルダを開き、その中にデスクトップのフォルダ内のデータをコピペする
　※デスクトップのフォルダごとではなく、フォルダを一旦開いた中のデータ（index.htmlやimagesフォルダ、CSSフォルダなど）
⑥左上の接続→接続で表示されるようになる
　※学校など同じサーバーの場合、一度に10人くらいまでしか接続できないので、一旦切断して譲り合うようにする

【※FFFTPでアクセス権を変える場合】
※普段は属性604のままで変更しない
①index.htmlを選ぶ
②コマンドタブ→属性変更
③オーナー＝管理者、グループ＝共同作業者がいる場合、その他＝普通の閲覧者で分類され、呼出（読み込み）・書込・実行の3つが表示されている
④呼出（読み込み）＝4、書込＝2、実行＝1で数字が与えられていて、通常604というのは、左（オーナー）から順に、呼出（読み込み）＝4、書込＝2の2つで6（4+2）、グループはなし＝0、その他＝呼出（読み込み）＝4のみ設定されているという見方をする


【ワンポイントアドバイス】
サーバーについては、案件ごとにどのサーバーを利用しているかしっかりと確認を取ってから制作依頼を受けましょう。サーバーによって基本的な設定が異なったり細かい違いがありますので、確認作業をしっかりと行いましょう。

【参考サイト】

SEOについて

検索エンジン最適化とは、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。 サーチエンジン最適化ないし検索エンジン対策とも呼ばれ、ウェブポジショニングと同義である。 

【ワンポイントアドバイス】
まずは正しい文法理解と記述を理解していきましょう。その次に目的であるSEO（検索エンジン最適化）を考えてより良いサイト構築・設計を考えていきましょう。

【参考サイト】

メモ

◆この部分はどのあたりのコードで書かれた部分かを知りたいとき
ページ右クリック→検証→左上の□に矢印のマーククリックで、マウスオーバーした表示画面のコードがどのあたりか表示される
検証画面の下側はCSS部分で、例えば右上に「style.css:25」とあったらCSSファイルの25行目らへんという意味
検証画面でカラーピッカーをクリックして色を変更したり試し表示ができる。実際に変更する場合は、試した色のコードを元ファイルに書き換える。