アプリ開発の調査にかかる
時間を削減したい
内製化支援サービス
アプリを自分たちで
作成できるようになりたい
DX人材育成プログラム
プロに開発を依頼したい
アプリ開発導入支援サービス
機能拡張サービス
X-SP Feature
デザイン拡張サービス
X-SP Design
モダン化から運用管理までサポート
構築支援サービス
この記事の3行要約
前回、X-SP Featureの機能でSharePoint上に「Hello World」を表示できることを紹介した
今回はScript Loader・Design Loader・HTML Viewerを使い、表示した「Hello World」の書式（色・サイズ・配置）をCSSで変更する方法を紹介
サイト全体に適用するCSSと、特定ページのみに適用するCSSを使い分けられる
立岡 美沙季たちおか みさき
得意領域
特殊開発部に所属し、X-SPや他アプリケーションの開発に携わっています。ブログではXSPの各種機能を紹介しています！
もし記事を読んで「自社にとって最適なSharePointサイトを構築したい」「SharePointサイト構築をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、SharePointの設計・導入・運用をサポートいたします。
MSクラウドに関するご相談・お問い合わせはこちら
お問い合わせフォームへアーティサンでは2026年4月よりX-SP Featureというサービスの提供を開始しました。
X-SP Featureは、SharePointの標準機能では対応できないアドオン機能を、SharePoint Framework（SPFx）というSharePointの拡張開発技術を用いて提供するSharePointアドオンサービスです。
X-SP Featureをご活用いただくことで、標準機能では限界を感じていた皆様の「本当に欲しかった機能」を簡単に導入できます。
前回はX-SP Featureの機能を利用して「Hello World」をSharePoint上に表示させることができました。
本記事では出力した「Hello World」の書式を変更してみたいと思います！
紹介する機能
今回紹介するX-SP Featureの機能は
Script Loader
Design Loader
HTML Viewer
の3つです。
本記事で実践する「Hello World」書式変更の実行可否は下記のとおりです。
機能名 | 実行可否 |
|---|---|
Script Loader | ○ |
Design Loader | ○ |
HTML Viewer | ○ |
Script Loaderの場合
前回も紹介しましたが、Script Loaderとは作成したJavaScriptやCSSファイルを読み込み、適用する機能です。
サイト全体に適用するほか、任意のページのみに適用することも可能です。
特定のフォルダに命名規則に沿ったファイルを格納すると読み込まれます。
Script Loaderを使用する手順は前回の記事で説明しているので詳しくはそちらを参照してください。
適用したいファイルをアップロードする
規定のフォルダ内に適用したいファイルをアップロードします。
今回はCSSで2つのファイルを作成しました。
global.css
.title {
color: blue;
font-size: 48px;
}SitePages__test.css
.title {
text-align: center;
}
アップロードしたファイルの内容が適用されていることを確認する
アップロードしたファイルの内容がサイト全体や対象ページに適用されていることを確認します。
今回作成したglobal.cssはサイト全体に適用され、SitePages__test.cssはSitePages/test配下のみに適用されます。
cssを適用する前の状態
Home
SitePages/test
2つのファイルをアップロードします
Homeの実行結果
Homeに出力している「Hello World」の書式が変更されました！
SitePages/testの実行結果
SitePages/testではglobal.cssに加えて、SitePages__test.cssも適用されています！
Design Loaderの場合
Design LoaderはScript Loaderとほぼ同等の機能であるため、ここでは省略します。
手順の違いとしては、作成したJavaScriptやCSSファイルもパッケージ化するという点です。
機能面でも若干の違いがあるため、別の記事で解説する予定です。
HTML Viewerの場合
HTML ViewerはSharePoint上のドキュメント ライブラリに置いた HTML ファイルを、そのままページに埋め込み表示する機能です。
今回は別で作成したCSSファイルを読み込んでみたいと思います。
ファイルを作成する
SharePoint上で表示したいHTMLファイルとCSSファイルを作成し、サイト内の任意のフォルダへ保存します。
下記の2ファイルを作成しました。
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSテスト</title>
<!-- CSS読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">Hello World</h1>
</body>
</html>style.css
.title {
color: red;
font-size: 50px;
}SharePoint の任意のフォルダに保存します。
プロパティ設定を行う
ファイルの選択ボタンから、先ほど保存したHTMLファイルを選択します。
ページを発行し、出力内容を確認する
設定に問題なければ「再発行」ボタンを押して、ページを更新します。
「Hello World」が表示され、style.cssも適用されていることが確認できました！
最後に
今回は、アーティサンが提供するX-SP Featureの機能を活用し、SharePoint上でHello Worldの書式を変更してみました。
今回紹介した機能を使えばより複雑なデザインもSharePoint上で表示することが可能となります！
詳しく知りたい方は、ぜひアーティサンまでお気軽にお問い合わせください！
今後も引き続き、X-SP Featureの各機能について紹介してまいります。
2025 Microsoft MVPである弊社の小刀稱が執筆した、X-SP Featureの機能紹介記事もぜひご覧ください。
X-SP Feature機能紹介記事一覧
-
SharePointリストで複数行テキストを全文表示する方法｜X-SP Feature（第1回）
-
SharePointの未読・既読を一目で管理できるアドオン紹介｜X-SP Feature（第2回）
-
SharePointのアクセスランキングでよく見られるコンテンツを可視化する方法｜X-SP Feature（第3回）
-
GA4・Clarity・GTMでSharePointのアクセス解析を行う方法｜X-SP Feature（第4回）
-
カスタムスクリプト不要！SharePointでHTMLファイルを表示する方法｜X-SP Feature（第5回）
-
SharePointのツリービューでフォルダ階層を直感的に表示する方法｜X-SP Feature（第6回）
-
SharePointのリストアイテム閲覧数をGA4で計測する方法｜X-SP Feature アクセス解析支援
もし記事を読んで「自社にとって最適なSharePointサイトを構築したい」「SharePointサイト構築をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、SharePointの設計・導入・運用をサポートいたします。
MSクラウドに関するご相談・お問い合わせはこちら
お問い合わせフォームへ
