サイト制作タロットカード占い企画(後編)
デモンストレーション デモページへ JavaScriptでは、あらかじめ0～21番が割り当てられたカードをシャッフルし、山札として用意します。 カードのシャッフルにはフィッシャー–イェーツ方式というアレゴリズムを用い...
サイト制作
サイト制作サイト制作タロットカード占い企画(前編)
前書き ご無沙汰しております。昨年11月30日、横手駅前の交流センターにて、素材画像を除いて自前で作ったシューティングゲームを公開させて頂いてから、長い冬を終えて、遠い時を過ごしたような気がします。 2024年度の第4四半...
サイト制作フェードイン
難易度:★★★★★ MAX 概要 今回は、 ① CSSのグリッドレイアウト② CSSのキーフレーム③ JavaScriptのsetTimeout()メソッド の3本立てで、汎用的な「フェードイン」の動きをご紹介...
サイト制作複合式カレンダー/後編・Dateクラスの扱い方
曜 日 年 月 Dateクラスを展開 Dateクラスは、利用している...
サイト制作複合式カレンダー/前編・クラスとオブジェクトの違い
今回はJavaScriptにおける「クラス」というものと、Dateクラスについて解説したいと思います。 クラスはオブジェクトの設計図やテンプレートとして機能し、classというキーワードで定義され、インスタンス(展開)する為に、...
サイト制作流体シェイプの解析(後編)
前回はborder-radiusプロパティについて取り扱いましたが、今回は時間経過と共に形が変化する流体図形(流体シェイプ)について解説します。 一般的にCSSのキーフレームで作りますが、今回は値を表示したいので、JavaScr...
サイト制作流体シェイプの解析(前編)
前書き CSSのborder-radiusプロパティは、かなり柔軟に値を設定出来るようになっており、1～8つの値を設定する事が出来ます。 以下、4つまたは8つの値でborder-radiusを設定する基本的な方法を書きます...
サイト制作sticky要素の扱い方
難易度：★★★☆☆ 前書きとサンプル CSSのpositionプロパティにsticky(スティッキー)という値があります。これは、absolute,fixedのような絶対配置とも相対配置とも付かないような振舞いをする為、私...
サイト制作【WordPress専用】ヘッダーの作り方(後編)
注意 前編をまだ見ていない方、HTML/CSSを導入していない方は、こちらをご覧ください。 前編 ヘッダー(完成品) Logo top News Works Gallery...
サイト制作【WordPress専用】ヘッダーの作り方(前編)
今回は、レスポンシブWebデザインを用いて、本格的なヘッダーを作りながら、CSS,JavaScriptについて解説したいと思います。 ヘッダーはホームページの根幹をなす部分で、中規模以上のホームページを作る上でも、統一性を保つ上...