青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Webデザイン

デザイン上のボタンと、実際のヒットエリアと、ヒットエリア外の挙動。

qiita.com というQiitaを読みまして。 そういえば自分も以前やったプロジェクトでデザイナー、アートディレクターにヒットエリアについて後々けっこう言われたなあ、と。 ヒットエリアと、更にはヒットエリア外の挙動も。 特にモーダルはそうだと思うんです…

画像ってJPGとPNGとGIFとSVG、結局どれを使えばいいの。

uxdesign.cc これが参考になります。 png 背景に透明処理が必要なもの 例として、シャドウが付いている、テキストのみの書き出し、角が丸い jpg 四角くて背景があるもの 例、メインイメージ、シャドウが付いていないボタンなど gif 色数が少ない画像。 (デ…

Webで画像のトリミング、backgroundを使わずに、今度はobject-fit。

tech.motoki-watanabe.net とか書いといてあれですが、 画像をCSSでBackgroundで指定する方式は単純なプロジェクトならばいいものの、画像はそもそもスタイル定義というよりコンテンツ定義で、HTML側で指定したほうが良いケースが多い、と指摘を受けました。…

HTMLで「1つのタグにidを複数指定」は出来ない!

<div id="imgTop js-imgTop"> みたいなこと出来るのかな、と思いやってみたら出来ない。 なんでかなーと思い調べてみると teratail.com 出来ないんですね、Classでは出来るということを知っていたのでidも同じ挙動かと思っていました…! <div id="imgTop" class="js-imgTop"> というわけでこんな感じにしました。 ちなみにな</div></div>…

はてなブログのデザイン、サイドバーをちょこっとカスタマイズ

こんな感じに。 sentence.hatenablog.jp 使っているテーマ「Sentence」の作者さんのをそのまま使いました。 shirokai.hatenablog.com www.royalnaught.com ここを見るとはてなブログではClassで指定するだけでいろんなWebアイコン使えるみたいですね。Instag…

久々にポートフォリオサイトを修正した。

ポートフォリオという表現が正しいのかは怪しいが、 Motoki Watanabe | Engineer, VJ の修正をした。 主にスマホからの見た目。 写真を減らしたり、VJについて書いてある部分を調整したり。 なんだかんだでスマホから見られることのが多いからね。 あとはWOR…

ポートフォリオの画像の大きさ調整。

ポートフォリオ画像の大きさバラバラやないかい 大事な作品の写真、かなりてきとーに選んでてきとーな大きさに加工して使っていただけだった(とりあえずサイトにちゃんと表示できるかとかそっち優先してた) ので、ちゃんとPhotoshopで加工した。

Safari、もしくはスマホから見るとカラム落ち(一番右のカラムが下に落ちてしまう) が直った!!!

歓喜 嬉しすぎる もうこれしか言えないです。笑 <div class="row"> を <div class="d-flex flex-row flex-wrap"> にしたことで解決。 col-md-4 のwidthを33.3%から33.2%に変えるとかも調べたら出てきましたが、 今の技術ならFlexbox で解決出来ました。 d-flex でFlexboxにして、flex-rowで普通に左から詰める。 flex-</div></div>…

Bliskってブラウザ、スマホ表示も同時にチェックできてめちゃくちゃ便利。

なんですけど iPhone SE サイズ(widthは320px) でとりあえず作っていて。 こんな感じ。 なんですけど、 motoki-watanabe.net アクセスしてみると、 あれ〜〜〜〜〜〜 なんか崩れてる〜〜〜〜〜 って感じで悲しいです。 ていうかまずもってSafariで見ると崩…

スマホの画面の大きさのときはBootstrapでグリッドの分け方変えたい〜〜〜

なんでcol-xs-9 とか指定してたのに効かないのかな〜〜〜 って思ってたら。 <div class="col-md col-xs-12"> ではなく <div class="col-md col-12"> でした。 Qiitaとか見てやってたけどやっぱ見るべきは公式のドキュメントですね。 反省でしてます。 Bootstrap4からxsって指定はなくなったらしい、たしかに実質全部の</div></div>…

スマホ用のワイヤーフレーム作り終えた & スマホのときはメニューを消すことできた

いやもうタイトルでほぼ全部言ってますが やっとワイヤーフレーム全部作った。 いやまあそもそも元々スマホ用に作っていたやつあったから、 実質組み替えただけ、っていうかそんな感じなんだけど、笑 進捗は進捗ですよ嘘はついてない、うん。 WORKSは検討し…

スマホ用にワイヤーフレームを作ってる(なう)

スマホ表示用のワイヤーフレーム作成にとりかかる や、今までも既にあったのだけど。 昨日も書いたけどiPhone7だと375pxだけどRetinaだから750pxで表示されると思ってたから750px前提で作ってたら ね、死んだ。 320px(iPhone SE)で作ればiPhone7でも内容表…

スマホ対応させようとがんばった結果わかったこと

iPhone7は画面の横幅375pxだけどRetinaだから750px…?? だと思ってたんですよ。 だから、 @media screen and (max-width: 768px) でスマホを切り分けて、 width: 750px にすればiPhone7だとぴったりで表示される!!! と、思っていました。 現実は甘くなか…

ポートフォリオをスマホ対応させようとした

ポートフォリオをスマホ対応させようとした けど、なかなかうまくいかなかったです。 パソコン表示では出来ているので、 768px以下のとき、widthを750pxにしてーって指定したら、 iPhone7って375pxだけどRetinaだから750pxになる…わけではない…?? なんか確…

ポートフォリオのデザイン考えようとした

今日はポートフォリオを作ろうと思って こんな感じでAdobe Xd使ってワイヤーフレーム作ってみようとしたり Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ これを見つつ色々考えたりしてた。 正直めんどくさいけど、デ…