Web

Web業界用語。ガチ初心者は覚えた方がいい必須用語10個

どうもWeb業界に生きるつかぽんです。

 

今回は実際に自分がWeb制作・運用の会社に入社してから初めて知った

「知っておけばよかった」という最低限必要な用語を集めました。

 

Webサイト作ってみたいなーとか

Web業界に就職しようと思っている人や

これからWebについて勉強しようと思っている人に向けて、

最低限知っておいた方がいいものを紹介します。

 

実際に自分が知識が浅い人にWebサイト制作について説明する場合、

レクチャー内容に入る前に言葉の説明から入らなければなく

非常に苦労した記憶があります。

なのでこれからやろうと思っている人は是非覚えましょう。

 

ガチ初心者向けなので既にWeb業界に生きる人には当たり前の内容です。

 

Webサイトを制作するにあたって

覚えておいた方がいい言葉にも優先順位があります。

 

なので絶対に必要な必須用語

覚えておいた方がいい推奨用語をご紹介しようと思います。

 

今回の記事では必須用語について紹介します。

 


必須用語

Web制作するのであればこれは知っておかないとまずいってものを書いています。
※Web会社に就職する初心者想定で書いています。

HTML(エイチ ティー エム エル)

HTMLとは

Hyper Text Markup Language
(ハイパーテキストマークアップランゲージ)

の頭文字をとったもので、

Webサイトの骨組みにあたるプログラミング言語です。

サイトを作るにあたって一番重要です。

 

例えば家をイメージしてください。

 

家の壁や床、天井に見えない骨組みが入っていますよね?

それがHTMLです。

 

CSS(シ― エス エス)

続いてCSSです。

こちらもHTMLと同じく

Cascading Style Sheets
(カスケーディング・スタイル・シート)

の頭文字をとったものです。

 

これはさっきの家で言うところの家の装飾部分になります。

 

HTMLだけだと骨組みだけなので、

壁も屋根も家具もない未完成の状態なので、

CSSと合わせることで完成します。

 

もちろんHTMLだけでもWebサイトは機能させることができますが

CSSを使えば使いやすくておしゃれなサイトを作れます

 

JavaScript(ジャバ スクリプト)

JavaScriptは、

先ほどの家で例えるなら、

家電やオートロック機能、自動湯沸かし器等ですかね…

 

どういうことかというと、CSSは装飾でオシャレにはできても

自動化はできないんです。

 

より動作を軽く、簡単にしてくれるものがJavaScriptになります。

業界に入ると頭文字をとってJSと呼ばれるので覚えておきましょう。

ちょっと難しいですが以下記事はより詳しく書いてくれています。

 

コーディング

コーディングとはHTMLやCSS、JSを書いていく(入力していく)ことを言います。

それを職業ともしている人であれば、

コーダーとも言います。

 

ちなみに私は会社でコーダーという立ち位置にいます。

エディタ

エディタというのは、

先ほどのHTMLやCSS、JSなどを実際に書いていくために必要なものです。

ただ、極論を言うとこれはWindowsパソコンに純正で入っているメモ帳でも書けます。

 

じゃあテキストが入力できればなんでもいいのかといればそういうわけでもなく、

個人的にはBracktsというソフトをお勧めします。

以下記事でもBracktsについて書いているので参考にしてみてください。
→Webデザイナーにオススメの業務効率化PCソフト8選

 

エディタにはそれぞれの好みがあると思うので

いろんなエディタを試して自分に合うエディタを探してみてください。

 

ブラウザ

ブラウザは今この記事を読んでいるこのアプリケーションのことです。

ブラウザには様々あり、

Chrome(クローム)や
Safari(サファリ)、
InternetExplorer(インターネットエクスプローラー)
Firefox(ファイヤフォックス)

などがあげられます。

よく業界内では使われる言葉なので必須項目です。

 

ちなみにTwitterやLINEで送られてきたURLをタップした場合、

開くのはアプリ内ブラウザと呼ばれるもので

アプリに内蔵されているブラウザ機能でサイトを閲覧しています。

 

ソースコード

ソースコードとは、

↓これです

 

これはHTMLやCSS、JSなどの既に書いたプログラム言語を指す言葉で

「ソースコードを見せてほしい」など言われたら

自分で書いたプログラムを見せるといったイメージです。

 

HTMLタグ

これはHTMLを勉強すればおのずと覚えると思いますが、

<div>~~~</div>

<h1>~~~</h1>

などのカッコで囲われているものをHTMLタグといいます。

 

▼使い方の例
コーディング中に、サイトを試しに表示させたらうまく表示されない…
あ!h1タグの最後の閉じタグを閉め忘れてる!!

 

クラス名

これはHTMLとCSSをつなぐための名前だと思ってください。

例えばHTMLで

<h1>メロンソーダ</h1>
<h1>いちごみるく</h1>

と書いたあと

メロンソーダだけを指定してCSSでデザインしたいとします。

 

その場合は

<h1 class=”meron”>メロンソーダ</h1>
<h1 class=”ichigo”>いちごみるく</h1>

と記入します。

これは1行目のクラス名は「meron」なんだな、

とCSSが判断することができます。

また同様に2行目のクラス名は「ichigo」だなと判断できます。

そうすることでCSSでmeronのデザインはこうしてねと記述ができます。

 

ちなみにクラス名に日本語を指定するのはあまりよろしくありません。

名前だったらnameにするとか、

車だったらcarとか英単語にしてあげるといいですよ。

書いてればだんだんコツはつかめてきます。

 

もし悩んだ場合はこのツールを使ってみてください

それっぽいクラス名を作成してくれます

URL(ユー アール エル)

これはよく見かけるのでわかる方が多いと思いますが、

正式名称はUniform Resource Locator(ユニフォーム リソースロケータ)で

これもまた頭文字をとってURLとしています。

 

これはわかりやすく言うとネット上の住所です。

https://から始まるものです。

 

ここでは詳しく説明しませんが、

簡単に説明するとURLは以下のような構造になっています。

プロトコル://ドメイン名(co=企業、jp=日本)/ディレクトリパス名/ファイル名
https://tukapon-k.kp/sample/index.html

 

URLは基本スラッシュ区切りで記述します。

スラッシュが長くなるにつれて住所が細かくなっているイメージです。

 

▼例
https://tukapon-k.jp/hokkaido/sapporo/index.html
https://日本/北海道/札幌市/中央区

となっていくイメージです。

 


以上が必須用語10個になります。

聞いたことがあるものも多いと思うので、それついでに全部覚えちゃいましょう!

 

正直10個じゃ紹介しきれません・・・。

書ききれなかったものは次の推奨用語に書いていきます。

推奨用語はまた後程紹介しますね!

 


おまけ

これは業界用語というよりか、世間一般的に今後重要になってくるもので

一つ覚えておいてほしいものが、

ITリテラシーという言葉です。

どういうものかは以前以下の記事で説明したので見てみてください。

→自分のITリテラシーのレベル把握してる?リテラシーレベル表

ITリテラシーは言葉が重要なのではなくその中身のスキルが重要になってきます。

ピックアップ記事

  1. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」
  2. 目標がない人はやりたいことリスト100をやってみよう
  3. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

関連記事

  1. Web

    ブログサービス「Blogger」の使い方紹介

    友人が2名「自分もブログやりたい!」と言っていたので、自分がや…

  2. Web

    レンタルサーバー探してるならCORESERVER使ってみて!

    ブログを始めるならCORESERVERを使おう!もともと私はデータ…

  3. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!

    PCにExcelが入っていないけど買いたくない…たまに、「…

  4. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

  5. Web

    Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

    今回はGoogleform埋め込みで回答完了画面に遷移させない方法…

  6. Web

    【jQuery】ナビの範囲外をクリックしてナビを閉じる方法

    Webサイトのナビやメニュー用のプラグインが多く出回ってますが、…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Web

    chrome/IE/FireFoxのサイズ解釈
  2. Diary

    野球グローブ買いました
  3. Web

    Surface Lapotopのキーボード素材、アルカンターラとは?
  4. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!
  5. Diary

    【PC自作】PCケース「QUADSTELLAR」買ってみた
PAGE TOP