サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPhone 17
designup.jp
この記事ではFigmaで作ったデザインからHTMLやCSSコードを出力する方法を紹介します。 Figmaで作成したデザインからCSSコードを生成したり、HTMLとCSSでコードを取得することができます。 Figmaからコードを生成するには？ Figmaのデザインからコードを生成する方法は以下のようなものがあります。 開発モードを使う プラグインを使う テンプレートを使う それぞれ詳しく紹介します。 Figmaの開発モードでCSSコードを取得する 開発モードはFigmaの機能の1つで、デザインのCSSコードを取得することができます。 開発モードではCSSコードの取得に加えて次のような機能が実装されています。 デザインからCSSコードを取得 VSCodeとの連携 アセットのエクスポート コンポーネントのプレビュー コーディングを効率化してくれる開発モードですが、使えるのは有料プラン(¥1,80
VSCode(VisualStudioCode)の外見を変えて画面を見やすく&おしゃれにカスタマイズできる配色テーマを集めました。 テーマは新しいものが次々に公開されているので、ずっと使ってるテーマから乗り換えると意外と使いやすかったりします。 このページでは2024年最新のVSCodeテーマを紹介します。 -> こちらも合わせてどうぞ「2024 VSCodeのおすすめ拡張機能まとめ」 VSCodeのテーマ設定方法 VSCodeのテーマを紹介する前に、テーマの設定方法やインストール方法をさくっと解説しておきます。 VSCodeでテーマを変更するには以下の手順を実行します。 テーマをインストール テーマ設定画面を開く テーマを選ぶ 以下で詳しく解説します。 1.テーマをインストールする VSCodeを開いて右側のアイコンメニューから拡張機能をクリックして拡張機能パネルを開き、入力フォームにテ
Bootstrap5の無料テンプレートを配布しているサイトを集めてみました。WordpressからHTMLまで配布されているテンプレート数は総勢300以上！ Bootstrap5で作られたテンプレートはテンプレート配布サイトでたくさん公開されているものだけでなく、個人サイトでひっそりと公開されているものもあります。 この記事では、無料でダウンロードできる高品質なBootstrap5を世界中から集めてみました。 Bootstrap5で作られた無料Wordpressテーマ Bootstrap5で作られたWordpressテーマをまとめて紹介します。Wordpress向けのテーマはスターターテンプレートとして配布されているものが多いです。 ここではその中でもとくに実用的なものを紹介します。 bootScore ダウンロードはこちら こちらはBootstrap5で作られたWordpressのスター
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
WebデザインのツールとしてXDは当たり前のように使われるようになってきています。でも納品はPSD（フォトショップデータ）を要求されることがまだまだ多いですよね。 XDは単独でPSDデータを出力する機能がありません。一旦svgやpdfにしてそれを読み込む方法もありますが、それだとレイヤー構造が無くなったり、フォントがアウトライン化されるという問題があります。 このページではXDで作成したファイルをPSDに変換する方法を紹介します。 XDのファイルをPSDに変換するには？ PSDデータが必要なときは、PhotopeaというWebサービスを使うことで簡単に変換できます。しかも無料で簡単に使えるので今すぐデータが欲しいというときも使えます。 ただし、普通にやると不完全なデータになるのでやり方と合わせてコツを紹介します。 XDをPSDに変換する方法 Photopeaを使ったXDデータからPSDデー
Bootstrap4とBootstrap5のコンポーネントやClassをすべて網羅したチートシート集です。 Bootstrapはグリッドレイアウトや数多くのコンポーネントなどすごく便利なんですが、量が多いので覚えるのがすごく大変。そんなときに便利なのが１枚のPDFにすべてをまとめてあるチートシートです。 Bootstrap4と5のコーディングに慣れるまではチートシートを手元に置いておくことでコードを忘れたときも安心。 Bootstrap5のチートシート集 まずは最新版のBootstrap5から。 公式サイトのチートシートを見る Bootstrap5公式のチートシート。Bootstrap5で使えるコンポーネントやフォーム、グリッドレイアウトなどが一覧表示されているので欲しいコンポーネントを探してソースコードを表示すれば簡単にコードを取得できます。ソースコードを取るのでCSSも一緒にチェックで
EC-CUBE4でTwigからお知らせや商品データを取得するには？ EC-CUBE4ではTwigを拡張するTwig Extensionが実装されています。 // src/Eccube/Twig/Extension/RepositoryExtension.php public function getFunctions() { return [ new TwigFunction('repository', function ($entity) { $repository = $this->em->getRepository($entity); return $repository; }, ['pre_escape' => 'html', 'is_safe' => ['html']]), ]; } この関数ではrepositoryという名前で呼び出せる関数が定義されていて、エンティティを指定す
AdobeXDのアートボードに設定できるグリッドで、iPadやSurfaceなどのアートボードのプリセットを使ってBootstrap4のグリッドを作る方を紹介します。 XDでBootstrapを使ったレスポンシブ対応サイトを作成する場合に便利です。 XDでBootstrap4のグリッドを作る方法 ここではXDのスタイルパネルにある「グリッド」設定を使ってBootstrap4のグリッドを作ってみます。 やり方はアートボードを選択した状態で、右側のスタイルパネルの下にある「レイアウト」にチェックをつけます。あとは「列」を12に、「段間幅」を30にして、左右のマージンを画面幅ごとに設定すれば完了です。 左右マージンの計算方法 左右マージンの計算方法は次の通りです。container幅に-30pxしているのは内側のpaddingを引くためです。
EC-CUBE4.3でショップを作りたいけどテンプレートのカスタマイズ方法がわからない、難しい、という方向けにゼロからEC-CUBE4のテンプレートカスタマイズ方法をわかりやすく解説します。 テンプレートのページやブロックの編集、アップロードした画像の表示方法、デザインのカスタマイズなどを網羅的に解説していきます。 ここの記事では最新版のEC-CUBE4.3を使用します。 EC-CUBE4 テンプレートカスタマイズの基礎知識 まずはEC-CUBE4のテンプレート構造やファイルの場所など基本的な知識について解説します。 EC-CUBE4とは？ EC-CUBE4は無料で使えるネットショップを作るためのツールです。ブログやホームページを作るときによく使われるWordpressというツールがありますが、そのネットショップ版と考えるとわかりやすいと思います。 公式サイトはこちら Wordpressと
Bootstrap4のテーマを作れるテーマビルダー、Webサイトビルダーまとめ。 Bootstrap4のリソースはたくさんありますが、中でもビルダー系ツールが豊富なのがいいところ。ビルダーを使えば画面を見ながらテーマを作れたり、ドラッグ＆ドロップで簡単にWebサイトを作れます。 Bootstrap4のテーマやテンプレートを作れるツール Bootstrap Magic Bootstrap Magicを使う Bootstrap4のテーマを簡単にカスタマイズできるWebツール。変更はリアルタイムに更新されるため変化がすごくわかりやすいです。カスタマイズしたらCSSやSCSSファイルをダウンロードして使うことができます。 Pinegrow Pinegrowをダウンロードする こちらはWindows、Mac対応のダウンロードして使うアプリ。一昔前のDreamWeaverを正統進化させたようなとんでも
Bootstrap4のCarousel（カルーセル）コンポーネントの使い方を解説。 画像やコンテンツのスライドショーとして使えるカルーセルを使えば、jQueryプラグインを追加しなくても良いのでページの読み込み改善にも役立つコンポーネントです。 普通のスライドショーだけでなく、ちょこっとカスタマイズすれば結構いろいろできちゃいます。 Bootstrap4 Carousel（カルーセル）の基本的な使い方 Bootstrap4のカルーセルは画像やテキストなどをスライド表示できるコンポーネントです。 左右のコントローラや下部に表示されるインジケーターをクリックすると画像が切り替わる仕組み。 公式ドキュメントはこちら 基本構造 .carouselの親要素内にインジケータ、コンテンツ、コントローラが入ってます。 基本的にはドキュメントのコードをコピペして画像タグのsrcに画像のURLを入れればそのま
Bootstrap4のテーマカスタマイズ方法をまとめてみました。 Bootstrap4はそのままでもそれなりのデザインを作れるのですが、少し物足りないんですよね。 ここではBootstrap4のテーマの作り方と合わせて、簡単にテーマカスタマイズできるツールなども紹介します。 Bootstrap4のテーマカスタマイズ、３つの方法 Bootstrap3ではLESSを使って別にテーマファイルを作り、数多くの変数をカスタマイズするというややこしいことをしていましたが、Bootstrap4ではSASSに変更されてカスタマイズもやりやすい構造になっています。 Bootstrap4でテーマをカスタマイズする方法は大きく分けて、「CSSを書く」「Sassを書く」「ツールを使う」の３つ。 ではひとつずつ解説していきます。 CSSを書いて上書きする CSSファイルにCSSコードを書いてスタイルを上書きすること
Bootstrap4の無料テンプレート300本+αまとめ。 Bootstrap4の無料テンプレートを配布しているサイトを集めてみました。無料といってもレイアウトやデザインなどどれも高品質なものばかり。これから作るレスポンシブサイトのベースとしても便利。 デモページでデザインのサンプルを見ることができるのでBootstrap4でサイトを作る際の参考にもおすすめです。 Bootstrap5の最新無料テンプレートはこちら Bootstrap4の無料テンプレート、テーマ どのサイトからも無料でダウンロードできます。ダウンロードしたテンプレートをそのまま使ったり、基本のレイアウトとして活用することもできます。どれもクオリティは高いのでコーディングの参考にもなると思います。 なお一部のテーマではリンクの表示が必要なものがあるためダウンロードの際には注意文をよく読んでから使ってください。 StartBo
VSCodeをもっと活用したいVSCode使いのための拡張機能まとめです。 コーディング効率化できる定番拡張機能からAI対応、仕事効率化、ノートアプリになる超便利な拡張機能まで、2万本以上ある拡張機能の中から2023年におすすめできるものを厳選して集めてみました。 -> こちらも合わせてどうぞ「2024 VSCodeのおすすめテーマはこれだ！」 VSCodeのコーディング効率化できる拡張機能 VSCodeのコーディングを効率化してくれる拡張機能がこちら。 コードフォーマットの定番「Prettier」 「Prettier」はコードをルールに従って自動的にフォーマットしてくれます。HTMLだけでなくあらゆるプログラミング言語に対応している最強の拡張機能。 「Beautify」が使えなくなったのでその代替としてこちらが使われるようになっています。 これがあればお酒を飲んでいようが２日寝てなかろう
BASE初心者向けのデザインカスタマイズ入門編。 BASEはHead要素も含めてカスタマイズできるため、大変自由度が高いのが特徴。頑張れば完全オリジナルのお店を作ることもできます。 この記事ではBASEのデザインカスタマイズの始め方と、どんなことができるかをまとめてみました。 BASEのテーマは自作できる？ BASEのデザインページを開くと、テーマを選んだり、スタイルを変えたり、ロゴを変更したりと言ったメニューが表示されます。 このままだとできることが限定されているので完全にオリジナルのテーマを作成することができません。 BASEでテーマを自作するには「HTML編集App」というアプリをインストールする必要があります。 このアプリをインストールすることでテーマを作成できるようになります。 BASEの他のショップにコピーできないの？ BASEの他のショップにコピーする機能はありませんが、テー
無料で使える背景パターンジェネレータを集めてみました。 背景パターンはWebサイトに限らず様々なところで使われます。ざらざらした感じのテクスチャやストライプ模様、イラストのリピートなどなど。Photoshopなどで実際作ろうと思うと結構大変なんですが、簡単なものならブラウザ上で作れるパターンジェネレータがおすすめ。 無料のツールでも画像としてダウンロードできたり、かなり細かい設定ができるものもあるのでお気に入りのものがあればブックマークしておきましょう。 無料で使える背景パターンジェネレーターまとめ patternico パターンに使いたい模様や画像をアップロードしてオリジナル背景パターンを作成できるツール。あらかじめ用意されたプリセットもあり、カラーの変更も可能。作成した背景は画像としてダウンロードすることができます。 Tartanmaker チェック柄の背景パターンを作成できるパターン
フリーで使えるかわいい動物アイコン素材をあつめてみました。こちらのアイコンはベクター素材なので拡大・縮小しても画像が荒くなりません。なのでこの素材をもとに自分でオリジナルアイコンを作ったり、アプリのアイコンなんかにも使えそう。 他にもペットショップやペット関係のWebサイト、情報サイトでも使えるかわいい動物アイコンが多いですね。無料でダウンロードできるフリー素材ですが、個人使用のみOKのようなものもあるのでライセンスに関しては個別に確認お願いします。 フリーで使えるかわいい動物アイコン Animals flat vector set Farm animals collection Farm domestic animals icons icon daquan animals vector material Petshop vector badges Vector animals free
Bootstrap3 グローバルナビとNavbarの簡単な使い方 初心者のための簡単なBootstrap3のはじめ方 Bootstrap3でFormを簡単に作る方法 Freeで今すぐ使えるTumblrのテーマ集ベスト７０ Bootstrap3 アコーディオンとCollapseの簡単な使い方
×Close 現在ブログデザイン改装中！表示が崩れるかもしれませんが、ご容赦ください_(._.)_
フリーランスのweb制作をしています。WordpressやEC-CUBEなどのCMSを使ったWeb制作が得意。 このサイトではフリーランスやクリエーターのためのwebデザインテクニック、CMSカスタマイズ方法を紹介します。
フリーランスでweb制作をしています。WordpressやEC-CUBEなどのCMSを使ったWeb制作が得意。 このサイトではフリーランス・クリエーターのためのライフハック、コーディング、webデザインテクニックを紹介します。
Tumblr無料テーマ「KOHNAN」 KOHNANはTumblrの無料テーマです。自由にダウンロードして使用して下さい。ライセンスはMITライセンスとなっています。商用・非商用問わず自由に使用・改変できます。 ダウンロードとインストール 右にあるダウンロードボタンからダウンロードページへ移動します。そのページにあるダウンロードボタンをおしてファイルをダウンロードしてください。 ダウンロードしたzipファイルを解凍するとhtmlファイルが入ったフォルダがあります。レイアウト別に３つのファイルがあるので、好きなものを選んでhtmlの中身をコピーしてください。 kohnan.html : 通常のブログ風テーマ kohnan-grid.html : グリッドレイアウトのテーマ kohnan-fix-side.html : 固定サイドバーのテーマ そのあとTumblrのカスタマイズページに移動し
CSSでログイン画面で使われるフォームのスタイルを弄ったことが少ないのでやってみました。デザインを変えたいと思いながらも、デフォルトのまま使ってしまうことが多いコメントフォームなどのフォームのデザイン。この記事ではそのフォームのデザインを CSS ジェネレーターで簡単に作ってしまいます。 ここで作ったログイン画面の完成図はこんな感じ。 CSSを使ったログインフォームの作成 HTMLとCSSでログイン画面で使われるフォームを作ってみる。 HTMLの構造は以下の通り。ここではHTML5を使ってログイフォームをつくってみる。HTMLコードは以下の通り。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>formsample</title> <link rel="stylesheet" type="tex
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolorem et ipsa doloremque tempore placeat voluptates repellat repudiandae autem? Eius, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, libero, quaerat, doloremque pariatur amet minima nihil enim temporibus doloribus dolorem neque sit quo id voluptas voluptate praesentium magnam? Unde, provident.sunt esse dolores do
Figmaを使ったワイヤーフレームの作り方この記事では、Figmaを使って実際にワイヤーフレームを作りながら手順を初心者の方にもわかりやすく解説します。 初めて… 2025 / 03 / 05 ここからはじめる！Figmaの使い方超入門Figmaはワイヤーフレームやバナーの作成、Webデザインなどに使えるデザインツールです。 これからFigmaをはじめ… 2025 / 03 / 01
このページを最初にブックマークしてみませんか？
『Web担当者、ネットショップ運営者、個人事業主の方など自分でホームページを作る人...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
