2025年7月に投稿された記事一覧です。
Wordpress のオリジナルテーマを GitHUB Action を使ってデプロイするコードの紹介です。 弊社では、テーマディレクトリだけを開発環境において、デプロイもそれだけを本番サーバーに移行する方法をとっています。 純粋にオリジナルのテーマディレクトリだけを Git のバージョン管理下におけば、本番サーバーにSSH接続して'git pull'するだけでデプロイになる方法もお...
WEB開発における「絶対」と「相対」について、「パス指定」と「位置指定」の観点から考えてみましょう。 まずはパス指定です。 パスとは、インターネット上の住所のようなものです。WEBサイトやアプリなどは様々なファイルによって構成されており、各々住所があるような状態です。絶対指定でも相対指定でも必要な時にファイルを読み込むことができますが、セキュリティや利便性によって使い分けます。 ...
CSSにおける'width'と'height'プロパティは、HTML要素の幅と高さを制御するために使用されます。 様々な指定方法があり、その他の大きさに関するプロパティでも同様になってくるので、ここで基本を学ぶことがオススメです❗ コード <!DOCTYPE html> <html lang="ja"> <head> <meta chars...
'margin'は外側の余白で'padding'は内側の余白です。例えば、'margin'を増やすと隣の要素との距離が増えますが、'padding'を増やしてもそうはなりません。 実際にコードとその描画を見た方が分かりやすいと思います。 コード <!DOCTYPE html> <html lang="ja"> <head> <meta ch...
'position: sticky;'を付与すると、その要素がスクロールによって特定の位置に達したところで固定される（粘着する）ように振る舞います。 ヘッダーやサイドバーなどスクロールしても画面の一部に留まり続けるような処理によく使われます。 下記コード例をHTMLファイルで保存してブラウザで開いてスクロールしてみてください。緑色の見出しがスクロールして画面上部に到達すると、その位置...
'position: relative;'を付与すると、'top, right, bottom, left'を使って本来の位置から相対的に自由な配置が可能になりますが、実際には、relativeを親要素にして、absoluteを子要素にする方法が便利なpositionの使い方です。 'position: absolute;'を付与すると、ブロック要素でもインライン要素でもなく、特別な浮いた...
ページをスクロールしても要素を常にブラウザの表示領域（ビューポート）内の特定の位置に固定したいときに'position: fixed;'を使います。 画面最上部に固定されるグローバルナビゲーションや、スクロールしても常に表示させたい広告などによく使われます。 コード 例 <!DOCTYPE html> <html lang="ja"> <head> ...
spanタグはインライン要素で横並び、divタグはブロック要素で縦ならび。displayプロパティではそれらを自在に調整できます。 'display: block;' されている要素は、その行を丸々使うブロック要素となり、複数を並べると縦に並ぶことになります。 'display: inline;' されている要素は、その要素の長さや文字数が幅となり、複数を並べると横に並ぶことになりま...
SEOに強いホームページやWEBアプリにするためにNuxt.jsのSSGタイプを選択することは多いです。その場合のデプロイファイルは主に最終出力されたdistディレクトリ内となり複雑になってきます。 毎日のようにデプロイをするのなら自動化していきましょう❗ プロジェクト構造 ├── 🔧 設定ファイル│ ├── nuxt.config.js (メイン設定)│ ├── packag...
コードでデザインを表現することは複雑なので、まずは全体を把握していきましょう。 レイアウト display要素の法則を決めます。'block'にすると、その行を丸々使います。'inline'にすると、その要素の大きさ（長さや文字数）だけを使います。'flex'にすると、様々なことができます。'grid'にすると、様々なことができますが、flexより規則的です。 positio...
