WordPress

PublishPress Futureの機能を管理者権限以外のユーザーで使う方法

WordPressで投稿した記事に公開期限を設定できる便利なプラグイン「PublishPress Future」の機能を管理者権限以外のユーザーでも使えるようにする方法です。
Webデザイン Tips

【HTML・CSS】スマホとPCで文章の改行位置を変える方法

レスポンシブコーディングで「スマホでは文章の途中で改行させたいけど、パソコンでは改行させたくない!」といった場合に役立つテクニックです。
Webデザイン Tips

【HTML・CSS】疑似要素のテキストを途中で改行させる方法

::beforeや::afterといった疑似要素のテキストを、文章の途中で改行させる方法です。
Webデザイン Tips

【HTML】相対パスの記述が面倒くさい!劇的に楽にする方法を紹介

下層ページをフォルダの中に作成していると、内や画像のパスの階層が変わったりして意外とめんどうくさいですね。
Webデザイン Tips

【HTML・CSS】テキストが1行なら中央揃え、2行になったら自動で左寄せさせる方法

PCサイズで中央揃えにしているテキストが、スマホで表示した際に改行して読みづらくなってしまう…。

そんな悩みをサクッと解決してくれる便利なCSSをご紹介します。

Webデザイン Tips

HTMLとCSSだけでページ内リンクにスムーススクロールさせる方法

アンカーリンク(ページ内リンク)をクリックするとリンク先までスーッとスクロールするあれです。

いちいちJavaScriptを打たなくても、HTMLとCSSだけで良い感じのスムーススクロールが実装できます。

ついでに固定ヘッダー時にアンカーリンク位置が重なる問題もCSS1行で解決!

アニメーション

【HTML・CSS】マウスアウト時だけtransitionが効かない問題の解決方法

要素にtransitionでアニメーションを効かせる際に、マウスアウト(要素からカーソルを外す)した時だけアニメーションが効かない症状の解決方法です。

レイアウト

【HTML・CSS】子要素の横幅を画面いっぱいに広げる方法

親要素の中にある一部の背景や画像を画面いっぱいに広げて表示するテクニックの紹介です。

1カラムで構成されたWebサイトのデザインで頻繁に使われるレイアウトなので、この機会にコーディング方法をマスターしてしまいましょう!