diff --git a/commons/hdeader.css b/commons/hdeader.css
new file mode 100644
index 0000000..0d8ac51
--- /dev/null
+++ b/commons/hdeader.css
@@ -0,0 +1,88 @@
+@charset "UTF-8";
+body {
+    margin: 0;
+}
+body::-webkit-scrollbar {
+    display: none;
+}
+p {
+    margin:3px; 
+}
+a {
+    text-decoration: none;
+}
+a:hover,a:visited{
+    color: #0000EE;
+}
+ul {
+    list-style: none;
+}
+/*競合を避けるため、基本的にclassとidのみ記述*/
+.side-bar-icon {
+    width:24px;
+    fill:#ffffff;
+}
+.side-menu-content {
+    line-height: 40px;
+    height: 40px;
+    color: white;
+    user-select: none;
+}
+#side-bar-container {
+    top: 0;
+    left: -200px;
+    background-color: #333333;
+    height: 100%;
+    position: fixed;
+    z-index: 99999999;
+    display: flex;
+    width: 200px;
+}
+#side-menu {
+    width: 100%;
+    padding-top: 40px;
+    text-align: center;
+    color: white;
+}
+#mask {
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.4;
+    display: none;
+    position: fixed;
+    z-index: 99999998;
+}
+#header-side-close {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    cursor: pointer;
+}
+#header-side-open {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    cursor: pointer;
+}
+#header-container {
+    position: fixed;
+    width: 100%;
+    top: 0;
+}
+#header-inner-container {
+    height: 36px;
+    background-color: #333333;
+    color: white;
+    text-align: center;
+    position: relative;
+}
+#header-title {
+    cursor: pointer;
+    line-height: 36px;
+    height: 100%;
+    display: inline-block;
+    user-select: none;
+    color: white;
+}