Plotly&Dash を使う上でよく使うテクニックをまとめました。 メインPythonで少しCSS&JavaScriptです。 ※内容は随時更新していきます 散布図のカラーテーマを変更する fig = px.scatter( df, x="sepal_width", y="sepal_length", color_discrete_sequence=px.colors.sequential.Viridis, // ここでテーマ設定 ) #使用できるテーマは下記で確認可能 #colorscales = px.colors.named_colorscales() #print(colorscales) Plotly: Built-in Color Display Mode Bar非表示 Plotlyでグラフを表示したとき表示される、右上のアイコンバーを非表示にする。 Plotly (CSSで変更する場合) .chart .modebar-container{ display: none; } DashのFigureで変更する場合 dcc.Graph( id='graph', config={ 'displayModeBar':False, }, figure = figure, // 各自で用意 ), JavaScriptで編集する場合 Plotly.newPlot('myDiv', data, layout, {displayModeBar: false}); Configuration Options in JavaScript Map 右下企業情報　非表示 .chart .mapboxgl-control-container{ display: none; } グラフ周りのカラーを変更 外周エリアの白色部分とセンターのグレーカラーを透過させる。 fig.update_layout( paper_bgcolor='rgba(0,0,0,0)', # legend and axis transparent plot_bgcolor='rgba(0,0,0,0)', # graph area transparent ) グラフのMargin, Padding調整 下記はMarginとPaddingを0にするコード。 fig.update_layout( margin = dict(l=0, r=0, b=0, t=0, pad=0), ) Plotly レスポンシブ対応 Responsive / Fluid Layouts in JavaScript

こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 本日はSassについて書きます。 メリットデメリットや実際の使い方などを載せています。 Sassとは？ Sass(サス)はSyntactically Awesome StyleSheetの略。 CSSを拡張して扱いやすくしたスタイルシートのこと。 またメタ言語でもあり、メタ言語は、ある言語に別のルールを定義するために使われる。 拡張言語とも呼ばれる。効率駅にCSSを記述することできる。 メリットデメリットは？ ☆メリット☆ ・記述量を減らすことができる ・作業効率UPできる(下記参照) ①入れ子の使用が可能 ネストと呼ばれる入れ子の構造で記述する為、子要素を波括弧で囲い まとめてスタイルを設定することが可能。 CSSのように独立して書くことがないので親子関係がわかりやすい。 ②変数を利用できる ローカル変数・グローバル変数両方利用可能。 例えばグローバル変数で色を宣言した場合、その後セレクタの宣言の中でプロパティに代入することができる。 同じ値を様々なプロパティに利用できるので便利。 値を変更する場合もグローバル変数の値だけ変更すればいいのでメンテナンスが楽。 ③関数を使用できる ④ミックスイン・継承による効率化 ミックスインとはスタイルに引数を持たせること。 値を変更しつつ複数の場面で使用可能。 関数は値だけを返すが、ミックスインはスタイル自体を返してくれる。 継承は引数を持たず使いまわしができるスタイルのこと。 ★デメリット★ ・コンパイラが必要 CSSに変換しなければいけないため、環境によってRubyやコンパイラをインストールするなど 開発環境を整える必要がある。 ・全ての企業がSassを導入しているとは限らない ちなみにSCSSとSASSの違いは？ 両方ともSassの記述方法。 拡張子はそれぞれ「.sass」「.scss」となる。 書き方が少し違う。 （例）SASS 「{}」や「；」の使用は無し。インデントを使用する。 SASS ul background: #000 li margin: 2rem img width: 300px （例）SCSS 「{}」や「；」の使用有り。cssと似ていてわかりやすい。 SCSS ul{ background: #000; li{ margin: 2rem; img{ width: 300px; } } } ↓コンパイル後は両方とも同じ↓ CSS(コンパイル後) ul { background: #000; } ul li { margin-bottom: 2rem; } ul li img { display: block; } SCSSの書き方が主流である。 上記にメリットデメリットを書きましたが 作業効率が上がったりSassを学んでおくには損はない！ ということで開発環境を整えるところから始めます。 参考サイト 【CSS】Sassは絶対使った方が良いよ！使い方入門編 penpenメモ/SassとSASSとSCSSの違い 最後に 次回は環境構築についてです。 メモを載せていますがどなたかの参考になれば嬉しいです

コピペ可！jqueryを使った簡単なハンバーガーメニュー実装 備忘録として書いておきます。 完成イメージ ①右上のハンバーガーメニューをクリックすると、 ②横3本線が×印に変化し背景が黒く覆われたサブメニューが表示されるようになる。 コーディング流れ 1.まずheadにjqueryリンクを用意 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 2.HTMLでハンバーガーメニューを作る ⇒span×3を記述 3.ハンバーガーメニュークリック時に出るサブメニュー <div class="sp_menu"> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="globalMenuSp"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> <li><a href="#">え</a></li> <li><a href="#">お</a></li> </ul> </nav> </div> 4.CSSで装飾 .nav{ display: none; } .sp_menu{ display: flex; margin-top: 10px; justify-content: center; } /*ハンバーガーメニュー*/ .hamburger { display : block; position: fixed; z-index : 3; right : 13px; top : 12px; width : 42px; height: 42px; cursor: pointer; text-align: center; } .hamburger span { display : block; position: absolute; width : 30px; height : 2px ; left : 6px; background : #ddd; font-weight: bold; -webkit-transition: 0.3s ease-in-out; -moz-transition : 0.3s ease-in-out; transition : 0.3s ease-in-out; } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 30px; } /* ナブ開いてる時のボタン */ .hamburger.active span:nth-child(1) { top : 16px; left: 6px; background :#fff; -webkit-transform: rotate(-45deg); -moz-transform : rotate(-45deg); transform : rotate(-45deg); } .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) { top: 16px; background :#fff; -webkit-transform: rotate(45deg); -moz-transform : rotate(45deg); transform : rotate(45deg); } nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #fff; background: rgba(0,0,0,0.7); text-align: center; width: 100%; height: 100vh; background-size: cover; opacity: 0; transition: opacity .6s ease, visibility .6s ease; } nav.globalMenuSp ul { margin: 0 auto; padding: 0; width: 100%; margin-top: 50px; display: block; } nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; transition: .4s all; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; } nav.globalMenuSp ul li:hover{ background :#ddd; } nav.globalMenuSp ul li a { display: block; color: #fff; padding: 1em 0; text-decoration :none; } nav.globalMenuSp.active { opacity: 100; } 5.HTMLに戻りbody最下層に以下記述 <script> $(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); }); </script> 今回は初めての投稿だったので今のところはこれで終わり。 慣れてきたらリメイクしていきます。