コーディングとプログラミングの違い

先日、プログラミングを勉強されている専門学生さんとお話する機会がありました。

会社でコーディングを主に担当していただく人を採用したいと思っていたので、「コーディングは好きですか?」と質問したところ、「???」となってしまいました。

そこで、「プログラミングは好きですか?」と言い直したところ、「はい」という答えが返ってきました。

コーディングとは、【プログラミング/コンピュータ言語を使ってソースコードを作成すること】で、主に【HTML】【CSS】【PHP】【JavaScript】などのこと。
プログラミングとは、【プログラムを作成する作業全般】で、この中にはコーディングも含まれています。

つまり、コーディングはプログラミングの作業の一部なのですね。

プルダウンメニューを実装

本日は、「プルダウンメニューを実装」について。
こんにちは、見習いWEBディレクターのTです。

コンタクトフォームなどでよく使われるプルダウンメニューのつくりかた。

selectタグとoptionタグを使います。

よく使うので覚えておきたいですね。

それではまた!

classの命名規則

本日は、「classの命名規則」について。
こんにちは、見習いWEBディレクターのTです。

いつもclass名をどうするか悩みませんか?
パッと決められたら便利だな、と思い調べてみました。

命名する時の主なポイントは以下のようです。

・そのclass名を見ればどこの何を指しているかがわかる
・ある程度の規則性を持たせる

まずは、そのclass名を見ればどこの何を指しているかがわかるについて。
一番わかりやすいのは場所で名前を分けることです。
headerならheaderから始め、そのあとに-(ハイフン)や_(アンダースコア)でheader内の要素をつないでいきます。

つぎに、ある程度の規則性を持たせるについて。
パーツ名をclass名としてつけます。たとえば、写真であれば〇〇-img、ボタンであれば〇〇-btnなど。

命名時の注意点
・複数の単語を組み合わせるときは-(ハイフン)や_(アンダースコア)でつなぐ
※スペースを空けると2つのclass名として認識されてしまいます

・数字からは始めない
アルファベットのあとに数字をいれるのは問題ありません。

・ローマ字は使用せず、英単語で付ける

class名を付ける際は、あとから見た時に「どこのなに?」がわかるかどうかを想像したうえで決定してみてくださいね。

それではまた!

実践練習!するには?

本日は、「実践練習!するには?」について。
こんにちは、見習いWEBディレクターのTです。

コーデイングを習得しようとすると、まずはネットにあるコーディングの勉強サイトで学びます。

たくさん聞いてたくさん打ち込んでみて、なんとなくわかった気がする!のですが、これで本当にサイトが作れるのかと言われると、全然自信ないですよね。

そこで実践練習です。

実践練習とは、イケてるサイトを見つけて、そのサイトの模写コーディングをしてみることです。
最初はあまり難易度の高くないものを選び、検証ツールは見ないで同じものを作ってみます。
最後に、検証ツールで答え合わせをしましょう。

これをすることで、コーディングに慣れていくことはもちろん、
・きれいなコーディング
・良いデザイン
・知らなかったメソッド
なども身につけることができるかもしれません。

受け身の勉強をしたあとは、実践練習でどんどん自分のものにしていきましょう!

リンクを別タブで開く

本日は、「リンクを別タブで開く」について。
こんにちは、見習いWEBディレクターのTです。

サイト内で表示されたURLをクリックすると、該当のページに飛びます。

その際に使うタグが、

です。

この時、同じタブで開くのか、別タブで開くのか、設定することができます。

1.同じタブで開く場合 target=”_self”

2.別タブで開く場合 target=”_blank”

を、使います。

1.同じタブで開く場合 target=”_self”
これはデフォルトのため、あえて入れなくても問題ありません。

あるいは、

となります。

2.別タブで開く場合 target=”_blank”

となります。

「Block Elements」と「Inline Elements」について

本日は「Block Elements」と「Inline Elements」について。
こんにちは、見習いWEBディレクターのTです。

コーディングする際の要素には2種類あります。
「Block Elements」と「Inline Elements」です。

「Block Elements」の例:

など。
コードの最初(左端)から始めるものです。(New Line)

「Inline Elements」の例:

など。
コードの途中でのみ使われるものです。(Same Line)

Inline Elementsの場合は、Enterで改行せず、

を使って改行しましょう。

コメントアウト

久しぶりのブログになってしまいました。

期間が空いたので、これを機に担当も交代しました。
こんにちは、見習いWEBディレクターのTです。
初心者なのでレベル下がりますが、後々他の誰かにも役立つ備忘録になればと思います。

本日は「コメントアウト」について。

コメントアウトとはコードを無効化し、HTMLソース内でメモとして使用したり、一部のコンテンツをあとから表示させたい場合に使用することができます。

こちらを非表示にしたい場合、タグの前後に

を追加します。

これで、サイト上で[image]は非表示になりました。
あとから表示させたい場合は

を削除します。

イメージマッピング(クリティカルマッピング)

イメージマッピング(クリティカルマッピング)

■メリット
・1つの画像の中で別の場所でリンクを設けたいときに使います
・1つ1つ、異なる形状のリンクを作成することが出来ます

■やり方(reanweaverを使った例)
①画像を用意します。

②表示形式を「分割」にし、右の下矢印を押して「デザイン」を選択します。

③imgタグで画像を挿入します

④「ウィンドウ」→「プロパティ」でプロパティを表示します。

⑤対象の画像をクリックすると下のプロパティに情報が出てきます。

通常時は矢印が選択されているのですが、

隣を選択するとそれぞれ

四角形・円・多角形を作成することができます。

例えば四角形を選択し、四角形を書くと自動的にコードを記載してくれます。

⑥hrefを記載できるようになるため、リンクを貼り付けることができます。

完成したものがこれです。
四角形をクリックしてみましょう。

使う場面はたくさんあると思います。

リストの中で画像を横並べ

リストの中でタイトルと画像を並べたいとき

リストタグの中でhタグとulタグを使用し、ulタグの中でリストタグを用いてimgタグを使用します。
また、imgに用いているリストタグをインライン要素にすることで横並びにします。

【特徴】
・リストタグの中でタイトルと画像を区別できる
・ulとliでのシンプルかつキレイなコードが書ける
・スタイルもシンプル

メインビジュアルの背景を動画にする

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

■css

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript