CSS

企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載する方法。

4月に入り新入社員や人事移動で会社のホームぺージを担当する事になった方も多いと思います。
最近の企業ホームページは、CMS(コンテンツ・マネジメント・システム)で管理され初心者の方でも簡単に記事を投稿することが可能です。
CMSの種類は様々あり、代表的なものだと「WordPress」「MovableType」などありますね。大きな会社になると独自のCMSを組み込んでいるところもありますね。
また、ほとんどのCMSでは、1つの投稿でPC向けとスマホ向けに自動的に最適化され表示されます、これは本当に便利です。

私は主にホームページ制作やCMS導入などをしており、その中でWEBサポート的なこともしています。独自カスタマイズ案件であれば各社の独自ルールに都度対応するのですが、基本のCMS導入だけの場合は納品で契約が完了されますので、その後の運用・操作方法は各ホームページ担当となります。このようなCMS導入後企業担当者が運用という形態は多いと思います。CMS導入後にマニュアルもお渡ししますが、それでも質問は結構あります。

そのサポートのなかで特に多いのがエクセルで作られた表を掲載したいという要望です。イベントスケジュールや項目リストなどで良く利用されますね。
ただこの作業は簡単そうでなかなかの曲者です。
今回は、企業担当者の良くある質問であるこの表組を再現するツール及びHTMLとCSSをご紹介しようと思います。紹介するコードはCMSでも静的サイト(htmlベタ書き)でも通用するようにお送りします。

■エクセルの表からHTMLを作成する。


上図のようなエクセルの表組みをHTMLにします。
エクセルからHTMLを起こすには、いろいろやり方がありますが、今回は一番簡単なジェネレーターを利用したいと思います。
ここでは、「ExcelからHTMLテーブル変換」サイトを利用してご説明します。https://ao-system.net/exceltable/

・エクセルから該当のセルを選択してコピーします。
範囲を選択し、右クリックから「コピー」

・「ExcelからHTMLテーブル変換」サイトにアクセスし、該当箇所に貼付け(ペースト)します。

↓ペースト後

ペーストするとページ下部にプレーンなHTMLが生成されますので、それをコピーします。※背景色やテキスト色は反映されません。

これは後程使うので「メモ帳」などのテキストエディタを開きコピーしたHTMLタグを保存しておきましょう。

次にコピーしたHTMLにCSSを適用させるためのクラス名やスマホ最適化をするためのDIVタグ追加をしていきます。
① 見出し部分に使う個所を手動でtdタグからthタグに変更します。今回で言うとイベント案内・場所・イベント名・開催日・時間・会場の項目をthタグにします。
② tableタグにクラス名tbl-styleを付与
③ 大見出しのthタグにクラス名tbl-style-titleを付与
④ 最後にdivタグ(tbl-style-scroll)で包みます。

■見やすいようにCSSを調整する。

生成されたHTMLは装飾されていない状態なので、CSSで装飾します。
CSSは以下の通りです。余白や背景色、ボーダー色など装飾を指定します。

■スマートフォン向けに最適化する。

スマートフォンでは、テーブルが横長な場合は領域をはみ出すかギュッとされ文字が縦長に整形されたりなど可読性にかけてしまいます。
ここでは、スマホの場合は横スクロールをさせるようにします。
※元々サイト自体がスマホに対応されていない場合はテーブルのスマホ最適化は反映されません。

■CMS/静的ページに記述する。

ここまでで、CSSとtableのHTMLが出来ましたね。これをあなたがお使いのCMSや静的HTMLに記述します。

CMSの場合

画面はWordPressで説明します。なお投稿するエディタは、必ずテキストをご使用ください。ビジュアルエディタなどで記述するとhtmlと認識されません。

CSS

方法1)CMSでは投稿編集画面にCSSを記述できる箇所が用意されていれば、そこにCSSを記述します。(もし無い場合、今後も使うかもしれないので制作した方かWEB知識のある方にお願いして作っていただきましょう。)

方法2)投稿編集画面にCSSを記述出来ない場合は、少し強引(記述的に非推奨)ですが、投稿箇所にスタイルタグを記述しても表示上は大丈夫です。(2018/4現在)

HTML


投稿記事の任意箇所に記述します。

静的なHTMLの場合

CSS

先程のCSSをstyleタグで括りheadタグ直前に記述します。

HTML

作成したtableタグを任意の箇所に記述します。

■テーブル完成

イベント案内
場所 イベント名 開催日 時間 会場
東京 エクセル説明会 2018/4/1 13:00-14:00 〇〇ビル6F
大阪 HTML説明会 2018/4/3 13:00-15:00 〇〇ビル3F
千葉 CSS説明会 2018/4/3 16:00-18:00 〇〇ビル4F

スマートフォンの場合

最後に

エクセルで資料を作成し、それをホームページに掲載するというシーンは多々あります。エクセルは使いこなせるけどHTMLは苦手というWEB担当者の負担を減らせればと思います。と同時にワタシへのサポート負担も減らしたいという事で書きました。なお、今回のクラス名は既存のCSSと重複しない様に長めに書いてありますので、そのままメインのCSSに追記しても問題ないと思います(メインのCSSを弄れればこのTIPSは必要ないと思いますが…)もし重複して他のページのテーブルが崩れたりしたら今回のクラス名を変更してください。

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. LINEで郵便局の荷物追跡や再配達ができる!?
  2. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  3. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  4. facebookのいいねボタンに5種類の感情ボタンが出現!
  5. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  6. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  7. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  8. ヤフオクの商品説明を綺麗に!売上アップのポイント

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

モリノイルカ。3枚の写真を合成レタッチしてます。 – from Instagram

投稿コメントモリノイルカ。3枚の写真を合成レタッチしてます。lifezakk Insta…

クマの切抜きレタッチ。Vounでモックを仕上げてみた。 – from Instagram

投稿コメントクマの切抜きレタッチ。Vounでモックを仕上げてみた。lifezakk In…

ネコの切抜き。毛並み感を重視したレタッチです。 – from Instagram

投稿コメントネコの切抜き。毛並み感を重視したレタッチです。lifezakk Instagra…

日本の夏。 – from Instagram

投稿コメント日本の夏。lifezakk Instagram…

金のマーブル模様。 – from Instagram

投稿コメント金のマーブル模様。lifezakk Instagram…

人気記事

  1. 城ドラ キャラ能力バランス調整 8/31 一挙5体、デビルも上方修正だ!
  2. 黒騎士と白の魔王 新獄級ロキの攻略ポイント
  3. LINEでクロネコヤマトの再配達依頼や荷物追跡ができるの!?
  4. 三国FANTASY(ファンタジー)競技場 攻略のポイントについて
  5. ゾンビを揃えて感染拡大、爽快ゾンビマッチパズル!えっうちの庭にゾンビが!?

インスタグラム

カテゴリー記事一覧

PAGE TOP