段組数を自動調整させる
過去の実績を表示するのに、fontawsomeを利用し整列させることにした。
fontawsomeの使い方は、以前の手法と同じだ。
ピクトグラム表示の際はスマートフォン表示では1つ、タブレット表示の時は3つを横並びにして表示させたためcssで段組をコントロールした。
今回はピクトグラムの幅は固定し、画面幅に合わせて段組数を自動調整させる。
fontawsomeの読み込み
HTMLはこうした。
<div id="amiens-13" class="amiens-black">
<div class="amiens-1060w">
<h2>過去の実績</h2>
<div id="amiens-13-01">
<div><i class="fas fa-search-dollar faa-pulse animated-hover"></i>
マーケティング
</div>
<div><i class="far fa-file-word faa-pulse animated-hover"></i>
レポート作成
</div>
<div><i class="far fa-envelope-open faa-pulse animated-hover"></i>
メールマガジン
</div>
<div><i class="far fa-paper-plane faa-pulse animated-hover"></i>
ステップメール
</div>
<div><i class="fas fa-bullhorn animated-hover"></i>
プロモーション
</div>
<div><i class="fas fa-ad faa-pulse animated-hover"></i>
adwords設定
</div>
<div><i class="fas fa-trophy animated-hover"></i>
コンテスト申請
</div>
<div><i class="fas fa-edit animated-hover"></i>
コピーライティング
</div>
<div><i class="fas fa-book-reader animated-hover"></i>
プレスリリース
</div>
<div><i class="fas fa-user-friends animated-hover"></i>
コンサルティング
</div>
<div><i class="far fa-trash-alt animated-hover"></i>
5S指導
</div>
<div><i class="fas fa-check-double animated-hover"></i>
GTD指導
</div>
<div><i class="fas fa-sort-alpha-down faa-pulse animated-hover"></i>
SEO
</div>
<div><i class="fas fa-user-check faa-pulse animated-hover"></i>
UX、UI構築
</div>
<div><i class="fas fa-mobile-alt faa-pulse animated-hover"></i>
スマートフォン対応
</div>
<div><i class="fas fa-map faa-pulse animated-hover"></i>
カスタマージャーニーマップ
</div>
<div><i class="fas fa-microphone-alt animated-hover"></i>
セミナー講師
</div>
<div><i class="fab fa-cc-paypal faa-pulse animated-hover"></i>
決済導入
</div>
<div><i class="fab fa-wordpress-simple faa-pulse animated-hover"></i>
wordpress構築
</div>
<div><i class="fas fa-key faa-pulse animated-hover"></i>
Microsoft Access構築
</div>
<div><i class="fas fa-database faa-pulse animated-hover"></i>
mySQL構築
</div>
<div><i class="fas fa-folder-open faa-pulse animated-hover"></i>
filemaker構築
</div>
<div><i class="far fa-file-excel faa-pulse animated-hover"></i>
データ分析
</div>
<div><i class="fas fa-store faa-pulse animated-hover"></i>
ショップ運営
</div>
<div><i class="fas fa-people-carry faa-pulse animated-hover"></i>
通販支援
</div>
<div><i class="fas fa-shopping-cart faa-pulse animated-hover"></i>
サイト制作
</div>
<div><i class="far fa-file-alt faa-pulse animated-hover"></i>
LPO
</div>
<div><i class="fas fa-user-secret faa-pulse animated-hover"></i>
GDPR対応
</div>
<div><i class="fas fa-camera faa-pulse animated-hover"></i>
写真撮影
</div>
<div><i class="fab fa-adobe faa-pulse animated-hover"></i>
画像加工
</div>
<div><i class="far fa-images faa-pulse animated-hover"></i>
バナー制作
</div>
<div><i class="far fa-file-video faa-pulse animated-hover"></i>
動画制作
</div>
<div><i class="far fa-file-audio faa-pulse animated-hover"></i>
ジングル制作
</div>
<div><i class="fas fa-server faa-pulse animated-hover"></i>
サーバー管理
</div>
<div><i class="fas fa-network-wired faa-pulse animated-hover"></i>
LAN設定
</div>
<div><i class="fas fa-cogs faa-pulse animated-hover"></i>
PC設定
</div>
<div><i class="fas fa-shield-alt faa-pulse animated-hover"></i>
セキュリティーアップデート
</div>
<div><i class="fab fa-php faa-pulse animated-hover"></i>
php開発
</div>
<div><i class="far fa-gem faa-pulse animated-hover"></i>
perl開発
</div>
<div><i class="fab fa-js faa-pulse animated-hover"></i>
javascript開発
</div>
<div><i class="fas fa-cart-arrow-down faa-pulse animated-hover"></i>
カートシステム構築
</div>
<div><i class="fab fa-internet-explorer faa-pulse animated-hover"></i>
ブラウザ動作確認
</div>
<div><i class="fab fa-facebook-square faa-pulse animated-hover"></i>
Facebook
</div>
<div><i class="fab fa-twitter-square faa-pulse animated-hover"></i>
twitter
</div>
<div><i class="fab fa-instagram faa-pulse animated-hover"></i>
instagram
</div>
<div><i class="fab fa-pinterest-square faa-pulse animated-hover"></i>
pinterest
</div>
<div><i class="fab fa-line faa-pulse animated-hover"></i>
LINE
</div>
<div><i class="fab fa-youtube-square faa-pulse animated-hover"></i>
youtube
</div>
<div><i class="fas fa-home faa-pulse animated-hover"></i>
自社ドメイン店舗
</div>
<div><i class="fas fa-registered faa-pulse animated-hover"></i>
楽天市場
</div>
<div><i class="fab fa-amazon faa-pulse animated-hover"></i>
amazon
</div>
<div><i class="fab fa-yahoo faa-pulse animated-hover"></i>
Yahoo!ショッピング
</div>
<div><i class="fab fa-ebay faa-pulse animated-hover"></i>
Qoo10
</div>
<div><i class="fab fa-weebly faa-pulse animated-hover"></i>
Wowma!
</div>
<div><i class="fas fa-anchor faa-pulse animated-hover"></i>
越境EC
</div>
</div>
<div class="amiens-600w">
ネットショップ運営に必要な全てのスキルに精通。
7年間実際にネットショップを経営した経験を活かし、100社以上に実務レベルの細かい指導をしてきました。指導を受けた企業から、厚い信頼を頂いています。経験と実績で、貴社ショップの売上アップにつなげます。
</div>
</div>
</div>
ピクトグラムのブロックを囲むwrapperを作るのがポイント。
このブロックに、flexboxを指定する。
#amiens-13{
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-left: -5px;
}
#amiens-13 i{
font-size: 250%;
display: block;
padding-top: 10px;
}
#amiens-13-01 div{
box-sizing: border-box;
flex: auto;
border: 1px solid #444;
border-radius: 10px;
width: 107px;
margin: 0 0 10px 3px;
text-align: center;
display: inline-block;
vertical-align: top;
color: #aaa;
}
#amiens-13-01 div p{
padding: 0 3px 5px;
font-size: smaller;
}
自動的に段組が決定され、幅一杯に並んで表示されるようになる。
これでいいだろう。
