サイト制作

サイト制作

【WordPress専用】ヘッダーの作り方(前編)

今回は、レスポンシブWebデザインを用いて、本格的なヘッダーを作りながら、CSS,JavaScriptについて解説したいと思います。ヘッダーはホームページの根幹をなす部分で、中規模以上のホームページを作る上でも、統一性を保つ上で、大半が決ま...
サイト制作

【WordPress専用】グリッドレイアウト

今回は、WordPressでグリッドレイアウトを実現する際のヒントを提供出来たら幸いだと思います。例えば、WordPressのカラム操作では、3カラムであれば、どこまでも3カラムとなり、ロー(縦)方向の長さも、heightプロパティの基本操...
サイト制作

点灯パズル

もう20年も前の事になりますが、子供の頃、現在のタカラトミーが2000年に発売したライツアウト※に熱中していました。これは、どういうゲームかと言うと、一つのマス目を押すと、そのマス目と共に、上下左右のマスのランプが消⇔点へと反転するものです...
サイト制作

【CSS】見出しの左右両端に線を入れる

難易度:★★★☆☆試作およそ93px:743px:93px(画面幅1023pxで) タイトル テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキス...
サイト制作

お洒落なメインコンテンツのレイアウト例

難易度:★★☆☆☆この頃は、汎用的なウェブデザイン/レイアウトの知識や知見を広げる方向で、仕事に取り組ませて頂いております。今回は疑似要素とz-index,opacityプロパティを変更する事で、従来では2カラム仕切る所を、仕切らずに奥行き...
サイト制作

【CSS】疑似要素とpadding,positionプロパティ

難易度:★★☆☆☆四方にpaddingを設定した場合今回は、私の苦手な疑似要素を用いて、親要素にpaddingがあり、子要素がposition: absolute;配置である場合、配置の基準位置はpaddingの外側になるか、内側になるか試...
サイト制作

ピース・ソート・パズル

前回の記事(4月15日)で取り上げたものを発展させ、ドラッグアンドドロップで、ジグソーパズルを作りたかったのですが、座標の位置関係などの問題から、今後の課題です。今回は、位置を入れ替えるプログラムと、ピース一つ一つの座標を、配列化した定数配...
サイト制作

【JavaScript/PC専用】ドラッグアンドドロップ

この記事を書いているのは2024年2月2日ですが、冬も半ばを過ぎ、暖冬傾向が顕著になっているようです。2024年1月の平均気温は横手市が1.1℃で、最高記録タイ、湯沢市が0.9℃で、2020年の0.5℃の記録を更新しました。関東の方でも野菜...
サイト制作

【JavaScript/エフェクト】窓拭き

私が初めてプログラミングに出会ったのは2019年。p5.jsというライブラリを用いた学習教材に触れたのが最初でした。公式サイトは日本語対応ではありませんが「非常に詳細に解説した」日本語書籍「p5.jsプログラミングガイド」があります。(公式...
サイト制作

紙芝居式スライドショー(過去最難関)

この記事の公開日は2024年2月15日ですが、書いている現在は2023年12月27日です。私が会社に入ってから17か月が過ぎ、お陰様で、本当に充実した20代最後を送らせて頂いています。このまま何事もなく、30歳の誕生日を迎え、新しい春を迎え...