本日は、「検証ツールの使い方」について。
こんにちは、見習いWEBディレクターのTです。
ウェブ制作をしていると、現在表示しているページのHTML、CSSやJavaScriptを確認することがよくあります。
また、何かがおかしいときにどこがおかしいのか調べることもあります。
そこで欠かせないのが、この「検証ツール」です。
Google Chromeの場合：
検証ツールを使用するには、表示されているページを右クリックして「検証」をクリックします。
もしくは、F12を押しても表示させることができます。
検証ツールでは実際に編集し、それがどのように表示されるのかも確認することができます。
（リロードすると元に戻りますので注意。）
また、タブレットとスマホが重なったようなアイコンを押すと、レスポンシブの確認もすることができます。
スマホでページがどのように表示されるかの確認は、日常の校正やチェック時に欠かせません。
それではまた！
本日は、「プルダウンメニューを実装」について。
こんにちは、見習いWEBディレクターのTです。
コンタクトフォームなどでよく使われるプルダウンメニューのつくりかた。
selectタグとoptionタグを使います。
|
1 2 3 4 5 6 |
<select> <option>A型</option> <option>B型</option> <option>AB型</option> <option>O型</option> </select> |
よく使うので覚えておきたいですね。
それではまた！
本日は、「classの命名規則」について。
こんにちは、見習いWEBディレクターのTです。
いつもclass名をどうするか悩みませんか？
パッと決められたら便利だな、と思い調べてみました。
命名する時の主なポイントは以下のようです。
・そのclass名を見ればどこの何を指しているかがわかる
・ある程度の規則性を持たせる
まずは、そのclass名を見ればどこの何を指しているかがわかるについて。
一番わかりやすいのは場所で名前を分けることです。
headerならheaderから始め、そのあとに-（ハイフン）や_（アンダースコア）でheader内の要素をつないでいきます。
つぎに、ある程度の規則性を持たせるについて。
パーツ名をclass名としてつけます。たとえば、写真であれば〇〇-img、ボタンであれば〇〇-btnなど。
命名時の注意点
・複数の単語を組み合わせるときは-（ハイフン）や_（アンダースコア）でつなぐ
※スペースを空けると2つのclass名として認識されてしまいます
・数字からは始めない
アルファベットのあとに数字をいれるのは問題ありません。
・ローマ字は使用せず、英単語で付ける
class名を付ける際は、あとから見た時に「どこのなに？」がわかるかどうかを想像したうえで決定してみてくださいね。
それではまた！
本日は、「キャッシュ」について。
こんにちは、見習いWEBディレクターのTです。
この業界に入るまで、キャッシュと言えば「現金」一択だった私にとって、サイト制作においてこんなにも「キャッシュ」というワードを聞くことになるとは思っていませんでした。
Web業界におけるキャッシュの意味とは、ブラウザが一時的に記憶しているホームページデータのこと。
つまり、ブラウザで１回表示したことのあるWebサイトはデータを記憶しておくことで、再アクセスしたときに情報をすぐに取り出せるようにしておけるのです。
こうしておけば、表示させるまでの時間を大幅に短くしてくれます。
とても便利な機能ですが、サイトを修正する仕事においては、少しやっかいです。
キャッシュ残りといって、更新したはずのページにアクセスしても、更新前と同じ表示になってしまうことがあります。
そんなときは、「F5」でリロード、あるいは「Ctrl+F5」で強制リロードをすることで解決します。
本日は、「実践練習！するには？」について。
こんにちは、見習いWEBディレクターのTです。
コーデイングを習得しようとすると、まずはネットにあるコーディングの勉強サイトで学びます。
たくさん聞いてたくさん打ち込んでみて、なんとなくわかった気がする！のですが、これで本当にサイトが作れるのかと言われると、全然自信ないですよね。
そこで実践練習です。
実践練習とは、イケてるサイトを見つけて、そのサイトの模写コーディングをしてみることです。
最初はあまり難易度の高くないものを選び、検証ツールは見ないで同じものを作ってみます。
最後に、検証ツールで答え合わせをしましょう。
これをすることで、コーディングに慣れていくことはもちろん、
・きれいなコーディング
・良いデザイン
・知らなかったメソッド
なども身につけることができるかもしれません。
受け身の勉強をしたあとは、実践練習でどんどん自分のものにしていきましょう！
本日は、「なぜかエラーに・・・」について。
こんにちは、見習いWEBディレクターのTです。
コーディングをしていると、何回も見直したのにエラーになってしまうことがよくあります。
すごく時間をかけて、やり方が合っているか確認したりするのですが、たいがいの場合
「単語のスペルミス」
「半角・全角の間違い」
「とじかっこが違う」
「セミコロンの付け忘れ」
などによるエラーだったりします。
こんな初歩的なミスある？と思うようなことで、だいたいエラーが出ています。
恥ずかしいですね。。。
これは初心者ではよくあることなのだそうです。
なぜエラーがでるんだ！と頭を抱えるまえに、出来る箇所はコピペを活用したり、まずはしっかりと見直してみましょう！
本日は、「リンクを別タブで開く」について。
こんにちは、見習いWEBディレクターのTです。
サイト内で表示されたURLをクリックすると、該当のページに飛びます。
その際に使うタグが、
|
1 |
<a href="リンク先のURLを記入"></a> |
です。
この時、同じタブで開くのか、別タブで開くのか、設定することができます。
1.同じタブで開く場合 target=”_self”
2.別タブで開く場合 target=”_blank”
を、使います。
1.同じタブで開く場合 target=”_self”
これはデフォルトのため、あえて入れなくても問題ありません。
|
1 |
<a href="リンク先のURLを記入" target="_self"></a> |
あるいは、
|
1 |
<a href="リンク先のURLを記入"></a> |
となります。
2.別タブで開く場合 target=”_blank”
|
1 |
<a href="リンク先のURLを記入" target="_blank"></a> |
となります。
本日は「検索窓に薄いテキストを入れて、何を入力すべきかわかりやすくする」プレースホルダについて。
こんにちは、見習いWEBディレクターのTです。
ECサイトやホームページ内で目的の商品やページを探す際、検索窓を使います。
ECサイトでは特に、目的の商品をいかに簡単に見つけられるかでそのサイトでの購買有無が変わったりしますので重要です。
ですが、お客様は「そもそもなんて検索したらいいかわからない」「何を入力すべきかわからない」こともあります。
そこで検索窓の中に、入力すべき事項の例を入れておきます。そうすると、お客様がそこに何を入力すべきかわかりやすくなります。
html5でサイトを作った場合：
|
1 |
<input type="text" placeholder="商品を探す（キーワードを入力）"> |
と、入力します。
こうすると、検索窓の中に、「商品を探す（キーワードを入力）」とあらかじめ薄いテキストで表示させることができます。
設定した文字は、ユーザーがテキストを入力した時点で消えます。テキストボックスが空になったらあらかじめ設定したテキストに戻ります。
この方法だと、テキスト色の指定をしなくても最初から薄いので、便利です。
本日は「Block Elements」と「Inline Elements」について。
こんにちは、見習いWEBディレクターのTです。
コーディングする際の要素には2種類あります。
「Block Elements」と「Inline Elements」です。
「Block Elements」の例：
|
1 |
<h1><p><ul><li> |
など。
コードの最初（左端）から始めるものです。（New Line）
「Inline Elements」の例：
|
1 |
<a><b><em><img> |
など。
コードの途中でのみ使われるものです。（Same Line）
Inline Elementsの場合は、Enterで改行せず、
|
1 |
<br> |
を使って改行しましょう。
久しぶりのブログになってしまいました。
期間が空いたので、これを機に担当も交代しました。
こんにちは、見習いWEBディレクターのTです。
初心者なのでレベル下がりますが、後々他の誰かにも役立つ備忘録になればと思います。
本日は「コメントアウト」について。
コメントアウトとはコードを無効化し、HTMLソース内でメモとして使用したり、一部のコンテンツをあとから表示させたい場合に使用することができます。
|
1 2 3 |
<div id="image"> [IMAGE] </div> |
こちらを非表示にしたい場合、タグの前後に
|
1 |
<!-- --> |
を追加します。
|
1 2 3 4 5 |
<!-- <div id="image"> [IMAGE] </div> --> |
これで、サイト上で[image]は非表示になりました。
あとから表示させたい場合は
|
1 |
<!-- --> |
を削除します。