ホームページ制作 習作集

  • 3D CAD(Fusion360) ポートフォリオ

    WordPressのテンプレート「Espied」を利用して、3Dモデル ポートフォリオを作成しました。 掲載するモデルの点数が多いため、毎日少しずつ更新作業しました。また、サーバーの容量も限られているので、画像を適切な大きさに、かつ圧縮率の高いJPEG形式にしました。

  • Photoshopデータからホームページ制作

    Adobe社のPhotoshopで使われているPSDデータから画像を切り出し、レイアウトをそのまま再現しました。 素材はこちらのフリー素材を使用しました。 iOS、Androidでも表示・動作確認をし、何れもレイアウトが崩れないように細かく調整しました。

  • JavaScript swiper

    JavaScriptのswiperを用いて、画像のスライダーを作成しました。 ボタンをクリック、又は画像をスワイプさせると、画像が遷移します。意図した動作とレイアウトになるまで、かなりの試行錯誤を重ねました。

  • WordPress テンプレート作成

    WordPressのテンプレートを、PHPを用いて作成しました。 WordPressのフォーマットに則って作成しなければならないため、最初は勝手が分からず苦戦しました。

  • JavaScript Study02 スムーススクロール

    JavaScriptのスムーススクロールを利用して、リンク先まで設定した時間で移動するようにしました。近くのリンク先にはゆっくりと、離れたリンク先には素早く、スムーズに移動します。

  • JavaScript Study01 インフィニットスライド

    JavaScriptのインフィニットスライドを利用して、無限にループするスライダーを作成しました。 実装は比較的容易でしたが、途切れることなくスムーズに動作させるのは難しかったです。

  • html5/css3 Study09

    これまで作成してきた物を総合して、ホームページを作成しました。 ボリュームがあるので、css(レイアウトの指定先)が競合しないように微調整を繰り返し、上手く動作するように注力しました。

  • html5/css3 Study08 インラインフレーム

    インラインフレームと呼ばれる方法を用いて、ページの中に別のページを組み込みました。 この方法ならば、限られたスペースでも大きいサイズの物を取り扱えますし、画像・動画等も組み込み可能です。

  • html5/css3 Study07 フッターリンク

    ホームページで良く見受けられる、フッターを作成しました。パソコンでは横一列に、スマートフォンでは縦に重なるレイアウトになります。 スマートフォンでも操作しやすいように、タップの検知範囲を枠内全部に拡大しました。

  • html5/css3 Study06 新着情報

    ホームページで良く見受けられる、新着情報一覧を作成しました。 背景に交互に色を付けているのは自動的に行っていますので、何行でも対応できます。

  • html5/css3 Study05 画像付記事

    ホームページで良く見受けられる、画像と記事が段組になっているレイアウトを作成しました。パソコンでは段組2段、スマートフォンでは縦のレイアウトになります。

  • html5/css3 Study04 画像拡大＆キャプション

    画像にマウスカーソルを重ねると、画像が拡大して下方からキャプションが表示されるようにしました。 画像の拡大とキャプションの表示を同時に動作させられなかったり、キャプションが上手く隠れなかったりと上手くいくまで大変でした。

  • html5/css3 Study03 背景 レスポンシブ対応

    パソコンやスマートフォンなど、画面幅に合わせて自動的に適切なサイズの背景画像が選択されるようにしました。 背景画像を意図した大きさで、画面いっぱいに表示させるのに試行錯誤しました。

  • html5/css3 Study02 縦横レイアウト変更

    パソコンやスマートフォンなど、画面幅に合わせて自動的に適切なレイアウトになるようにしました。 1つ目の物より構造が複雑で、レイアウトが変わっても辻褄が合うようにするのが大変でした。

  • html5/css3 Study01 縦横配列変更

    パソコンやスマートフォンなど、画面幅に合わせて自動的に適切なレイアウトになるようにしました。 htmlの基本構造はPC・スマホ共通で、cssでレイアウトを変更しています。画面幅に応じて並び方を変え、かつ、きちんと真ん中に表示させるのに苦労しました。

produced by Ma510884