トップ HTML/CSS カテゴリー: HTML/CSS テキストを左揃えのまま中央寄せする方法【改良版】 公開日: 2020年1月18日 display: inline-blockを使った方法よりも、より簡単な、display: tableを使った、テキストを左揃えのまま中央寄せする方法を解説します。 コピペでできる斜め背景【CSS】 公開日: 2019年12月31日 CSSで斜め背景を実現する方法はいくつかあり、出来なくはないです。しかし、残念な点があり、「どれも癖があって難しそう。」ということ。ということで、今回はコピペでできる斜め背景をご紹介します。 marginとpaddingの使い分け【CSS】 公開日: 2019年12月13日 marginとpaddingってどうやって使い分ければいいの?なんだかんだ言ってほとんど同じじゃん。そう思っているあなたに、コーダーの僕の経験から言えることをお話しします。 CSSだけで星のレーティング【簡単】 公開日: 2019年12月11日 Webの仕事をやっていると、「HTML/CSSだけで星5つのレーティングを実装しなきゃっ!」ってときが、たまにありませんか? 僕はないです。 今回は、JavaScriptなしで星のレーティングを実装する方法を説明していきます。 複数のボーダーを引く方法【CSS】 公開日: 2019年12月10日 デザイナーさんからデザインカンプをもらった時に、ボーダーが2本以上あって困ったことはありませんか?画像にしてしまって問題ない時はいいですが、なんとかCSSで実装したいときもありますよね?一応、border-typeをdoubleとすれば2本線になりますが、色や太さなどがこれで対処できない場合の解決策の一つを今回紹介していきます。 シンプルなハンバーガーメニュー【簡単】 公開日: 2019年12月6日 コーディング案件でハンバーガーメニューは幾度となく使ってきましたね~。何回も使うので、シンプルなハンバーガーメニューが書けるととても便利ですよね。というわけで今回は、出来る限り無駄を削った、分かりやすい構造で変更のしやすいハンバーガーメニューを紹介します。 レスポンシブな正八角形を作る【CSS】 公開日: 2019年11月19日 CSSで正八角形を作る方法を解説します。 レスポンシブ対応版も下の方で紹介します。 CSSで正八角形を作る必要に迫られる場面なんてそうそうないと思いますけどね笑 正八角形 コード 解説 レスポンシブな正八角形 コード 解 […] 日本語テキスト両端揃え【IE、Firefox対応】 公開日: 2019年11月17日 CSSで日本語のテキストを両端揃えする方法を紹介します。ぐぐって上位に出てくるやり方だとFirefoxだけうまくいかなかったのでその辺も説明します。 両端揃えのCSS なぜtext-align: justifyだけじゃだ […] 【HTML/CSS】relativeとabsoluteを使い方。【初心者向け】 公開日: 2019年4月28日 positionプロパティの使い方 relativeの性質、使いどき。 absoluteの性質、使い時。 美しいコードを書こう positionプロパティの使い方 まずは、軽くおさらいしておきましょう。positionプ […]