HTML
今日もスマートフォン専用サイトの授業。 架空のweb制作会社のサイトつくった。 長くなるのでjsのブログでの記述はカットします。 jsでの記述はheader画像にflexsliderを使ったsliderと内容部分にtoggleを使った開閉式のタブパネルを使ったというところです…
今日の授業はスマートフォン専用サイト。 スマートフォン専用サイトはクロームのF12の開発ツールで確認できるようだ。 クロームのF12を押して左上のスマートフォンのアイコンをクリックすると各種デバイスでの動作をエミュレーションできる。 スマートフォン…
擬似セレクター：nth要素：nth-child(式)（○個目から△おき）li:nth-child(2n+1)例nが0の時は1 例nが1の時は3 例nが2の時は5 以下例 nth-child(2n+1)奇数 nth-child(2n)偶数 nth-child(3n)3,6,9,12・・・番目 nth-child(3n+1)1,4,10,13・・・番目 nth-child(5…
画像ファイルが無くてもcanvasを使えばjavaScriptで図形を描けるようになる。 最近のサイトではcanvasを使ったサイトが増えているので興味があったがjavascriptが苦手なため挑戦したかったcanvasを授業で習った。 指定したセレクタ、id、classなどをjavascri…
今日はtransformとtransitionの授業に入った。 transformは変形。transitionは徐々に指定した値に変化させる。 今まで両方使ってきたが指定の仕方に癖がある。書き方transform:rotate（10deg);10度回転 transform:scaleX(2);横に2倍、-に設定すると3D回転の…
CSS3の勉強の続き。今日はlinear-gradient/radial-gradient/background-size/background複数枚指定のお勉強。 この授業に入る前に使っていたのはlinear-gradient/background-size/background複数枚指定だ。 radial-gradientだけ使いどころがなく使ってこなか…
今日からCSS3の授業に入った。CSS3は前から使っていたが楽しくて久々にテンションが上がる。 最近ではCSS3でできることが多く使われていないサイトは皆無だと思う。 CCS3でできているマウスオーバーアクションなどは大好物です。 (´・ω・`) ただW3Cの行動が…
フォームの授業があった。 フォームは前から教わっていて使っているだがHTML5から採用されたセレクターや属性についてだ。PHPのフォームの授業で先走り的にやってきたものが多い。 ECショップが多くなってきているのでinput type="number"やdatalistは使いそ…
webを作っていると使うことが多いdl/dt/ddの横並び。 dlは文書構造上、定義や説明を意味するため、「面倒くさいからtableやlistでいいか～」とはならない。 文書構造が重要になっている今無視はできない。学校でも習っているのだが覚えては忘れ、覚えては忘…
ふと授業でブロックレベル要素、インライン要素、ブロックレベル要素の違いを講師が説明してくれた。わずか2～3分の話だったが勉強になった。 ブロックレベル要素とインライン要素の違いは分かるもののブロックレベル要素の使い方がいまいち分からなかったた…
HTML5となど宣言文などに関しても変更された部分がある。全体的に省略できたりみじかくなった印象。 文書型宣言 以上から下記へ 言語コード宣言 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 以上から下記へ </html>
今までのHTML4やXHTMLではh1～h6の要素のみで文書構造を表していたが文章の構造を指し示すには不十分なためHTML5では文書構造を表すセレクターが出てきた。 header,nav,footer,section,article,aside等だ。 sectionなどで構築される文書の論理構造のことを、…
昨日の勉強会でコーディングのスピードが遅かったため、練習サイトでコーディングの練習をした。素材は用意されている状態で2枚で4時間位。2ページやると忘れていることも多いことに気付く。そろそろポートフォリオを作らないといけないのでこれも載せること…
今日は学校は休みだったが他の生徒さんが開いた勉強会に参加してきた。ポートフォリオの作品を増やすのが目的だ。個人的にはこういった勉強会は具体的な目的があるため好きだ。 シンプルなグリッドレイアウトだが最近コーディングよりWordPressやMySQLの授業…
HTML・コーディングの練習・エコロジー企業CSRページ 企業のCSRページと思われるコーディングの練習をした。素材は用意されていてカラムがない為非常に簡単な物だ。完成まで30分ほどだった。このタイプのページでコーディングは迷うことは一切ない。padding…
HTML・コーディングの練習-固定レイアウト・スイーツショップ- 今日は固定レイアウトのコーディング練習をした。スイーツショップと言う設定で画像とテキストは用意されていた。固定レイアウトは何度もやっているのでボックスイメージが簡単に湧きやすくなっ…
HTML・コーディングの練習-パララックスCSS- パララックスサイトの練習の為、検索していたところCSSのみにてパララックスを作れることを知った。jqueryによる移動差の計算ができないため非常にシンプルなものなのだが、シンプルな分私にはうってつけだ。 バ…
HTML・コーディングの練習-パララックス横移動- 横移動型パララックスのコーディングに挑戦してみた。スクロールすると横移動するタイプのパララックスプラグインは思ったより少ない。 「右から左へ」動くものを探していたが丸一日調べて見つからなかったの…
HTML・コーディングの練習-レスポンシブデザイン- 今日はコーディングの授業を行った。グリッドレイアウトでレスポンシブデザインのものだ。グリッドデザインだとブロックごとに分かれているためレスポンシブデザインに対応しやすい。 今日は一日コーディン…
HTML・コーディングの練習-固定レイアウト：クッキングクラス- コーティングの練習をした。 素材は用意されていて、固定レイアウト式の2カラムで料理教室という設定のようだ。私はfloatにはoverflow:heddenやclearを使っていたのだか、今回はclearfixを使用…
HTML・コーディングの練習-固定レイアウト：パスタとワインの店- コーディングの練習をした。固定レイアウト式でパスタをワインを扱っている店という設定らしい。素材は用意されていてあくまでコーディング目的のようだ。 ザクッとはレイアウトできるのだが…
授業・コーディング・スライス 今日は授業で存在するサイトを写真に撮り、その画像をフォトショップでスライスしてコーディングし直す授業をやった。サンプルになったサイトは「loft」。 フォトショップは昔から多少なり触っているので基本操作は問題ないが…
レイアウト・グリッドデザイン 規則性を保ちつねに整列させるとデザイン性が高まるらしい。グリッドレイアウトと呼ばれる基本的なデザイン法だ。 グリッドレイアウトで調べるとwebデザインのジャンルとしてひとつあるようだ。私のような素人にはわかりやすい…
