課題
タイムラインをインポートしたら、 「プロジェクト設定」→「カラーマネージメント」 カラーサイエンスを「davinci YRGB Color Maneged」を選択。 カラーページに移動。 タイムライン上のすべてのクリップを選択して、右クリック。 「入力カラースペース」を…
'm' to the 'n'th power→mのn乗 pow(m,n); <html><head><meta charset="utf-8"><title>無題ドキュメント</title></head> <body></body></html>
インチをセンチに変換するプログラムの課題。 formと結果の表示をひとつにまとめる。 赤字の箇所、変数の表示方法に問題があって手こずる。 2回目に記述した時は、inputをinsertにして気づかないまま時間を浪費。 float, int 実数と整数の表記 $inch=floatva…
cotorier cafe pc用に書いたスタイルシートを、メディアクエリーを使ってtablet用に書き換えます。 もし、pc用と、tablet用のカンプを事前に準備してあるならば、両方を見比べて、というよりもtabletの方をよく見ながらhtmlを記述するべきあろう。 display f…
pc用に高さを指定してあった、<header>をスマートフォン用に、高さの指定を解除するときにどうすればよいか？ dreamweaverでは、autoとinheritの２種類が選択肢として候補にあがる。 値として、取れるものを調べてみる。もっと前にやるべきことだよね… いろいろあり</header>…
まずは、PC用にコーディングしてから、レスポンシブに対応させる。 headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。 縦方向のレイアウトはpositionを使う。 本来「縦」に並</p></h1>…
問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…
http://ohtafelica.webcrow.jp/clogoWireframe/ 頭のなかにあるアイディア、思いつき、なんでもいいから整理してみようと思う。 具体的な図面に起こすだけで、実行不可能、あるいは思っていたほど面白くないアイディアは多いものだ,と気がつく。 まずは「た…
1200-1500 1300-1500 制作課題を作るのはいいけれども、htmlファイルがbrouser上でどのように表示されるのか、気になって仕方がない。 そこで、フレームチャートを作ってみた。 width: 1300px height: 1500pxとwidth: 1200px height: 1500pxの２つ。 おもに…
問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが２つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…
石垣島観光ガイド position relative、配置、位置はposition staticと同じだけれども変化が起きる。 その変化は、レイヤーの重ね順が変わるといったことです。 z-indexを使わなくても、その後の要素との重なりの順番が変わる。 background-sizeについては、…
background-size contain、は縦横の比率を維持したまま（スクイーズはかけないで）画像が絶対に切れないように配置される。比率が合わない時は背景色が見えてしまう。下の例だと画像の横サイズ合わせ。 cover、は縦横の比率を維持したまま（スクイーズはかけ…
最終的には、レスポンシブ対応にする。 メディアクエリーを記述しやすいように気をつける。 box-shadowの記述がトリッキーなのが気になる。 ４隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈…
問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか？…
Make sure that "Number Lock" is switched on. Don't release the "Alt" key until after you've typed the alt code. 自宅のPCにはテンキーがないので、numlockして、altキーを押しながら、２３３つまりKLLのキーを押す。 無事にアキュートアクセント付き…
web writting - 中に書かれている言葉の価値の追求 人々は自分の目的を達成しようとするときに、どのようなキーワードで検索するのか。 web は結論から記述する。行間、言外はない。 キーワードで、伝えたい事が正しく伝わるのか。 サイトの title 、h1、bod…
Q10 いろいろ調べて、記述してみました…が 画像ファイル名を任意に設定する方法はないものかと。 この場合は、ファイル名が0から始まるという縛りがあります。 CSSに cursor:pointer; を記述するとそれっぽいね。 CSSのリセットを忘れるとバチが当たるね。 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q</title></meta></meta></head></html>…
Q8 「else if」を「if else」と書いてロスタイム。 if文は記述の方法を変えたほうがいいのかもしれない。 <html lang="ja"><head><meta charset="utf-8"><title>Q8</title><script>function kuji(){ var rdm=Math.random();if(rdm<0.25){ document.getElementById('ans').innerHTML='本日の運勢は、大吉です。';}else if(rdm>=0.2</meta></head></html>…
Q5 ｄを書き忘れてロスタイム。しょっちゅうやっているね… <script> var d=new Date();var year=d.getFullYear();var month=d.getMonth()+1;var date=d.getDate(); var dayIndex=d.getDay();var week=new Array('日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '…
Q3 論理演算子の整理。「and」=「&&」、「 or」＝「||」、「 not」＝「!」 比較演算子の確認。 「等しくない」＝「！＝」 余りを、列挙しているのはおしゃれでない。いい方法を聞く。 if , else if, else文は最後の波括弧に「；（セミコロン）」をつける。 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title></title></meta></meta></head></html>…
Q01 ポイントは、メイン画像にname属性をつけること。 id , class はCSSを使うようになってからのやり方、だそう。 name 属性は旧式のやり方。 要素の値を使うときは、name属性を使う。 onMouseOver="mainImg.src='abc.jpg`" ダブルクオーテーションの中は、…
予想通りの結果。ここからどうするかを考える… なにを、どのように繰り返すのか、頭を整理するといいのだろう。 <script>var ifor(i=1; i<=9; i++){ document.write('<tr><th>'+i+'</th>'); var j for(j=1; j<=9; j++) { document.write('<td>'+i*j+'</td></tr>'); }</script>…
最初の if から緑のセミコロンまでが１文、なのかぁ。 赤いセミコロンをなくしたら、うまくいった。 セミコロンはカンマの代わりではないのであります。ピリオドなんですね。 見やすくしようと（自分にとってですよ）波括弧の位置を変えてみたのだけれども、…
HTML <body><div id="container"><p><img src="img/ph01.jpg" width="600" height="400" alt="ph01" name="mainImg"></p><ul><li><a href="#"><img src="img/s01.jpg" alt="s01" onMouseOver="mainImg.src='img/ph01.jpg'"></a></li><li><a href="#"></a></li></ul></div></body>
メイン画像の大きさでファイルを新規作成。今回は960px*640px。 ５枚の写真を別々のレイヤーに配置する。 各々のレイヤーの名前を、ph01-ph05と割り当てる。 一度この状態で保存。 「ファイル」「スクリプト」「レイヤーをファイルに書き出し」 次にサムネイ…
どこがうまくいったのか？ よくわからないので、振り返る時のために保存しておきます。 <script>function dice(){var rdm=Math.random();var dice=Math.floor(rdm*6+1);var img='<img src="img/'+dice+'.jpg" width="61" height="61">';document.getElementById('ans</script>…
http://ohtafelica.html.xdomain.jp/biz/ フッターのナビゲーションを修正 li の幅を揃えないで、文字の両サイドの空きを揃えるように修正。li a にdisplay: block;しない。文字の左右にpadding を指定。 要素検証して、ul に必要な幅を計算する。各々の、li…
卵料理カフェ 道は険しい。時間がかかりすぎだ。きょうはこれまで。 p要素は２次元空間でどのように広がっているのか？まだわかっていない.… ミスタイプでハマるケースが多すぎる。 html, body, h1, h2, h3, ul, li, footer{ margin: 0; padding: 0; line-he…
2column layout floatするには幅が必要。 大きいブロックをフロートさせて、小さなブロックは成り行きにした。 <p>はパラグラフであることを思い出した。 段落と段落の間は、p{ margin-bottom : 16px;}、のようにまとめて指定すると楽。 imgの周囲にマージンを</p>…
1column layout 面として、幅があるから左右の位置指定ができる、アタリマエのことをもう一度確認する。 #containerの幅を指定すれば、bodyに対して左右の位置を決められる。例えば、margin: o auto;といった具合に。 １カラムの場合は、#containerの中央に…
