アーティサン株式会社
  1. TOP
  2. ブログ
  3. X-SP Featureでできること～SharePointでHello Worldの書式を変更してみよう！～
  • X-SP feature service
  • SharePoint

X-SP Featureでできること～SharePointでHello Worldの書式を変更してみよう！～

この記事の3行要約

  • 前回、X-SP Featureの機能でSharePoint上に「Hello World」を表示できることを紹介した

  • 今回はScript Loader・Design Loader・HTML Viewerを使い、表示した「Hello World」の書式（色・サイズ・配置）をCSSで変更する方法を紹介

  • サイト全体に適用するCSSと、特定ページのみに適用するCSSを使い分けられる

この記事を書いた人
立岡美沙季

立岡 美沙季たちおか みさき

得意領域

C# VB.NET JavaScript

特殊開発部に所属し、X-SPや他アプリケーションの開発に携わっています。ブログではXSPの各種機能を紹介しています！

社員インタビューを読む → 著者のその他記事一覧を読む →

もし記事を読んで「自社にとって最適なSharePointサイトを構築したい」「SharePointサイト構築をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、SharePointの設計・導入・運用をサポートいたします。

アーティサンでは2026年4月よりX-SP Featureというサービスの提供を開始しました。
X-SP Featureは、SharePointの標準機能では対応できないアドオン機能を、SharePoint Framework（SPFx）というSharePointの拡張開発技術を用いて提供するSharePointアドオンサービスです。

X-SP Featureをご活用いただくことで、標準機能では限界を感じていた皆様の「本当に欲しかった機能」を簡単に導入できます。

X-SP Feature | SharePoint 拡張機能サービス

X-SP Feature | SharePoint 拡張機能サービス

SharePoint アドオンサービス SharePointをより便利にする ツールを提供します

前回はX-SP Featureの機能を利用して「Hello World」をSharePoint上に表示させることができました。

X-SP Featureでできること～SharePoint上にHello Worldを表示させてみよう！～

X-SP Featureでできること～SharePoint上にHello Worldを表示させてみよう！～

X-SP Featureを使ってSharePointにHTMLやCSS・JavaScriptを適用する方法を解説。

本記事では出力した「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

Home適用前

SitePages/test

test適用前

2つのファイルをアップロードします

ファイルアップロード

Homeの実行結果

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 | SharePoint 拡張機能サービス

X-SP Feature | SharePoint 拡張機能サービス

SharePoint アドオンサービス SharePointをより便利にする ツールを提供します

今後も引き続き、X-SP Featureの各機能について紹介してまいります。

2025 Microsoft MVPである弊社の小刀稱が執筆した、X-SP Featureの機能紹介記事もぜひご覧ください。

 

こちらも合わせて読みたい

もし記事を読んで「自社にとって最適なSharePointサイトを構築したい」「SharePointサイト構築をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、SharePointの設計・導入・運用をサポートいたします。

次に見るコンテンツ