CSS(シー・エス・エス) 【CSS】flexbox（フレックスボックス）の基本的な機能一覧（flexbox使い方）Part1
flexbox（フレックスボックス）とは？ Flexbox (Flexible Box Layout) は、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できるようにする CSS レイアウト モジュール...
flexbox
CSS(シー・エス・エス) 
WordPress(ワードプレス) 【WordPress】ブロックの文字を縦書き・縦文字にCSSで変える｜writing-mode
例えば、文字を縦書きにしたいと思った時に使える方法です。 writing-mode 文字を縦書きにしたい場合は「writing-mode」のプロパティが使えます。 まずは、CSSのクラス名をブロックに追加しておきます。 top-messag...
CSS(シー・エス・エス) 【Flexbox】要素を上下左右の中央に配置する方法（CSS）
CSSで「画面の上下左右中央に要素を配置したい」と思った時にも、Flexboxが便利です。簡単にできますのでお試しください。 四角形を準備する まずは、四角形を準備します。ひとまず、以下のような感じにして四角形を準備します。 <style>...
WordPress(ワードプレス) 【ワードプレス入門】コメントフィードライクのUI・レイアウトをCSSで作るには（どうやって１行にまとめるか？）【WordPress】
最近もCSSで四苦八苦していますが…今回はコメントフィードライクのレイアウトについて考えてみます。 コメントフィードライクのレイアウトが、けっこう難しい…？ 難しいというか単にスキルが足りないだけだろうとは思いますが…コメントフィードライク...
WordPress(ワードプレス) 【WordPress】標準の「最新の投稿」ブロックを｜日付－投稿タイトル｜で横並びに整形する方法・その３｜flex-directionを左並びに調整する｜justify-content: flex-start;
前回までのあらすじ 前回、Flexboxを使って「最新の投稿」ブロックをどうにかこうにか横並びにして反転させることまでは成功しましたが・・・ コンテンツが右に寄ってしまったので、左に並ぶように調整をしてみたいと思います。 justify-c...
WordPress(ワードプレス) 【WordPress】標準の「最新の投稿」ブロックを｜日付－投稿タイトル｜で横並びに整形する方法～その２｜左右交互に横並び・flex-direction: row-reverse;
前回までのあらすじ それっぽいレイアウトにはなったのですが、タイトルと日付の並び順が、希望と反対になっているのでなんとかしたい・・・。 こんな感じになってほしい。 Flexboxについて Flexbox は、アイテムを列方向や行方向など一次...
CSS(シー・エス・エス) 【CSS】 Flexbox(フレックスボックス)とは何？を解説！基本編PART1
CSSを使っていると、必ずと言っていいほど出てくる「Flexbox（フレックスボックス）」とは何か？について説明していきたいと思います。 フレックスボックスの基本概念 フレックスボックスを使うと、例えば下記のようなレイアウトを簡単に作ること...
