はじめてのShopifyのコーディングで注意する2ポイント | 東京のWeb制作会社 株式会社クーシー
はじめてのShopifyのコーディングで注意する2ポイント 目的別 システム開発 ECサイト ECサイト構築 先日案件にてShopifyのコーディング作業に携わりました。 Shopifyの需要は多くなってきていますが、情報がまだまだ少ないので、悪戦苦闘しながらの作業になりました。 （英語の情報が多く、日本語の情報は少ない） はじめに結論を言うと、今回ブログでお伝えしたい注意点は以下の2つになります。 開発作業の複数人展開は上書きに注意 画像ファイルの参照で1手間2手間かかる 前者は主に作業フローにおける注意点で、後者はコーディング上の注意点になります。 上記の要因には、Shopifyコーディングにおけるいくつかの特徴といえる部分が影響します。なぜそうなるか要因となるShopifyコーディングの特徴を合わせて解説します。 ローカル環境で動作確認ができない Shopifyが提供しているThem
ShopifyでCSSやJS、画像を読み込む方法
Shopifyでテーマフォルダに入れたCSSや画像ファイルを画面に表示する方法を解説します。 テーマフォルダ以外にも管理画面からアップロードしたファイルを読み込む方法についても解説します。 ShopifyでCSSやJSファイルを読み込む方法 cssやjsフォルダの読み込み方法は次の３つがあります。 テーマのassetsフォルダから読み込む 管理画面のファイルにアップロードしたものを読み込む 外部サーバーから読み込む テーマのassetsフォルダから読み込む テーマで使用するCSSやJavascriptファイルは通常assetsフォルダに入れて管理します。 assetsフォルダにあるcssファイルやjavascriptファイルを読み込むには、asset_urlフィルタを使います。 <link rel="stylesheet" href="{{ 'style.css' | asset_url
レスポンシブでPCのときだけ改行しスマホの時は改行しない方法 | IT女子のお気に入りフォルダ
PCで任意の箇所にいれた改行をスマホでは改行せずに表示したい！っていう、レスポンシブ対応するうえでのあるある。 このあるある問題を解決するとっても簡単な方法をご紹介します。 このような記述の場合 <p>これはレスポンシブ対応時の改行問題を解決する方法です。<br class="br-sp">ここで改行しています。</p> PCではbrタグで改行されて表示されます。 ここに、任意のクラスを付与しておきます。（例では「br-sp」としました。） スマホのとき（例では画面サイズが640px以下の場合）はこのbrタグを表示しなければいいので、以下のcssを追記します。 @media screen and (max-width: 640px) { .br-sp { display:none; } } これで、OK！
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference
javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
画像を使わずにツリー状のサイトマップを実現するCSS @ WWWPArtisan
表題のとおりなんですが、画像を使わないで、ツリー状のサイトマップを作る方法をご紹介します。 キャプチャのようなサイトマップが出来上がります。 まずはHTMLから。 <section> <h1><a href="#">ホーム</a></h1> <ul> <li> <a href="#">ページ1</a> </li> <li> <a href="#">ページ2</a> <ul> <li> <a href="#">ページ2-1</a> </li> <li> <a href="#">ページ2-2</a> <ul> <li> <a href="#">ページ2-2-1</a> </li> </ul> </li> </ul> </li> <li> <a href="#">ページ3</a> <ul> <li> <a href="#">ページ3-1</a> </li> </ul> </li> </ul> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simplicityの基本的な文章装飾スタイルを使う方法まとめ
