サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大そうじへの備え
az-designlife.site
HTMLでクイズを作りたいけど作り方がわからない コピペで簡単にクイズを作りたい クイズにバリエーションを増やすカスタマイズがしたい この記事は、上記のようなお悩みの初心者の方に向けてHTMLでクイズ作成の基本から応用までわかりやすく解説します。 クイズの作成方法をHTML→JavaScript→CSSと段階的に紹介し、具体的なコード解説も交えて説明します。 この記事を読むことで、独自のクイズ機能をWebサイトやブログに導入することができ、読者の関心を引き、サイトの滞在時間を伸ばすことが期待できます! 特にコーディング初心者でも理解しやすいように、それぞれの要素をしっかり解説し、コピペで使えるコード例を用意しています。 また、当記事の最後には「そのまま使えるHTMLクイズのテンプレート」をダウンロードできるリンクも紹介しています! クイズ HTMLの基本をマスターし、自分のサイトをさらに魅
ヘッダーのグローバルメニューが1部分だけ色が違うサイトを見かけますが、SWELLでも出来るんじゃないかと思いやってみました。 1つだけメニューの色が違うことで目立たせられるので、他のサイトとは違う個性を出すことが出来ます! 当サイトではお問合せ部分の色を変えていますので、実際に変更した手順やコードを紹介していきます。 今回はコピペで使えるようにカラーバリエーションを5種類用意しましたので、利用してくれると嬉しいです。
コンテンツを目立たせる方法は、色を変えたり文字を大きくしたりマーカーを引いてみたりと工夫が出来ますが、一番目立つ方法は「動きを加える」ことですね。 今回紹介するBlocks Animation: CSS Animations for Gutenberg Blocksなら追加CSSやJavaScriptを使うことなくブロックメニューからアニメーションを付けることが出来ます。 特殊なアニメーションブロックを追加するのではなくて、どのブロックにもアニメーションを付けることが出来るのでめちゃくちゃ重宝します! 今回は、使えるアニメーションの種類や設定方法などを詳しくまとめていきます!
サイトを制作した際には、aboutページや自己紹介に経歴やタイムラインを使いたいと思いませんか? SWELLなら独自ブロックの「ステップブロック」を使うことで簡単に作ることが出来ます! 今回は実際にタイムライン風のブロックの作り方を紹介します。
おしゃれなサイトにはコンテンツにマウスホバーで背景画像が切り替わるものがありますが、調べてみると子要素から親要素へCSSでの指定は出来ないようです… さらに調べたところ、jQueryを使えば実装出来るのでは…!?と思いやってみました。 今回は、実際に実装出来た形の紹介とその骨組みのコードを紹介していきます! まだまだ勉強中の為、もっと効率的なコードがあるかもしれません… 実際に実装した形 実際に実装した形を動画でお見せします。 上の動画のようにコンテンツの背景画像に対して、各パーツをマウスホバーすることで背景画像が変わるようにしています。 今回は、HTML・CSS・jQueryで実装しているので、それぞれ紹介していきます。 コード紹介 See the Pen Untitled by Az (@azdesigne) on CodePen. 全体を囲んだ親要素があり、その中の子要素がそれぞれマ
VSCodeの拡張機能には、それぞれコーディング効率を格段に向上させてくれる機能がたくさんあり、どれを導入したらいいのか分からなくなりますよね… 私はなるべく効率よくコーディングをしたくて様々な拡張機能を試してみました。 その中でサイト制作に便利な拡張機能を見つけましたので紹介します。 今回は拡張機能の導入方法と機能別でおすすめの拡張機能を紹介していきます!
サイトのアップロードと聞くと難しそうなイメージがありますが、コーディングさえしっかりできていればアップロードは難しくありません。 この記事ではFTPソフトである「Win SCP」を利用して、サイトをアップロードする方法を紹介します。 サイトをアップロードできるようになることで、ポートフォリオとして自己紹介が可能になり、就職活動や営業活動の助けになります! なにより、自分が頑張って制作したサイトがネット上で表示されるなんてワクワクしますよね! 今回は、私がコーディングしたサイトを実際にサーバーにアップロードした手順をお伝えしていきます。
「SWELL」はブログ記事を書くという点において、めちゃくちゃ書きやすく多機能なテーマとなっています。 Webデザイナー目線から見てもデザイン性がかなり高いので、サイト制作にはバッチリです! しかし、サイト制作・記事作成・SEO対策などの面から見るとカバーできていない機能があります。 その点をカバーできるおすすめのプラグインを紹介していきます! プラグイン導入について WordPressには多くのプラグインがありますが、導入しすぎるとサイトスピードが遅くなり、SEOの評価が落ちてしまいます。 SWELLではテーマ独自のオリジナルブロックやサイト高速化などの機能が含まれているので、他のテーマよりもプラグインを減らすことができるかと思います。 ですが、テーマとの相性やプラグイン同士の相性が悪いとうまく動作しないことがあるので、注意して利用してください。 また、SWELL開発者の了さんが自身の記
プロゲートやドットインストールなどの基礎的な知識を勉強した後は、実際にコーディングをしていきますが、困ったことがありました。 私はプロゲート・ドットインストールを一通り終わらした後にサイト制作をしようとして、サイトを「何のエディター」を使って「どのようにコーディング」をしていいかわかりませんでした… しかもエディターソフトは何種類もあり、どれを使えばいいのか迷ってしまいます。
このページを最初にブックマークしてみませんか?
『az-designlife.site』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く