<link rel="stylesheet" href="/buildmydist-2/style/common.css">
<link rel="stylesheet" href="/buildmydist-2/style/var.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
-<link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 799px)">
+<link rel="stylesheet" href="/buildmydist-2/style/tablet.css" media="screen and (max-width: 799px)">
+<link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 640px)">
<link rel="stylesheet" href="/buildmydist-2/style/pc.css" media="screen and (min-width: 800px)">
<!-- ページ設定をJSに渡す -->
様々なディストリビューションの開発の仕方を紹介します。
</p>
+ <p id="open-sp-menu">メニューを開く</p>
<p>
<ul id="bar-container">
-
-
+// 現在のページ
function SetCurrentPage(){
var distroBar = document.getElementById("bar-container");
//var barItemCount = distroBar.childElementCount;
});
}
-window.addEventListener("load", SetCurrentPage);
\ No newline at end of file
+window.addEventListener("load", SetCurrentPage);
+
+
+// メニュー開閉
+document.getElementById("open-sp-menu").addEventListener("click", function(){
+ console.log("実行された")
+ var menu = document.getElementById("bar-container");
+ if(menu.classList.contains("show-menu")){
+ menu.classList.replace("show-menu", "hide-menu");
+ }else if(menu.classList.contains("hide-menu")){
+ menu.classList.replace("hide-menu", "show-menu");
+ }else{
+ menu.classList.add("show-menu")
+ }
+})
\ No newline at end of file
text-decoration: none;
}
-.bar-logo{
- font-size: larger;
- font-weight: 900;
- float: left;
- margin-right: 2%;
-}
-
-
-.description, .bar-logo{
- padding: 0.5%;
-}
-
/* クリックされたときの色 */
.bar-item-left:active, .bar-logo:active{
/* 文字色を設定 */
user-select: none;
}
-#bar-container{
- /*
- flexboxでいい感じに配置する
- 参考サイト
- https://guillemot.jp/web/365
- https://knowledge.cpi.ad.jp/tech/169/
- */
-
- display: flex;
- justify-content: space-between;
-
- /* 回り込み解除 */
- clear: both;
-
- /* 余白設定 */
- padding-top: 1%;
- padding-bottom: 1%;
- padding-left: 5%;
- padding-right: 5%;
- margin: 0;
-}
/* 現在選択されているディストロ */
.currentdistro{
+#bar-container{
+ /*
+ flexboxでいい感じに配置する
+ 参考サイト
+ https://guillemot.jp/web/365
+ https://knowledge.cpi.ad.jp/tech/169/
+ */
+
+ display: flex;
+ justify-content: space-between;
+
+ /* 回り込み解除 */
+ clear: both;
+
+ /* 余白設定 */
+ padding-top: 1%;
+ padding-bottom: 1%;
+ padding-left: 5%;
+ padding-right: 5%;
+ margin: 0;
+}
+
+.bar-logo{
+ font-size: larger;
+ font-weight: 900;
+ float: left;
+ margin-right: 2%;
+}
+
+
+.description, .bar-logo{
+ padding: 0.5%;
+}
+
+/* スマホ用ボタンを隠す */
+#open-sp-menu{
+ display: none;
+}
\ No newline at end of file
+.bar-logo{
+ font-size: medium;
+ font-weight: 900;
+ margin-right: 2%;
+}
+
+.description{
+ font-size: small;
+ text-align: center;
+}
+
+#bar-container{
+ justify-content: space-between;
+
+ /* 回り込み解除 */
+ clear: both;
+
+ text-align: center;
+
+ width: 100%;
+ padding-left: 0;
+
+ /* 初期状態で消す */
+ display: none;
+}
+
+.hide-menu{
+ display: none !important;
+}
+
+.show-menu{
+ display: inline-block !important;
+}
\ No newline at end of file