※Web開発 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！
前回の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 ...
2023-10
※Web開発 
※Web開発 CSS z-indexの使い方：CSSで重なり順を指定する
前回の講座 CSSのpositionを総まとめ！absoluteやfixedの使い方は？ 今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。 この記事の目次 z-indexの使い方 効かないとき...
※Web開発 【CSS】justify-contentの使い方や効かない原因を解説
Web制作をしていると、要素を横並びにするレイアウトをよく使います。そこで「横並びにした要素を均等に配置したい」「両端の要素を親要素の端に揃えたい」などと思うことはありませんか？ そのようなレイアウトを作成するには、display: fle...
※Web開発 フレックスボックス
フレックスボックス(Flexbox) は、アイテムを行または列に並べるための 1 次元のレイアウト方法です。アイテムがたわんで（伸びて）追加の空間を埋めたり、縮んで小さい空間に収まったりします。この記事では、すべての基本事項について説明しま...
※Web開発 【CSS】background-colorとbackgroundの違い
ふと、CSSのbackground-colorとbackgroundの違いって何だろう？って思いました。 いつもは背景色を指定する場合は、 SyntaxHighlighterについて <style> #TableA { background...
※Web開発 模写コーディング
<header class="header"> <div class="logo"> <h1><img src="img/logo.png" alt="ロゴ画像"></h1> </div> <ul class="me...
※Web開発 h1タグは画像でも問題ない！画像を設定する時のポイント3つ！
h1タグは、そのサイトのテーマを示す重要なテキストです。SEOを考える上でも、h1タグには上位表示を狙いたいキーワードを取り入れるなど、戦略的な対策を行う必要があります。 h1タグを使用する時に、デザインの兼ね合い上「画像」で視覚的に訴えた...
※Web開発 WordPressオリジナルテーマの作り方①（ファイルの準備編）
目次 WordPressオリジナルテーマの作り方 WordPressのローカル環境を構築（Local使用） WordPressオリジナルテーマに使うテーマフォルダを作成 WordPressのテンプレートファイルを作成 テンプレートファイル一...
※Web開発 【Smart Slider 3】誘導力高めるスライドショーの使い方【WordPress】
スライドショー作成プラグインと言えば、主に「画像」のみスライドとして切り替わるのが一般的です。 一方、Smart Slider 3は画像に加えて、各スライドに「テキスト」や「ボタン」「リンク」を配置できます。 このように各スライド画面を独自...
※Web開発 VSCodeでGit・GitHubを使う方法を解説する【初心者向き】
▼この記事が向いている方 初めてVS CodeでGitを利用する方 VS CodeにおけるGitの操作方法が知りたい方 VS CodeとGitHubの連携方法が知りたい方 このうえで今回は、次の流れにしたがって、具体的な作業方法を徹底解説し...