webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

クライアントワーク

サイト制作その後 2

mobile friendly test 検索の表示にモバイルフレンドリーでない、と表示されていたのでまずはモバイルフレンドリーテストをします。 https://testmysite.thinkwithgoogle.com mobile friendly だけれども、表示速度に問題があるとのこと。 google search con…

印刷 ノベルティー グッズ製作 | 中野 クロゴ

印刷 ノベルティー グッズ製作 | 中野 クロゴ 中野でカタログ印刷や ノベルティ グッズの企画と製作をする 株式会社クロゴです。 カタログや写真集を 少部数から綺麗に印刷します。 カレンダーやクリアファイルなどノベルティーグッズの製作や 粗品の名入れ…

サイト制作その後 1

制作課題のサイトを本サーバーにアップロードを済ませました。 ここで終わるのではなく、なるべく多くの人に見てもらえるようにします。 さらに自分の作ったページがどのように閲覧されているのか知ることは、今後のデザインに生きてくるはずです。 google p…

video element

「mp4」や 「webM 」videoを html5 video tagを使ってhtmlに挿入する。 video要素には属性値が指定できます。再生時のオプションになります。「loop」,「autoplay」,「muted」 <video autoplay loop muted > 読み込みが遅い場合に代わりの画像を表示させる「poster」属性も重要。 ソース</video>…

jQuery を読み込む順番

制作実習課題にjQueryなど、殆ど使わない予定だったのに、気が付くとどんどん増えていきます。 ファイルによっては(たとえばgooglemapsとか…)読み込む順番によってうまく動作しない、といったことも起こり始めます。 どのように整理するか基本的な考えかた…

header を position:fixed; そして smooth scroll にしたい。

上手くいかなかったときの記述。なにがどのように悪さしていたのかは不明。 ページトップに移動するボタンに<a>がついていなかった。 <div id="content">が閉じていなかった。これは問題外! htmlを修正 <div class="arrow "><a href="#"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></a></div> 結局これは元に戻します。後ほど説明。 cssを修正 headerはposition: fixed</div></a>…

header nav 制作

header制作 <header id="header">が1番外側でwidth: 100%; height: 72px; 色のついた帯のようなもの。画面をスクロールしても動かないように、position: fixed; z-index: 100; その内側に、ロゴと、ナビゲーションを入れる箱を作る。width: 980px; height: 72px;。<div class="wrap01">。floatさせた</div></header>…

制作の注意点 メモ書き

header, footer はbodyに対して100% が常識 例外があるだけ navigation のhoverには、補色など極端に目立つ色を使わない。 あっさりさせる。 全部目立つ=全部目立たない 押させる仕組み、prev-button, next-buttonなどを目立たせない。 pc はnavのボタンを…

制作実習 wire frame

http://ohtafelica.webcrow.jp/clogoWireframe/ 頭のなかにあるアイディア、思いつき、なんでもいいから整理してみようと思う。 具体的な図面に起こすだけで、実行不可能、あるいは思っていたほど面白くないアイディアは多いものだ,と気がつく。 まずは「た…

frame chart

1200-1500 1300-1500 制作課題を作るのはいいけれども、htmlファイルがbrouser上でどのように表示されるのか、気になって仕方がない。 そこで、フレームチャートを作ってみた。 width: 1300px height: 1500pxとwidth: 1200px height: 1500pxの2つ。 おもに…