ハル@helloco
勉強用メモです。
positionの使い方を調べると、本来あるべき場所・・・とか、親要素を起点とする・・・とか、説明しているサイトが多いと思います。 この説明だけではイメージがしづらいという人に向けて コルクボードとプリントに例えた説明をさせていただきます。 あまり深く考えずにこちらを見てください。↑ コルクボードを（親）・紙を（子）としています。 コードで書くとこうなります。 <div id="corkboard"> <!--親/ コルクボード
カテゴリーページTOPでは、お客様が目的の商品にたどり着けるよう店舗ごと、商材ごとに、様々な工夫をこらしています。 パターン① 下位カテゴリへのリンクをボタン化する。 カテゴリの枝分かれが多い場合によく見られるデザイン。 楽天デフォルトのデザインだとテキストのみでわかりにくいので、ボタンデザインへ変更している店舗が多い。 パターン② カテゴリ内商品を分類化する。 現在のカテゴリに属している商品を、分類化しているパターン。 ボタンの場合リンク先はカテゴリページとなるが
https://www.wave-inc.co.jp/weblog/?p=1226 https://www.wave-inc.co.jp/weblog/?p=6286
HTMLを書く際、アウトラインを意識する。 アウトラインとは、ページの階層構造のことで、HTML上の記述順と情報の順番、タグは本体の使い方をすることで、正しく形成される。 アウトラインチェックツール https://gsnedders.html5.org/outliner/ ●HTML5 / 要素の入れ子構造で文書のアウトラインを表す。 <section> <h1>マルミミゾウ</h1> <section> <h1>はじめに</h1> <p>このセクシ
Webデザイナーさんのブログを参考にまとめています。 まずはこちら。 <head prefix="og:http://ogp.me/ns#"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width"><meta name="format-detection" content="te
PCのファイルは、全て「０」とか「１」とか、人間が読めないデータの集合体。このファイルを【どの法則で翻訳して表示するか】、というのがエンコーディング。 例えば、テキストエディタでの設定が「UTF-8」で作成されたファイルを、 「Shift_JIS」で開けると、変な文字列で表示されてしまう。=文字化け ファイルを作成する際は、このエンコーディングの設定をまず確認する。 エディタによって、ファイルを開くときとファイルを保存するときで設定が別物になっている場合があるので、要注意
ざっくりと。 ・関数はオブジェクトである。 ・オブジェクトとは、プロパティと値を入れることができる入れ物である。 ・配列もオブジェクトである。 値の入れ方A var x = {}; //これでオブジェクトが生成された。x["hoge"] = 0; [ ]の中の『"』を省略すると、変数として扱われてしまう。 もしこれで省略した場合、変数定義をしていないのでエラーとなる。 値の入れ方B var x = { "hoge":0,
繰り返すごとに【変数の値】を増減させることができる。 for ( var i=1 ; i <= 5 ; i++){ console.log( i + "回目");} << for文の文法 >> for ( 初期化式 ; 継続条件式 ; 増減式 ){ 繰り返す処理 } 初期化式 （↑ のコードでいうと「var i=1」にあたる） 変数の記事で学習した「初期化」。 最初に代入するはじまりの数値。
Javascriptにおけるイベントは大きくわけて２種類ある。 ① HTMLのイベント属性に処理を書く方法 └ ①-2 イベントプロパティを使う方法 ②イベントリスナーを使う方法 ① HTMLのイベント属性に処理を書く方法 <p onclick="alert('こんにちわ');">クリック</p><p onclick="alert('こんにちわ');" onmuseout="alert('マウス離れた');">クリック</p>//上記のように複数指定も可能
本日は、要素へのアクセスについてよく利用される「getElementById」についてです。 まずよく使う用語を簡単にご説明。 id属性にはHTML文書内で一意となる値が設定される為、getElementByIdメソッドで取得される要素は１つだけになります。 このように。簡単です。 このままだと、ブラウザ上では変化は見られません。 デザインを変更してみましょう。 プロパティへのアクセス方法は『.』のあとに プロパティ名を連結すればOK。 ここで注意点。 jav
おわり〜
「変数について」の記事では、変数に入れることができる値は１つだけと学びました。では100件のデータを覚えておきたい場合は変数を100個宣言しなければならないのでしょうか。 いいえ、そんな時は「配列」を利用します！ まずは変数についてちょいと復習。 変数宣言と同じく、varを使います。[ ]内には、要素に代入する値をカンマで区切り指定します。 この書式を「配列リテラル」を呼びます。簡単ですね〜 では、具体的に、値をいれてみましょう。 [ ]内の１番目の要素は、０番目
Javascriptには大きくわけて以下５つの演算子がある。 算術演算子・代入演算子・文字列連結演算子・比較演算子・論理演算子 算術演算子について まず、算術演算子ってなんやねん ・・・→ 四則演算のこと。 みなさんおなじみ、足し算・引き算・掛け算・割り算です。 Javascriptでは、 足し算は『+』、引き算は『-』掛け算は『*』、割り算は『/』、 そして割り算した時の余り、剰余は『%』で表します。 次に、文字列連結演算子について。 var x = "わ
例えば、人間が１〜10までの合計値を暗算で求める場合、 頭の中はこうなる。 まず、１＋２の値を求めて、結果に３を足して・・・ 途中の計算結果を一旦覚えて、そこに次の数字を足していくでしょう。 Javascriptで計算を行う場合も同様です。 人間が、途中の計算結果を一旦覚えるように、 Javascriptでは、箱を用意して、一旦箱にいれて計算をします。 先ほどの計算をJavascriptで行うとこうなります。 まず、冒頭からつまづいたあなた！ ゆっくり解説していき
●選択ツール ショートカットは「V」 ●ダイレクト選択ツール ショートカットは「A」 オブジェクトのポイントを選択したり マスクした写真だけを選択できます。 応用編 ●グループ選択ツール 複雑に入れ子状態になったオブジェクトを選択する際、便利！ 一度クリックすると一番深い階層のオブジェクトが選択されます。 もう一度クリックするとその上の階層のグループが選択されます。 更にもう一度クリックすると更にその上の階層のグループが選択されます。
