URLをコピーしました!
スキルアップを始める!

flexbox

CSS(シー・エス・エス)

【CSS】flexbox(フレックスボックス)の基本的な機能一覧(flexbox使い方)Part1

flexbox(フレックスボックス)とは? Flexbox (Flexible Box Layout) は、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できるようにする CSS レイアウト モジュール...
WordPress(ワードプレス)

【WordPress】ブロックの文字を縦書き・縦文字にCSSで変える|writing-mode

例えば、文字を縦書きにしたいと思った時に使える方法です。 writing-mode 文字を縦書きにしたい場合は「writing-mode」のプロパティが使えます。 まずは、CSSのクラス名をブロックに追加しておきます。 top-messag...
CSS(シー・エス・エス)

【Flexbox】要素を上下左右の中央に配置する方法(CSS)

CSSで「画面の上下左右中央に要素を配置したい」と思った時にも、Flexboxが便利です。簡単にできますのでお試しください。 四角形を準備する まずは、四角形を準備します。ひとまず、以下のような感じにして四角形を準備します。 <style>...
WordPress(ワードプレス)

【ワードプレス入門】コメントフィードライクのUI・レイアウトをCSSで作るには(どうやって1行にまとめるか?)【WordPress】

最近もCSSで四苦八苦していますが…今回はコメントフィードライクのレイアウトについて考えてみます。 コメントフィードライクのレイアウトが、けっこう難しい…? 難しいというか単にスキルが足りないだけだろうとは思いますが…コメントフィードライク...
WordPress(ワードプレス)

【WordPress】標準の「最新の投稿」ブロックを|日付-投稿タイトル|で横並びに整形する方法・その3|flex-directionを左並びに調整する|justify-content: flex-start;

前回までのあらすじ 前回、Flexboxを使って「最新の投稿」ブロックをどうにかこうにか横並びにして反転させることまでは成功しましたが・・・ コンテンツが右に寄ってしまったので、左に並ぶように調整をしてみたいと思います。 justify-c...
WordPress(ワードプレス)

【WordPress】標準の「最新の投稿」ブロックを|日付-投稿タイトル|で横並びに整形する方法~その2|左右交互に横並び・flex-direction: row-reverse;

前回までのあらすじ それっぽいレイアウトにはなったのですが、タイトルと日付の並び順が、希望と反対になっているのでなんとかしたい・・・。 こんな感じになってほしい。 Flexboxについて Flexbox は、アイテムを列方向や行方向など一次...
CSS(シー・エス・エス)

【CSS】 Flexbox(フレックスボックス)とは何?を解説!基本編PART1

CSSを使っていると、必ずと言っていいほど出てくる「Flexbox(フレックスボックス)」とは何か?について説明していきたいと思います。 フレックスボックスの基本概念 フレックスボックスを使うと、例えば下記のようなレイアウトを簡単に作ること...
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら