2025年7月に投稿された記事一覧です。
Wordpressで自作テーマを作る際にCSSフレームワークは使っていますか❓弊社ではBootstrapを使っていましたが、最近はTailwindCssです。 そのTailwindCssのメリットを存分に活かすための開発環境をWordpress配下に構築することが難しかったのですが、試行錯誤の末に良い構成ができました。 読者の皆様にも使っていただきたいです❗使い方が良くわからなかった...
背景色を調整するときは、CSSのbackground-color を使います。要素のコンテンツやパディング、ボーダーの背後に色を塗ります。 色の指定方法は多岐にわたりますが、最も基本的なのは、redやblueのような色キーワードです。より詳細な色を指定するには、#FF0000のような16進数コード、rgb(255, 0, 0)のようなRGB値、またはrgba(255, 0, 0, 0.5)...
主流になってきているCSSフレームワークです。Bootstrapより学習コストは高いですが、より玄人向けの仕組みになっており、構築後のパフォーマンスもより高いです。 従来のCSSフレームワークやCSS設計手法が抱えていた様々な課題を解決するために生まれました。 クラス命名の複雑さからの解放 従来は、厳格な命名規則を用いることで影響範囲を限定し、再利用性を高めようとすると、クラス...
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> ...
