コード例集

コード例集

プログラミングコード例集Programming Code Examples

初心者から上級者まで、様々なレベルのプログラマーに役立つコード例を提供しています。
基本的な概念から実践的なテクニックまで、段階的に学習できるリソースをご覧ください。

プログラミング言語

レベル

CSSフレックスボックスレイアウト

CSS 中級 2026/01/17 
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.item {
  flex: 1 1 300px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .item {
    flex-basis: 100%;
  }
}

Flexboxを使用したレスポンシブなグリッドレイアウトの例です。containerクラスに対してflexプロパティを設定し、内部のitemがフレックスアイテムとして配置されます。メディアクエリを使って、画面幅が768px以下の場合は列方向に変更します。

現在、コード例データベースを構築中です。上記はサンプルコードです。
より多くの実用的なコード例を順次追加していきます。

コード例を投稿するContribute Code Examples

あなたのコード例を共有しませんか？

Shardコミュニティでは、メンバーからのコード例の投稿を募集しています。
実用的なスニペット、創造的な解決策、学習リソースとして役立つコードなど、あなたの知識を共有してください。
投稿されたコードは審査後、このページに追加されます。

コード例を投稿する