ウェブアプリケーション用テンプレートを公開

汎用性の高いウェブアプリケーション用HTMLテンプレートを配布します。

概要

いいツールやアプリケーションを思いついてもゼロからテンプレートを作るのはとても面倒くさくて途中から投げ出してしまいそうになります。そんな思いを解決すべく、超軽量かつ必要最低限のスタイル定義しかしていないテンプレートを配布します。

Chrome Edge IE Safari Opera Firefox
49 15 ✕ 9.1 36 31

JavaScriptはネイティブなスクリプトのみ使用しています。

特徴

  • メニューはHTML最下部にある軽量なJavaScriptのみを使って展開・縮小する様に設計されています
  • Flexボックスでレイアウトされた為、従来の手法より軽量かつ柔軟に設計されています
  • レイアウト・メニューまわりのみのスタイリングで自由度が高いです

Map

.
└── src
    ├── index.html
    └── resources
        ├── image
        │   └── menu_Item.svg
        └── script
            ├── app-main.css // メインコンテンツ部分のスタイルシートです
            ├── app-navigation.css // ナビゲーションメニュー部分のスタイルシートです
            ├── reset.css // リセットCSSです
            └── styel.css　// 統括してスタイルシートを読み込むスタイルシートです

入手

ダウンロード

コメント

  1. 匿名2022年1月25日 1:38

    sbobet.com | Home | Online Sports Betting
    Sbobet.com カジノ シークレット - the world's biggest online sports betting company. The most comprehensive In-Play service. Watch planet win 365 Live sbobet ทางเข้า Sport. Live Streaming available on desktop,

    返信削除

コメントを投稿

このブログの人気の投稿

Qt ウィンドウのあれこれ

イメージ
Qtでウィンドウを作成するには主に2通りの方法があり、QMainWindowかQWidgetを使うかで別れます。 また、QWidgetを継承しているQtウィジェット類は`show()`メソッドによって個別のウィンドウとして表示されます。 ---- > ウィンドウの作成 > ウィンドウにタイトルを付ける > ウィンドウのサイズを設定する > > 絶対値で設定 > > リサイズ > > サイズの最大値を設定 > > サイズの最小値を設定 > > 最大値と最小値を兼用しよう > ウィンドウの見た目を変える ---- ## ウィンドウの作成 QWidgetでウィンドウ自体は簡単に作成出来ます。 `//Window`から2行でウィンドウの作成をしています。 ``` #include #include int main(int argc, char *argv[]) { QApplication a(argc, argv); //Window QWidget *window = new QWidget; window->show(); return a.exec(); } ``` QWidgetまたはQWidgetを継承しているオブジェクトは`show()`メソッドを実行する事でウィンドウの作成が出来ます。 この例では内容の無いウィンドウを表示しているので全ての設定はデフォルトになっています。 ## ウィンドウにタイトルを付ける 作成したウィンドウには`setWindowTitle(const QString &)`メソッドによってタイトルを付ける事が出来ます。 ``` #include #include int main(int argc, char *argv[]) { QApplication a(argc, argv); //Window QWidget *window = new QWidget; window->setWindowTitle("サンプルウィンドウ"); ...
続きを読む

Qt setWindowFlagsについて

イメージ
Qtでウィンドウを生成する際、一言にウィンドウと言ってもダイアログウィンドウやポップアップウィンドウ等様々なタイプがあります。 またその他ウィンドウとしての機能で様々なオプションがありますが、これらの設定をQWidgetの`setWindowFlags()`メソッドを利用して設定します。 ## setWindowFlags(Qt::WindowFlags Type) ウィンドウフラグではTypeとHintの2種類の値をセットする事が出来、Typeでは大まかなウィンドウのタイプ(PopupやDialog等)を設定し、Hintでは細かいオプションを設定する事が出来ます。 またTypeは1つの値しか設定出来ませんが、Hintは複数設定する事が出来ます。 ``` //Window QWidget *window = new QWidget; window->setWindowTitle("サンプルウィンドウ"); window->setWindowFlags(Qt::Window| Qt::CustomizeWindowHint| Qt::WindowCloseButtonHint); window->show(); ``` ## タイプの種類について |Type|説明| |:-----|:-----| |Qt::Window|一般的なタイトルとコントロールのあるウィンドウを作成します| |Qt::Dialog|ダイアログウィンドウが生成され、最大化・最小化のコントロールがありません| |Qt::Sheet|Mac OSのSheetを生成します。コントロールやタイトルはありません| |Qt::Drawer|Mac OSのサブウィンドウを生成します。ウィンドウレイヤーは親ウィンドウの前後になります| |Qt::Popup|ポップアップウィンドウを生成します。他のコントロールをクリックすると閉じます| |Qt::Tool|ツールウィンドウを生成します。タイトルや装飾は必要最低限の物しかありません| |Qt::ToolTip|ツールチップである事を示します。ツ...
続きを読む

Qt レイアウト 余白の処理

# Qt レイアウトによる余白の処理 QtのLayoutはStyleSheet適応外ですが、デフォルトでは前後左右、約11pxの余白が入ります。 QMLDesignerだとプロパティ設定から余白を変える事が出来ますが、 フルスクラッチだとちょっと気づき難いかもしれません ``` QWidget *widget = new QWidget; QHBoxLayout *layout = new QHBoxLayout; widget->setLayout(layout); widget->show(); ``` この状態だと余白により思い通りなデザインにする事が出来ません。 ![デフォルトの状態](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHiJo3NdLYVInVnp5wTA2ThrX7IYFwjzqjEleYvhBJvZ2RzSEim9EBk9eHc5aT7S-wx0xQ1uS-QpVVwqjvUqr2jSMUqzUJJL-gfEAoOOlEF1s6dyXQjxk5rfYjtvEHB-ljqALzQMZ-ZK8/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2019-02-26+2.01.36.png) ## 余白を消す これはLayoutのMarginが邪魔をしているので、マージンをリセットしてあげる必要があります。 ``` QWidget *widget = new QWidget; QHBoxLayout *layout = new QHBoxLayout; //margin reset layout->setContentsMargins(0, 0, 0, 0); widget->setLayout(layout); widget->show(); ``` `setContentsMargins(Left, Top, right, bottom)`はmarginを指定するメソッドです。 この他...
続きを読む