※2020年1月27日追記しました。»該当部分へ飛ぶ前々回の記事で「今のサイトをリニューアルしたい」と言及しました通り、現在只今、絶賛(?)リニューアル中でございます。ナビゲーションメニューは実装していないし、トップページしかないんですが、初っ端から見た目が大幅に変わってるので、ちょっとドヤ顔でお披露目したいと思います(笑)ちょっと拙いですが、PC・タブレット・スマホそれぞれのプレビュー画像を用意しました。ページを表示しているデバイスやウィンドウのサイズによって画像が変わります。現状のサイトはこうです↓(画像をスクロールしてみてください)それが最新版(未完成)ではこうなります。↓(画像をスクロールしてみてください。トップの画像は仮置きです)会社でのやり方をパクったところもありますが、BootstrapとSassを使ってコーディングしています。本当はしっかりデザインも作成してからやるべきだったんですが、コーディングやりたくてうずうずしていたので、ざっくりワイヤーフレーム考えただけでいきなりコーディングに入っちゃいました。一目見ていただいて何が違うかお分かりになるかと思いますが、全画面レイアウトが爆増しています。現状のサイトでは、まあトップページ上部は頑張って幅100%ぐらいにしてますが、高さが中途半端ですね。それ以外は背景白でこじんまりと収まっています。今はスマホからアクセスする人が多いとはいえ、PCからアクセスする人も普通に多いです。昨今の大型スクリーンで見たらかなり地味な感じになると思います。異世界の雄大な世界観を表現するにはちょっとインパクトが弱すぎるレイアウトだと思うんですよ。いうわけで大型スクリーンでもタブレットでもスマホでも雄大な世界観の表現を維持するべく、全画面レイアウトをやりまくってみました。......というのは口実で、本当は、今までわからなかったから避けてたものを今回身につけたからやってみた、ってところなんです。画面高さいっぱいに要素を広げるのがわからなかったんです。パララックスに苦戦iOS対応しないとかw地味に苦労したのがパララックス効果の実装。PC表示だけなら「background-size:cover;」と「background-attachment:fixed;」を併用できるはずが、iOSではできず、代替策を探すのに一苦労。疑似要素を用意して、それを「position:fixed;」にすると良いというけれど、複数の背景をパララックスしたいときには向きません。探し回った挙句、下記のリンクのものがわかりやすかったのですが、背景画像の上下に謎の余白が発生したり、思うように背景画像が配置できなかったり、そもそもの説明で書かれているコードが実際のデモと違ってたりして、ちょっと難がありました。スマホやタブレット含めSafariでスクロールする時、なぁんか背景がちょっとピクピクします。これらの不具合はデモサイトでも同じです。プラグイン不要の基本的なパララックス効果をサイトに実装するなのでトップのヒーローセクションと、世界観やキャラ紹介をしているセクションでは、上記のパララックスを使いつつも、自己紹介のセクションだけはCSSのみで疑似要素の背景を固定したやり方を取ることにしました。背景全体が固定されるので、ついでに概要セクションのところも背景を半透明にして固定した背景画像が見えるようにしました。結果としてめちゃくちゃ華やかになりましたけど(笑)↑もちろん、こんな行き当たりばったりなやり方は仕事では絶対やってはいけません。今回の件はあくまで自分の腕試し、及び勉強や遊びの場だと考えています。Sassを使って、マウスオーバーも華やかにSassの便利なところはHTMLみたいに入れ子構造でスタイルを書き込めることです。マウスオーバーしたとき複数のスタイルの指定をすることが容易になります。今まではただ文字の色を変えたり、下線をつけたり、画像をややふわっと拡大させたりと割と地味なものでした。このブログのテンプレートを作った方がちょっと厳しいこと言ってて、スマホやタブレットでタップしたときマウスオーバーイベントがあるとウザいことがある、みたいなことを言ってたこともあったので、その影響でちょっと控えめになっていたところがありました。それはただタブレットやスマホサイズの時にマウスオーバーイベントを設定しなければ良いだけのことで、それ以上のサイズの時は大抵の人はパソコンを見てるんだから堂々と付ければいいじゃん、と思いました。(というか、実際の案件でパソコンサイズではガンガンつけろと言われたし)CSS(Sass)でギャラリーページのリンクを盛ってみる私は以前から「NxWorld」というブログで、webデザインに関する情報を得ているのですが、そこでちょっとおしゃれなCSSアニメーションをみつけました。画像をマウスオーバーすると、その後ろから複数の画像が顔を出すというもの、この先に写真集や画像集がありますよというアピールに使えます。イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプルこれを参考にし、パソコンサイズではマウスオーバーで画像が複数顔を出し、タブレット以下ではマウスオーバーをやめる代わりに最初から複数枚の画像を重ねたまま出す、というようにしてみました。「最初から複数枚並べたPNG画像でも作れば良くない?」という声もありそうですが、無駄に画像データ増えるだけだし、あまりスマートじゃないですよね?リアルと同じように重ねてずらすというレイアウトをCSSに任せた方がいいと思うんですよ。DreamweaverはSassやJavaScriptのコーディングに向いてない気がする私は今の会社に入社する前までは、ずっとコーディングはDreamweaverを使ってきました。職業訓練でもこのソフトでコーディングするよう覚えたし、5年前バイトしてたクソデザイン会社でもDreamweaverでした。いつも普通のCSSでコーディングしてきました。ところが、今の会社に入ってからはこのソフトは使っていません。システム系の会社であるからか、使い勝手が悪いようです。その代わり、PhpStormというソフトを使っています。最初は戸惑いしかありませんでしたが、このSassを使ったコーディングに慣れてくると、Dreamweaverが不便であると感じるようになってきました。その一番大きいところが、補完機能が弱いことです。{}」と記述し、その中にスタイルを書き込んでいくものでした。{}」と書いて記述することが出来ます。前者より後者のほうが圧倒的に楽なんですが、DreamweaverはこのBootstrapのメディアクエリの記述の補完をしてくれません。これでは入力ミスをしてスタイルが適用されない、という事故が多発してしまいます。SassだけでなくJavaScript(jQuery)の補完もされません。これはコーディングする際とても大きな問題です。仕事で使うソフトを自分用に買いました。(月額税込¥1,133で‬)また、Sassのファイルはそのままではスタイルが適用されないので、CSSに変換(コンパイル)する必要があります。Dreamweaverにもコンパイルする機能はあるものの、複数の分割(パーシャル)ファイルをまとめてコンパイルすることができないようです。いう場合はコンパイル専用のソフトウェアを使うしかありません。仕事で使ってるコンパイルソフトがmacしか使えない物なので、自宅では無料版でWindowsでも使えるソフトを使っています。Dreamweaverにあるテンプレート機能はPhpStromにはないし、会社で複雑に管理しているサーバー云々はさっぱりなのでアップロードするときはDreamweaverに頼ります。詳しいことはまだまだ勉強中ですが、Dreamweaverは手軽にコーディングからアップロードまでできるソフトであるのに対し、PhpStormはより専門的に、細かいシステマチックな分業に向いてるソフトなのかなと思います。【追記】もっと格安でもっと良い方法があった会社の人からのアドバイスで、Phpを構築しないのならWebStormを使った方が良いとのことでした。うん確かに、PhpStormより格段に安い。Dreamweaverみたいなテンプレートを作りたいならPugを使うと良いよと言われました。CSSでいうSassに相当するもので、Sassと同じくコンパイルする必要がありますが、今私が使っているSassのコンパイルソフトでできるみたいです。WWF、日本ワイルドライフアート協会(JAWLAS)会員。WEBコーダーのひよっこ。北米先住民、アイヌなどの北方狩猟民族をモチーフにしたオリジナルファンタジーを創作しています。海外旅行が好きで、現地での体験も大いに影響しています。!!※ブログの概要や注意事項などは、メニューの「About」をご覧ください。LINKSpixivもやってます。よろしければご覧ください。20202020年、あけましておめでとうございます。