connecting...
Google translation for articles :

【WEBデザイン勉強日記】10サイト模写途中経過

nem0.00xem (0) 78 2 0

前回自分のブログのデザインをカスタマイズしてみてまだまだ実力が足りないと自覚したので現在10サイト模写に挑戦しているのですが、今回は途中経過を挙げて振り返りたいと思います。

 

○1日目
1日目はカスタマイズした時に参考にしたサイトを模写しました。ヘッダーの背景画像が若干ずれてしまったりしたのですが、ぱっと見は形になっているのではないかと思います。これは暫くやってて気付いたのですが、コンテンツは940〜960pxくらいに収めるのが丁度見やすいみたいですね。
スマホ表示にした場合ヘッダー画像が伸びてしまって違和感が否めなかったのでそれはその日の反省点となりました。

 

 

 

○2日目
2日目もちょっとお洒落なサイトを模写。1日目とあまり形は変わらなかったので割とスムーズに作業は進みました。ただロゴの配置が難しかったです。画像はヘタに横幅や高さを決めてしまうと上手く表示されないので横幅はmax-width、縦幅はheight: auto;が基本だということを学びました。
こちらもヘッダー画像がスマホ表示にするとおかしくなってしまうので改善が必要です。

 

 

○3日目
3日目はかなりデザイン性の高いものに挑戦しました。告知サイトですがデザインがかなり特徴的で配置に手こずりました。ヘッダーがスクロール追従型だったのでそこが一番難しかったです。Positionをいじる必要があるみたいですね。
しかしこのサイトはスマホ表示を気にする必要がなかったので結構早く完成しました。

 

 

○4日目
今までは比較的デザイン性の高いオシャレサイトを模写していたのですが今回は企業団体の模写に挑戦しました。やはりデザイン系とは全然勝手が違いますね。特にhtmlが面倒くさかったです。企業なので情報を多く掲載していてお知らせやツイッターの埋め込みなどが多くまずその埋め込みの記述でかなり体力奪われました。
勉強になったこととしてはツイッターの埋め込みはツイッターの公式のツールがあるのでそれを利用すれば良いということです。すごいですね。

 

 

 

○5日目〜現在
現在は男性のスーツショップのサイト模写に挑戦しているのですが、企業団体+おしゃれサイトなのでかなり手こずっています。思っていた以上に難しくて現在模写3日目に突入しています。できれば今日中に仕上げたいのですが、レスポンシブにも対応しないといけないので中々時間がかかりそうです。
今回の模写1日目では、ヘッダー画像のレスポンシブ対応がやっと理解できました。レスポンシブ対応させるためには高さは設定してはいけないけど背景画像を表示させるためには高さがないといけない。いつもそこに困らされていたのですが、どうやら高さ÷横幅×100をpaddingに設定したら良いらしく、やっとこさ解決できました。
しかしまだまだメディアクエリなどレスポンシブの課題が残っているので今回の模写でそのあたりをマスター出来たらと思います。

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
Yonnsann
2019-05-19 17:24:24ID:118314

>>えっさん(囚われの身)🐾nemlogツアーコンダクター&コメンテーター🐾::さん
ありがとうございます!ぼちぼち頑張ってます^^

NEMber who posted this article

ネムログ気になったのでライブドアブログからいくつか移行します。

趣味は読書(特に太宰治)、アニメ鑑賞(特に幾原作品)、京都観光。
京都には足繁く通っているので色んな情報を提供できたらと思います。

また、教育実習、学校教員(少しですが)を経験して思ったことも少し書けたら良いと思います。

現在はwebデザインを勉強中。
23747
0