ROCK

一旦完コピを目指して作成していたWebflowのホムペですが、なんとなく再現出来てその後、STUDIOでは出来ない機能を色々入れていたら、訳が分からなくなって来たので打ち止めにしました。出来る事が多すぎるのと、出来るけど実験以外ではこんな機能は使わないだろうと言うものも多い気がします。あと、触ってないボタンも沢山ある。HTML等詳しいと押さなくても分かると思いますが、押すとデザインが壊れそうなので押していません。 前回の記事 Webflowのホームページ 再現したい事が出てきたらまた触る気もしますが、ここで一旦、現状の無課金Webflowで出来て、現状の無課金STUDIOで出来なかった事をなんとなく上げて行きたいと思います。有料にしてコードを書き始めたら再現出来るのかどうなのかは不明です。 標準装備で楽しい動きがつけられる あちらのページのNavigationとサイドの要素をホバーさせると、回転したり跳ねるような動きをしますが、こんな動きが色々標準であって楽しいです。最下部の魚にもつけてみました。マウスをのせて外すと魚が逃げて行きます。ただ、ホバーってPCじゃないと意味無いんですよね。ページをロードした時にも少し動かしてみましたが、STUDIOと似た動きなのであまり違いが分かりません。Javascriptで動かすホバーとCSSで動かすホバーとで種類があるようです。 文字にグラデーションがつけられる あちらのページのトップのタイトル文字にグラデーションをつけてみました。文字の透明処理はSTUDIOでも出来た気がします。 単位に%（とか）が使える Webflowでは文字やボックスに使える単位が色々あります。%もそのウチの一つですが、STUDIOでは画面幅の100%で文字を入れて、ページサイズに合わせて等倍で縮小と言った事が出来ず、ブレイクポイント毎にサイズを調整するしかない（画像にするか）と思いますが、あちらでは自由にレイアウトが出来ます。これはデザインをする上でとても重要な気がします。マージンやパディングにも%等が使えるので、ページ幅に合わせて同じレイアウトを保つことが出来ると思います。 自動のスライドが作れる STUDIOでもスライダーが使えますが、あちらでは自動で動きます。また、ページ移動のエフェクトも選べるのでちょっと変えてみました。有料にするとSTUDIOでも…

WEBデザインの勉強と言うか、コーディングを避ける為にノーコードを勉強しようと始めた当ブログですが、当初の予定ではこれを最終的にWordPressと言う奴で再現と、なんとなく思っていました。世界の何割（三割?）かのwebページはWordPressで作られているとか聞くし、グーテンベルグ？と言うエディタでノーコードっぽく作れるかもとも思っていたのですが。 それにしてもコードを書く（グーテンベルグがどれぐらいのものか分からない）のは大変だし時間がかかりそうと思っていた所、ふと、STUDIO以外でhtmlを出力出来るサービスがもしかしてあるのでは？と思って検索。すぐに「Webflow」と言うサービスを発見。これもSTUDIOのようにノーコードでページを作成出来て、しかも最大の魅力として有料だけどHTML、CSS、JavaScriptが出力出来る！これを習得出来たらHTMLを出力してPHP化、WordPress化出来るのでは？と思い、とりあえず一旦STUDIOのページをWebflowで作り直してみる事にしました。 こちらです。 基本的に自分のホムペは無料で維持しようと思っているので、無料で再現出来るのか？と思っていたのですが、出来る所と出来ない所がありました。一番がページを2ページしか作れない事で、しょうがないのでトップページとブログのページだけ再現して、以下にSTUDIOで出来て、Webflowで出来なかった事をなんとなく上げて行きたいと思います。 2ページしか作れない 先にも少し触れましたが2ページしか作れない。と、言いつつCMSのページが50ページ、50記事作れます。これの他に2ページなのでトップページと、blog一覧のページを作りました。他に、404のページと、検索結果のページ、パスワード保護されたページがある場合、入力のページを作れるようです。今回404は作っておきました。 とりあえず英語と用語に躓く Webflowはノーコードツールとして海外では一定のシェアがあるようですが、日本語版が無いので日本では流行っていないようです。一旦慣れるとSTUDIOとほぼ同じ操作感ですが、Webflowの方が出来る設定や機能が多いので、STUDIOしか知らないと何の機能なのか分からない箇所もあると思います。それと、設定内容がHTMLなどの用語で書かれているので、HTMLが一切分か…