Webデザイン

HTMLのaudioタグを用いて音楽をウェブサイト上で再生させる方法を解説します。audioタグ１つで見た目がきれいなプレイヤーが作成できます。ダウンロードを禁止するように設定する方法も合わせて紹介します。

ブログなどのウェブサイトのページにGoogle Mapを埋め込み、表示させる方法を解説します。グーグルマップで特定の地名を検索し、共有ボタンから埋め込みを選択してHTMLを取得することができます。レスポンシブ対応させて表示画面に合わせてウェブサイト上で表示される大きさも自動で調節することができます。

canvasを利用してhtmlとjavascriptで画面の下から泡が浮き上がるアニメーションを作成します。泡の数や色、出現範囲を変更してみます。

CSSで利用できるFlexboxというレイアウトに特化したモデルを使用して、ブロック要素で作成されたシェアボタンデザインをきれいに並べられます。

CSSを使ってWebサイト上で表示されるテキストの背景色を変更する方法を解説します。spanタグで範囲指定を行うことでテキスト外にはみ出すことなく背景色を変更できます。linear-gradient()関数を使用することで、マーカーのようなアンダーラインを引くことも可能です。

javascriptにおいてasync/awaitの役割と使い方について実際の実行結果を示しながら簡単にまとめさせていただきました。Promiseについても紹介しています。

Webサイト上でマウスオーバーに合わせて拡大、縮小するオブジェクトをCSSを使って作成してみました。コピペOKなのでアイコンや写真などに動きを与えたい場合にご活用ください。

Webサイト上でページ内リンクで推移するとき、なめらかにページをスクロールさせるCSSコードとjQueryコードを紹介します。Webデザインに手を付け始めた方は是非ご覧ください。

はてなブログにおいて記事の目次を表示させる方法について書いています。はてなブログに備わっている編集ツールできれいな目次を作成することができます。

jQueryというプログラミング言語を使ってWebサイトに簡単な動的処理を実装させてみました。Webサイトに躍動感を与えることができるので、これからjQueryを始めたいという方は是非この記事からお試しください。

jQueryというプログラミング言語を使ってはてなブログ上で簡単な動的処理を実装させてみました。Webサイトに躍動感を与えることができるので、これからjQueryを始めたいという方は是非この記事からお試しください。

はてなブログにおいて問い合わせフォームを作る方法法を書いています。問い合わせフォームから様々な仕事の依頼やお問い合わせを受信できるチャンスが増えますので、Webサイトで集客をご検討の方は是非ご覧ください。