Webサイトのコーディングにおいて、要素を横並びにしたり、中央揃えにしたりする「レイアウト作業」はかつて非常に面倒なものでした（float や position を駆使していた時代がありました）。 しかし現在、その悩みを一発で解決してくれるのが Flexbox（フレックスボックス） です。 この記事では、Flexboxの基本概念から、よく使うプロパティ、そして子要素に指定する「flex」プロパティの詳細まで、図解を交えながら分かりやすく解説します。 1. Flexboxの基本概念：親（コンテナ）と子（アイテム） Flexboxを理解するための最初のステップは、「親要素（Flexコンテナ）」と「子要素（Flexアイテム）」の関係を把握することです。 Flexコンテナ（親要素）: Flexboxのレイアウトを適用する外枠となる要素です。ここに display: flex; を指定することで、魔法が始まります。 Flexアイテム（子要素）: Flexコンテナの中に直接配置されている要素です。コンテナの指示に従って、柔軟に並び方やサイズが変わります。 また、Flexboxには「主軸（Main Axis）」と「交差軸（Cross Axis）」という方向の概念があります。デフォルトでは主軸は左から右（横方向）、交差軸は上から下（縦方向）になります。 2. 親要素（コンテナ）に指定する必須プロパティ 要素を横並びにするには、親要素に display: flex; を指定します。これに加えて、以下のプロパティを組み合わせることで自由自在にレイアウトできます。 display: flex;（おまじない） CSS .container { display: flex; } これを指定した瞬間、中の子要素はデフォルトで左詰めの横並びになります。 justify-content（主軸の配置） 水平方向（主軸）のどこに要素を配置するか、また要素間の余白をどうするかを決めます。 flex-start (デフォルト): 左詰め center: 中央揃え flex-end: 右詰め space-between: 両端揃え（要素間の余白が均等になる） space-around: 各要素の周囲に均等な余白ができる align-items（交差軸の配置） 垂直方向（交差軸）の配置を決めます。かつて最も難しかった「縦方向の中央揃え」も、これ一つで解決します。 stretch (デフォルト): 親要素の高さに合わせて子要素が伸びる center: 縦方向の中央に配置 flex-start: 上詰め flex-end: 下詰め 3. 子要素（アイテム）に指定する「flex」プロパティの正体 親要素で全体の並び方を決めた後、「特定の子要素だけ幅を広くしたい」「画面幅に合わせて柔軟に伸縮させたい」という場合に使うのが、子要素自身に指定する flex プロパティです。 実は flex プロパティは、以下の3つのプロパティをまとめたショートハンド（略記法）です。 CSS .item { /* flex: [flex-grow] [flex-shrink] [flex-basis]; */ flex: 1 1 auto; } ① flex-grow（伸びる割合） 親要素に余白がある場合、他の要素と比べてどれくらい余白を分け合って伸びるかを指定します（デフォルトは 0 = 伸びない）。 すべての子要素に flex-grow: 1; を指定すると、親要素の幅を均等に分割してぴったり埋めてくれます。 ② flex-shrink（縮む割合） 親要素の幅が狭くなった場合、他の要素と比べてどれくらい縮むかを指定します（デフォルトは 1 = 均等に縮む）。 0 を指定すると、画面幅が狭くなってもその要素だけは縮まなくなります（先ほどのマーキーアニメーションなどで、文字を潰したくない時に flex-shrink: 0; を使ったのはこのためです）。 ③ flex-basis（ベースとなる幅） 要素の基準となるサイズ（幅または高さ）を指定します（デフォルトは auto = 中身のコンテンツのサイズ）。 width プロパティと似ていますが、Flexbox環境下では flex-basis の方が優先的に扱われます。 よく使う省略形のパターン 実務では、いちいち3つ全てを書くことは少なく、以下のような書き方をよく使います。 flex: 1; （＝ flex: 1 1 0%;） 余白があれば伸びるし、狭ければ縮む。要素の基本幅は無視して、兄弟要素間で比率に合わせてきっちり分割したい時に使います。 flex: none; （＝ flex: 0 0 auto;） 伸びないし、縮まない。中身のサイズのまま絶対に形を崩したくない時に使います。 4. まとめ Flexbox（display: flex）は、親要素で「全体の並び方や揃え方」をコントロールし、必要に応じて子要素の flex プロパティで「個別の伸縮具合」を調整する仕組みです。 親要素（コンテナ）には display: flex;、justify-content、align-items を指定。 子要素（アイテム）には、柔軟にサイズを変えたい時に flex（flex-grow, flex-shrink, flex-basis）を指定。 これらを理解するだけで、ヘッダーのナビゲーション、カード型の横並びレイアウト、画面中央への完璧なセンタリングなど、あらゆるWebレイアウトが驚くほど簡単に実装できるようになります。

Webサイトのヘッダーやフッターで、文字が左へツーーッと途切れることなく流れ続ける「無限ループアニメーション（マーキー）」。目を引きやすく、トレンド感のあるWebデザインで非常によく使われる手法です。 しかし、いざ自作してみると「ループの瞬間に空白ができてしまう」「テキストが短いとズレる」「文字が勝手に潰れる」といったトラブルに悩まされがちです。 この記事では、そうしたバグや表示崩れを一切起こさない、実務で使える最も堅牢なHTML/CSS構造を詳しく解説します。コピペでそのまま使えるコード付きです！ なぜズレる？失敗しないための「グループ化」の仕組み 文字が途切れずにループしているように見せるための基本原理は、「同じ要素を2つ並べて、横へスライドさせる」ことです。 しかし、テキストを単に2つ並べただけでは、画面幅に対してテキストが短すぎた場合に右側に余白ができてしまい、ループがリセットされる瞬間に「カクッ」とズレてしまいます。 これを完全に防ぐ最強のアプローチが、「画面幅より長いグループを作って、それを2つ並べる」という方法です。 marquee-group という箱を作り、その中にテキストを複数入れて「絶対に画面幅より長くなるまとまり」を作ります。 そのグループを丸ごと2つ（グループ1・グループ2）横に並べます。 全体の長さの「半分（-50%）」、つまりグループ1つ分だけ左に移動した瞬間にアニメーションを0秒リセットします。 グループ2がグループ1と全く同じ位置に重なった瞬間にリセットされるため、人間の目には一文字も途切れることなく永遠にループしているように見えます。 実装コード（コピペOK） それでは、絶対にズレない・潰れない最強の実装コードを見ていきましょう。 HTML <div class="marquee-container"> <div class="marquee-content"> <div class="marquee-group"> <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div> <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div> <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div> </div> <div class="marquee-group"> <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div> <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div> <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div> </div> </div> </div> 【ポイント】 PCの大きな画面で見ても右側に余白ができないように、1つの marquee-group の中に marquee-item をいくつかコピーして、十分な長さを確保してください。 CSS /* 1. 外側のコンテナ（はみ出た部分を隠す） */ .marquee-container { overflow: hidden; white-space: nowrap; width: 100%; } /* 2. 内側の動くコンテナ（アニメーションを設定） */ .marquee-content { display: flex; width: max-content; /* 中身の幅に合わせる */ animation: scroll 20s linear infinite; /* 20秒かけて一定の速度で無限ループ */ } /* 3. テキストのまとまり（絶対に潰れないようにする） */ .marquee-group { display: flex; flex-shrink: 0; /* ★超重要：Flexboxの仕様で文字が潰れるのを防ぐ */ } /* 4. 各テキスト要素（余白と文字サイズ） */ .marquee-item { padding-right: 40px; /* テキスト同士の隙間 */ font-size: 24px; font-weight: bold; } /* 5. 左へ流れるアニメーションの定義 */ @keyframes scroll { 0% { transform: translateX(0); } 100% { /* グループが2つなので、全体の半分の距離（-50%）だけ移動させる */ transform: translateX(-50%); } } 【ポイント：なぜ -100% じゃないの？】 動かしている枠（.marquee-content）の中には、グループが「2つ」入っています。そのため -100% 動かしてしまうと、2つ目のグループまで画面外に消え去ってしまい空白の時間が生まれます。全体の半分である -50%（グループ1つ分）だけ動かすのが正解です。 アニメーション速度の調整方法 流れるスピードを変更したい場合は、CSSの animation プロパティの秒数（20s の部分）を変更します。 CSS /* ゆっくり流したい場合（秒数を増やす） */ animation: scroll 40s linear infinite; /* 早く流したい場合（秒数を減らす） */ animation: scroll 10s linear infinite; ⚠️ 注意点: この秒数は「-50%の距離を何秒かけて移動するか」を示しています。そのため、HTMLで文字数を増やして全体の距離が長くなると、同じ秒数でも「急いで走り切ろうとする」ため、体感スピードが速くなります。テキストの量を変更した際は、必ずこの秒数もセットで微調整を行ってください。 まとめ CSSの無限ループテキストアニメーションを完璧に実装するカギは以下の3つです。 画面幅より長い「グループ」を作って2つ並べる。 移動距離は -100% ではなく -50% にする。 flex-shrink: 0; を指定して、文字が潰れるのを防ぐ。 この構造さえ覚えておけば、テキストがどんな長さになっても、画像やアイコンを混ぜても、決してズレることのない美しいマーキーアニメーションを作ることができます。ぜひご自身のサイトで活用してみてください！ サンプル 以下は、実際に上記のコードをベースに実装したサンプルです。 See the Pen Untitled by Naohiko Kitahara (@naozoom) on CodePen.

近年、Llama 3やMistralといった高性能なオープンソースの大規模言語モデル（LLM）が登場し、企業や個人が独自のデータでモデルを再学習（ファインチューニング）するニーズが高まっています。しかし、LLMのファインチューニングには、膨大な計算資源（GPUメモリ）と時間が必要であり、これが大きな参入障壁となっていました。 この問題を解決し、LLM開発の民主化を推し進める画期的なツールとして注目を集めているのが「Unsloth Studio」です。本記事では、Unsloth Studioの概要、劇的な高速化を実現する仕組み、そして具体的なメリットについて詳しく解説します。 1. Unsloth Studioとは？ Unsloth Studioは、オープンソースのLLMファインチューニング高速化フレームワーク「Unsloth」をベースとした、LLM開発のための統合プラットフォームです。 Unsloth自体は、Hugging Faceエコシステム（Transformers, PEFT, TRLライブラリ）の上に構築された最適化ライブラリであり、Llama 3, Mistral, Gemmaなどの主要なオープンソースモデルの学習速度を2倍〜5倍にし、メモリ使用量を最大70%削減することを可能にします。 Unsloth Studioは、この強力な最適化技術をより使いやすく、そして包括的に提供することを目指しています。 2. なぜこれほど速いのか？その仕組み（図解） Unslothが劇的な高速化とメモリ節約を実現している理由は、単一の技術ではなく、複数の高度な最適化を組み合わせている点にあります。 標準的なPyTorchやHugging FaceのTransformersライブラリは汎用性を重視していますが、Unslothは特定のモデルアーキテクチャ（特にLlama系）に対して、ハードウェアレベルに近い部分で徹底的なチューニングを行っています。 以下は、標準的なファインチューニングとUnslothによる最適化の違いを概念的に示した図解です。 Unslothの高速化・メモリ節約の仕組みには、以下の主要な最適化が含まれます。 A. Tritonカーネル最適化 OpenAIが開発した言語「Triton」を使用して、GPUカーネル（GPU上で実行されるプログラム）を独自に最適化しています。特に、LoRA（Low-Rank Adaptation）に関連する計算、例えば線形層の量子化や、特定の活性化関数（RoPE, SiLUなど）の処理において、標準的なPyTorchのカーネルよりも遥かに高速な実装を行っています。 B. 手動バックプロパゲーション管理 通常のPyTorchでは、自動微分（Autograd）システムが勾配計算をすべて自動で行いますが、これはメモリを多く消費します。Unslothは、LoRAの勾配計算を「手動」で管理し、メモリの使用を最適化しています。これにより、特定のモデルに対して、標準的なTransformersライブラリよりも劇的に少ないメモリで学習可能になります。 C. QLoRAへのネイティブ対応 Unslothは、4ビット量子化（QLoRA）にネイティブで対応しています。これにより、GPUメモリをさらに大幅に節約でき、通常では学習不可能なモデル（例えばLlama 3 70B）を、一般的なコンシューマ用GPU（例: 24GB VRAMのNVIDIA A10GやA100）でも学習可能にします。 3. Unsloth Studioを利用するメリット Unsloth Studioを利用することで、LLM開発者は以下のような具体的なメリットを得られます。 A. 学習時間の劇的な短縮 学習時間が2倍〜5倍に短縮されることは、単に「待つ時間が減る」だけではありません。開発のイテレーション（試行錯誤）のサイクルを劇的に速め、より多くの実験を行い、短期間でより高品質なモデルを構築することを可能にします。 B. 計算コストの削減 学習に必要なGPUメモリが最大70%削減されるため、高価な多GPU環境（例: 8x A100）を用意する必要がなくなります。24GB VRAMのシングルGPU、あるいは無料枠を含むGoogle ColabやKaggle NotebooksでもLLMのQLoRAファインチューニングが可能になり、計算コストを大幅に削減できます。 C. 既存エコシステムとの互換性 Unslothは、Hugging Face Ecosystem（TRL, PEFT, Transformersライブラリ）と完全な互換性を保っています。既存のファインチューニングスクリプトを、わずか数行の変更でUnslothに移行することが可能です。 D. サポート対象の拡大 Unsloth Studioは、Llama 3, Mistral, Gemma, Phi-3, Qwen 2など、主要なオープンソースモデルのアーキテクチャに対して広く最適化を提供しています。また、これらのモデルをQLoRAだけでなく、LoRAや通常の全パラメータファインチューニングでも高速化できます。 4. まとめ：LLM開発の民主化を加速する存在 Unsloth Studioは、これまで一部の巨大企業や研究機関しか手が出せなかった「高性能なLLMのファインチューニング」を、劇的な高速化とメモリ節約によって、より多くの開発者や中小企業に開放する存在です。 特に、Llama 3やMistralなどの強力なベースモデルが登場した今、Unsloth Studioを活用して、独自のデータで、かつ低コストで高性能なAIを構築することは、企業にとって強力な競争力となり得るでしょう。LLM開発の未来は、Unslothによって、よりアクセスしやすく、より効率的なものへと変わりつつあります。

Webサイトのロゴやアイコン、イラストなどを表示する際、拡大しても画質が劣化せず、ファイルサイズも軽い「SVG（Scalable Vector Graphics）」は非常に便利な画像フォーマットです。 しかし、WordPressではデフォルト設定のままではSVGファイルをメディアライブラリにアップロードすることができません（「このファイルタイプはセキュリティ上の理由から許可されていません」というエラーが出ます）。 この記事では、なぜWordPressがSVGをブロックしているのかというセキュリティ上の理由と、それを踏まえた上で安全にSVGアップロードを有効化する方法（プラグイン・functions.php）を解説します。 なぜWordPressはデフォルトでSVGを禁止しているのか？（セキュリティリスク） 最大の理由は、SVGが「画像」でありながら、その中身が「XML形式のコード（テキスト）」で構成されているからです。 一般的な画像（JPEGやPNG）はピクセルデータの集まりですが、SVGはコードであるため、内部にJavaScript（<script>タグ）を埋め込むことができてしまいます。 もし、悪意のあるJavaScriptが仕込まれたSVGファイルをWordPressにアップロードし、それをWebサイト上に表示（またはプレビュー）してしまうと、閲覧者のブラウザ上でそのスクリプトが実行されてしまいます。 これがクロスサイトスクリプティング（XSS）と呼ばれる深刻な脆弱性です。 想定される被害: ログインセッションの乗っ取り、サイトの改ざん、悪意のあるサイトへのリダイレクトなど。 このリスクを防ぐため、WordPressは標準でSVGのアップロードを遮断しています。 SVGを安全にアップロードする2つの方法 リスクを理解した上で、SVGを利用するための具体的な方法を2つ紹介します。 方法1：サニタイズ機能付きのプラグインを使用する（推奨） 最も手軽で安全なのが、アップロード時に危険なコードを自動で除去（サニタイズ）してくれるプラグインを使用することです。 おすすめプラグイン：Safe SVG 特徴: インストールして有効化するだけで、SVGのアップロードが可能になります。アップロード時にファイルの中身をスキャンし、悪意のある<script>タグなどを自動的に取り除いてくれるため、セキュリティ面でも安心です。 方法2：functions.php を編集して有効化する（開発者向け） プラグインを増やしたくない場合や、自作テーマで制御したい場合は、テーマの functions.php にコードを追加して許可するMIMEタイプ（ファイル形式）を拡張します。 ⚠️ 重要： 単にSVGを許可するだけではXSSのリスクが残るため、「管理者権限（administrator）を持つユーザーのみアップロードを許可する」という条件分岐を加えるのが実務上のベストプラクティスです。 PHP /** * 管理者のみSVGファイルのアップロードを許可する */ function allow_svg_upload_for_admins( $mimes ) { // 現在のユーザーが管理者権限を持っているかチェック if ( current_user_can( 'administrator' ) ) { $mimes['svg'] = 'image/svg+xml'; } return $mimes; } add_filter( 'upload_mimes', 'allow_svg_upload_for_admins' ); さらに高度なセキュリティ対策（サニタイズの実装） 上記のコードは「誰がアップロードできるか」を制限するものであり、ファイルそのものの無害化（サニタイズ）は行っていません。 もし自分以外のスタッフやクライアントがSVGをアップロードする環境であれば、PHPライブラリ（svg-sanitizer など）をComposer経由で組み込み、アップロード処理のフック（wp_handle_upload_prefilter）で中身を洗浄する処理を独自に実装する必要があります。 そこまでの工数をかけるのが難しい場合は、素直に「Safe SVG」プラグインを導入することをおすすめします。 まとめ SVGは中身がコード（XML）であるため、JavaScriptを埋め込まれるXSSのリスクがある。 WordPressがデフォルトでアップロードを禁止しているのはこのため。 安全に利用するには、サニタイズ機能を持つプラグイン（Safe SVGなど）を使用するか、functions.php で管理者のみに権限を絞って許可する実装を行う。 SVGの特性とセキュリティリスクを正しく理解し、安全なWebサイト運用を心がけましょう。