絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

26 件中 1 - 26 件表示
カバー画像

【続・続・続・続】ウェブページ制作珍道中…『luxy.jsで動きのあるウェブページを作ってみた』

ココナラでの皆様のお仕事をはじめ、お得意先さまの案件も頂戴いたしておりますが、その合間にウェブ制作の練習をしております。一からHTMLやCSSのコードを作り上げていくので、まずは数多くの練習をして慣れていくしかないかなと思っています。というわけで、ネットでウェブ制作の様々なTIPSを見て実践しているのですが、「luxy.js」というスクリプトがあるのを発見しました。ウェブに載せる写真など、特定の要素のスクロール速度や方向を、速くしたり斜めに移動させたりできるというもの。使い方の掲載されているサイトを参考に、作ってみました。…というページですが、実際にスクロールさせたものをキャプチャーしましたので、ご紹介いたします。▲パソコンでのスクロール▲スマホでのスクロール(1)メイン画像の、人々が上方向に移動する速度よりも奥のバルーンを遅くスクロールするようにし、手前のバルーンは早めにスクロールさせる。(2)そして、赤い服の女の子と紙吹雪のスクロール速度を変えることで、紙吹雪が浮き上がったように見える。(3)犬の風船と子供たちの写真もスクロールを早めて、立体的に見える。そんな効果を出してみました。なかなか面白い効果が出たのでは…と自画自賛しております。ウェブ制作も、突き詰めれば新たな発見ばかり。一般のデザインものと違い、プログラム知識が必要ですが、バグってもあらゆる原因を探して修正する。バグが直ったときの達成感は半端ではないです。※皆様、日頃は私へのご発注、大変ありがとうございます。これからも、様々なスキルを上げて努力いたします。よろしくお願い申し上げます。
0
カバー画像

【続・続・続】ウェブページ制作珍道中…『パララックスを使ってみた』

ウェブ制作のスキルを上げるべく、時間を見つけて何かしらのメソッドを身につけています。コーディングしながら、メモをとる…の繰り返しで、まだまだ未知数の部分や理解できていない部分もあったり、こんなに大変なのかと日々痛感しております。ネットでウェブページ制作についていろいろ調べていて「パララックス」という手法があることを知り、早速取り入れてみました。「パララックス」とは「視差」を意味する用語で、画像に奥行きを出したりして効果を出すことをいいます。というわけで、試行錯誤しながら作ってみたのが「架空の温泉旅館」のサイトです。あいにく、ココナラブログは直リンできないので、動画にしたものを載せておきます。PC版では、背景画像を固定しつつも、要素はきちんとスクロールするように作りました。そして、テキストやボタンなどは下からふわっとフェードインするアニメーションを加えてみました。PC版(スクロールがカクカクしてます^^;)スマホ版…というわけで、これについてもHTMLやCSS、JQueryなどの文章を記載していきますが、階層違いでボタンが機能しなかったり、レイアウトが崩壊するなど、予想外の出来事が起きましたが、とことん原因を突き詰めれば解決するものだと勉強になったのでした。
0
カバー画像

【続・続】ウェブページ制作珍道中…『少しずつコーディングにも慣れてきた!』

印刷媒体や動画の制作に慣れていると、ウェブ制作がいかに大変かがわかります。というのも、印刷デザインや動画編集の場合は直感的に作業ができるのですが、ウェブの場合はHTMLやCSSなどのコードを書き込むことで組み立てていくという、間接的な行程が待ち受けているのです。最近はワードプレスなどもあり、WordやExcel感覚で作ることもできて便利になりましたが、現在使っているAdobeのアプリに「Dreamweaver」というウェブ編集アプリケーションがあり、それを利用しています。白い背景の部分はHTMLと呼ばれる「ウェブの骨格部分」。灰色の部分はCSSと呼ばれる「骨格に肉付けや色などを盛り付けていく部分」。一つずつ数値などを当てはめていき、ダメだったらやり直す…の繰り返しです。ところで、私の場合はウェブデザインの参考本のほかに、Adobeのサイトで視聴できる「ウェブ制作の手引き」動画を見ながらメモをしていました。動画を見ながら実際に少しずつ組んでみて、コードをプリントアウトしてルーズリーフに貼り付けて、マーカーで線を引きメモをしていく…の繰り返し。そうしないと、すぐに忘れてしまう。そのほかに気がついたことを逐一メモをしていきましたので、総ページ数が200を超えました。ルーズリーフの輪に収まらないほどにまで、膨れ上がっています。でも、後々これが大いに役に立つのでした。というわけで、架空の食堂をイメージして作り上げたウェブサイト。ホームのページはもちろん、各ページもスマホとPCで表示が切り替わる「レスポンシブデザイン」を取り入れました。ホームはイメージ写真を背景にドーンと載せる「フルスクリ
0
カバー画像

【続】ウェブページ制作珍道中…

先月にお客様にランディングページのお仕事を頂戴し、Webページ作成のスキルを落とさないように、仕事の合間を利用して演習しています。そして、架空の整体院を想定して、基本的なウェブページを制作してみました。少し縦に長い画像ですが、左がPC、右がスマホでのレイアウトです。設定で、スマホとPCで表示切り替えができるようにしており、スマホではロゴ・文字揃えを中央、PCでは左揃えを基本としました。▲HTMLソース▲CSSその他JavascriptやJQueryなどでブロック(要素)のアニメーション化をしていきますが、今回は基本的にHTMLとCSSの2つを利用して、直接構文を入力することで組み立ていきます。とはいえ、 > や } などの綴じカッコを忘れてしまったり、悪戦苦闘でしたが…。必要な部分には、<!--◯◯-->や/*○○*/でメモしておけば後々の編集もわかりやすくなります。ちなみに、スマホで開く「ハンバーガーメニュー」がありますが、本来ならJavascript・JQueryで機能させるやり方が一般的ですが、いろいろなサイトを見ていて簡単な作り方を見つけたので、今回はそれにしたがってハンバーガーメニューを加えました。▲paddingとmarginの関係も、ブロックを色付けすることで理解できました。ブロックの内部の余白がpadding、外部がmarginでした。▲表組みも、画像化して載せようかと考えましたが、きちんとHTMLとCSSで組み立て。これもいろいろなサイトをまわって「表組みジェネレーター」を発見。その力を借りてHTMLを加えました。というわけで、少しずつウェブ
0
カバー画像

ウェブページ制作珍道中…

最近ではWordPressやホームページビルダーなどで、ウェブページを作るのに難易度が下がってきています。実は20年ほど前にウェブページ作成のレクチャーは受けたんですが、長年携わっていないと忘れてしまうもの。また、Flashがなくなるなど環境も変化しているので、昨年改めてウェブ作成にチャレンジすることにしました。いつもIllustratorやPhotoshopなどのアプリを使っているので、Adobeのウェブ制作アプリ「Dreamweaver」を活用することにしまして、Adobeのサイトには動画でウェブの作り方を学ぶことができるので、それを見ながらメモをする…。そのノートも100ページを超えたかな。Adobeの推奨するやり方は「HTML」や「CSS」などといったコードを編集するというもの。ワード・エクセルなどのように、直接文字や図形を入力して直感的に作るのとは違い、コードを打ち込んではブラウザで開いて確認する。トライ&エラーの繰り返しでした…。というわけで、先日。お客様から簡単なウェブページのお仕事をいただきまして、自分の魂に火がついてしまいました。本格的に、自分のウェブページを作ってみようと。HTML・CSSの編集からスタートしたわけですが、「margin」と「padding」の違いを改めて整理したり、CSSで飾りつけた文字や色やマージンが正確に表示されていなかったのを修正したり…。やっぱり日常的にコーディングをしないと、なかなか覚えられないです。ノートにまとめても、その内容を思い出せなかったり…。というわけで、Dreamweaverとノートや教本と格闘しながら復習すること数日
0
カバー画像

【WordPress制作サービス購入者向け】最低限の準備!サーバー・ドメイン・解析ツールの契約から導入とテーマ購入

こちらのサービス購入にあたり、新規でWebサイトやHP制作の納品を希望される方は、ご自身で設定していただく必要がございます。なぜなら、エックスサーバーとエックスドメインとテーマ購入は、僕に金額を支払うわけではなく、各提供元に支払っていただくからです。特に、エックスサーバーとエックスドメインは記事や画像のデータの管理であったり、個人情報を含むIPアドレスなど、情報漏洩に大きくつながります。WordPressのテーマ購入も、こちら側で全て用意する場合はライセンス取得をしなければならず、法に触れる可能性が大いに考えられるためです。お手間をかけさせてしまいますが、料金は別途でかかることは変わりません。お客様に安心・安全にWordPressでのWebサイト制作と運用をしていただくためですので、ご了承ください。※Googleアナリティクス・Googleサーチコンソールは完全無料でご利用できますので、もしGoogleアカウントのメールアドレスやパスワードをご教示いただけるのでしたらこちらで設定・導入します。その場合は後にパスワードの変更を推奨します。※それぞれココナラブログです。転載も可能ですのでご自由にお使いください。1.エックスサーバー契約〜入金まで2.エックスドメイン契約〜入金まで3.WordPressテーマ購入〜入金まで4.Googleアナリティクス登録5.Googleサーチコンソール登録6.Googleアナリティクス・Googleサーチコンソール紐付け
0
カバー画像

【WordPress】エックスドメインの 契約〜入金まで