2021.12.25イベント・キャンペーン
第10回 デジハリ京都のスタッフ(Web業界未経験者)が、デジハリのWebデザイナー専攻の勉強をしたらどうなるか？ ～最後の関門[中間課題]の巻その②～
こんにちは。スタッフのフジワラです。
第10回目です。今回は、前回完成させましたデザインをもとにコーディングを行います。
まずはPCサイトの作成ですね。これが終わればスマートフォンサイトの作成ですが、画面サイズの変更させた際の処理をCSSに追加するだけなので実はどちらから進めても問題無いんですよね。
昔人間の私は、勿論PCサイトからの作成です。動画学習でもそうでしたし(言い訳)。。
～最後の関門[中間課題]の巻その②～
目次
- 課題のつづき
- 最後に
課題のつづき
超真面目人間な私は、迷わずコーディングパートで実施した企業サイトをベースにスタートします。、、手を抜いた訳では無いですよ。何事も時短と効率化ですよね(言い訳2回目)！
真面目なお話、このような対応による効率化はWeb制作会社でも日常的に行われているそうです。ただし！変遷の激しいWeb業界ですから都度確認を行い変更が必要であるものそうでないものをチェックしておく必要があります！
今回はそういったことも無いので(多分)、そのままです。。しかし、早速ヘッダーの部分から問題に。
＜デザインで制作したヘッダ。メニューにルビを入れてます。＞
こういう細かな所さんは、動画学習では習って参りませんでした。トレーナーに教えていただく事も大事なのですが、なんでもかんでも聞いていては自分の成長につながりません。 なので、まずは自分で調べてやってみます。その上でトレーナーに問題ないかチェックしていただくことにしました。 私が調べた検索ワードは、「CSS ルビ」ですね。はい沢山出て参りました（ところで、なんで「ルビ」を「ルビ」というかご存知ですか？）。 検索結果より、いくつかの使用例を参考に実際にやってみました。くれぐれも一つ検索結果で判断するのではなく、複数のサイトを確認して自分のモノとして取り組みましょう！ ルビの語源は、英語の文字サイズには色々な愛称がありその一つに「ruby」があったそうです。当時日本でふりがなに使用されていたサイズがrubyに似たサイズからそう呼ばれるようになったそうです(すこしおりこうさんになりました)。
＜rubyを使いました。何も言わなくても良いです。理解しております。＞
さっきまで偉そうな事を言っていたのに。。デザインと比較して左詰めになっておりません。。2つの文字をdivで囲って上部をルビとして調整しても良かったのですが、まぁ、それはそれで見やすくなったし、と勝手に自分を納得させつつ進めていきます(コーディングを忘れているとは言わない。。)。
次に困った所さんはここですね。
＜なんでこんな複雑なデザインにしたんやろ。。＞
最初は、CSSでコツコツとやっていこうと思い試行錯誤を行いましたが色々な文字やサイズを複雑に組み上げていくうちに正直訳が分からん状態となりました。
＜こんな状態。。これでも色々イジっているんです。。＞
そういう時は、諦めも肝心です。ココの部分は、デザインのPhotoshopからpngデータとして取り出し画像を貼り付ける事で解決させます。 制作会社の現場では、こういった事もCSSで実現することで検索ワードのヒット率を上げるため作る必要があるのですが、初心者のくせに調子に乗りすぎましたね。。 またデザインしか知らない人間は、コーディングの事も考えずデザインしてしまうのでコーダー泣かせ(怒らせ？)の一つでもあります。デザイナーでもコーディングの知識は重要だ、と思い知らされました。 そんなことをしながら進めて行くと、案外すぐにコーディングを思い出すものでその後は大きなトラブルもなく完成！
ここからが、本日の関門です。というのも、実際自分がデザインしたものをサイトにすると、デザイン時は気にならなかった行間やスペースなどがすごく気になるのです！ こういった差を早い段階で埋めることが出来るのがプロというものなのでしょう。そういえば、トレーナー数名の方からも共通して行間の大切さを仰っていました。
＜完成！＞
最後に
いかがでしたか？業界未経験が自分でデザインしたサイトのコーディング(PC)を完成させました！
少しでも楽しそう！実際にソフトを触ってみたい！と思った方は、ぜひ体験会で実際にやってみましょう！
受講体験会の様子はこちら
いやー、なんとも楽しい時間でしたね(棒)
次回は後半戦、スマートフォンサイトとJavascriptの実装です。実は既に進めているのですが、開始当初はこの調子でスマートフォンサイトもガンガン進めれるやろ、、なんて考えていた時代が私にも有りました。。
ではまた。
STUDIO京都では、無料スクール説明会を実施しています！平日・土日ともに10時～20時まで開催していますので、お気軽にご参加ください。
ZOOMでのオンライン対応もしておりますので、ご自宅からでもご参加いただけます。
※お申し込み/お問い合わせは、WEB・お電話・メールにて承っております。
Tel：0120-696-810 Mail：kyoto@dhw.co.jp