サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
designup.jp
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フォルダの読み込み方法は次の3つがあります。 テーマの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はグリッドレイアウトや数多くのコンポーネントなどすごく便利なんですが、量が多いので覚えるのがすごく大変。そんなときに便利なのが1枚のPDFにすべてをまとめてあるチートシートです。 Bootstrap4と5のコーディングに慣れるまではチートシートを手元に置いておくことでコードを忘れたときも安心。 Bootstrap5のチートシート集 まずは最新版のBootstrap5から。 公式サイトのチートシートを見る Bootstrap5公式のチートシート。Bootstrap5で使えるコンポーネントやフォーム、グリッドレイアウトなどが一覧表示されているので欲しいコンポーネントを探してソースコードを表示すれば簡単にコードを取得できます。ソースコードを取るのでCSSも一緒にチェックで
EC-CUBE4で新しいブロックやページを作成したとき、データベースのデータが必要になることがあります。 例えば商品情報や新着情報、レビュープラグインのレビューデータなどです。このようなデータを新しく作ったブロックやテンプレートで取得する方法を紹介します。 今すぐ使える!Bootstrap4対応 格安レスポンシブテンプレート公開中 Bootstrap4に対応したレスポンシブテンプレートを公開しています。あらかじめデザインされたUIブロックを多数同梱しているので、面倒なコーディングなしに今すぐショップを構築したい方におすすめ。 -> 詳細はこちら EC-CUBE4のデータ構造 Symfonyでデータのやり取りをするときに最低限理解しておきたいのが、EntityやRepository、Controllerの違いです。 Entity: テーブルの構造が書かれている、テーブルそのもの Reposi
AdobeXDのアートボードに設定できるグリッドで、iPadやSurfaceなどのアートボードのプリセットを使ってBootstrap4のグリッドを作る方を紹介します。 XDでBootstrapを使ったレスポンシブ対応サイトを作成する場合に便利です。 XDでBootstrap4のグリッドを作る方法 ここではXDのスタイルパネルにある「グリッド」設定を使ってBootstrap4のグリッドを作ってみます。 やり方はアートボードを選択した状態で、右側のスタイルパネルの下にある「レイアウト」にチェックをつけます。あとは「列」を12に、「段間幅」を30にして、左右のマージンを画面幅ごとに設定すれば完了です。 左右マージンの計算方法 左右マージンの計算方法は次の通りです。container幅に-30pxしているのは内側のpaddingを引くためです。
EC-CUBE4は無料でネットショップを構築できるCMSですが、Wordpressに比べて情報量も少なく、Twigの書き方も覚える必要がるので難しいと感じる方が多いと思います。わかってしまえばそれほど難しくないのですが、分かるまでが結構つらいんですよね(僕も苦労しました)。 このページではEC-CUBE4初心者の方でも分かりやすく、テンプレートやデザインのカスタマイズ方法を具体的に解説していきます! EC-CUBE4.2対応 一番安いデザインテンプレート EC-CUBE4.2対応に対応したレスポンシブテンプレートを公開しています。あらかじめデザインされたUIブロックを多数同梱しているので、面倒なコーディングなしに今すぐショップを構築したい方におすすめ。 -> 詳細はこちら EC-CUBE4 テンプレートカスタマイズの基礎 カスタマイズを始める前にEC-CUBE4のテンプレート構造と開発環境
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のテーマカスタマイズ、3つの方法 Bootstrap3ではLESSを使って別にテーマファイルを作り、数多くの変数をカスタマイズするというややこしいことをしていましたが、Bootstrap4ではSASSに変更されてカスタマイズもやりやすい構造になっています。 Bootstrap4でテーマをカスタマイズする方法は大きく分けて、「CSSを書く」「Sassを書く」「ツールを使う」の3つ。 ではひとつずつ解説していきます。 CSSを書いて上書きする CSSファイルにCSSコードを書いてスタイルを上書きすること
Bootstrap4の無料テンプレート300本+αまとめ。 Bootstrap4の無料テンプレートを配布しているサイトを集めてみました。無料といってもレイアウトやデザインなどどれも高品質なものばかり。これから作るレスポンシブサイトのベースとしても便利。 デモページでデザインのサンプルを見ることができるのでBootstrap4でサイトを作る際の参考にもおすすめです。 Bootstrap5の最新無料テンプレートはこちら Bootstrap4の無料テンプレート、テーマ どのサイトからも無料でダウンロードできます。ダウンロードしたテンプレートをそのまま使ったり、基本のレイアウトとして活用することもできます。どれもクオリティは高いのでコーディングの参考にもなると思います。 なお一部のテーマではリンクの表示が必要なものがあるためダウンロードの際には注意文をよく読んでから使ってください。 StartBo
VSCodeをもっと活用したいVSCode使いのための拡張機能まとめです。 コーディング効率化できる定番拡張機能からAI対応、仕事効率化、ノートアプリになる超便利な拡張機能まで、2万本以上ある拡張機能の中から2023年におすすめできるものを厳選して集めてみました。 -> こちらも合わせてどうぞ「2024 VSCodeのおすすめテーマはこれだ!」 VSCodeのコーディング効率化できる拡張機能 VSCodeのコーディングを効率化してくれる拡張機能がこちら。 コードフォーマットの定番「Prettier」 「Prettier」はコードをルールに従って自動的にフォーマットしてくれます。HTMLだけでなくあらゆるプログラミング言語に対応している最強の拡張機能。 「Beautify」が使えなくなったのでその代替としてこちらが使われるようになっています。 これがあればお酒を飲んでいようが2日寝てなかろう
BASE初心者向けのデザインカスタマイズ入門編。 BASEはHead要素も含めてカスタマイズできるため、大変自由度が高いのが特徴。頑張れば完全オリジナルのお店を作ることもできます。 この記事ではBASEのデザインカスタマイズの始め方と、どんなことができるかをまとめてみました。 BASEのテーマは自作できる? BASEのデザインページを開くと、テーマを選んだり、スタイルを変えたり、ロゴを変更したりと言ったメニューが表示されます。 このままだとできることが限定されているので完全にオリジナルのテーマを作成することができません。 BASEでテーマを自作するには「HTML編集App」というアプリをインストールする必要があります。 このアプリをインストールすることでテーマを作成できるようになります。 BASEの他のショップにコピーできないの? BASEの他のショップにコピーする機能はありませんが、テー
フリーで使えるかわいい動物アイコン素材をあつめてみました。こちらのアイコンはベクター素材なので拡大・縮小しても画像が荒くなりません。なのでこの素材をもとに自分でオリジナルアイコンを作ったり、アプリのアイコンなんかにも使えそう。 他にもペットショップやペット関係の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のテーマ集ベスト70 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ファイルが入ったフォルダがあります。レイアウト別に3つのファイルがあるので、好きなものを選んで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
[HTML] ボタンのアイコンを追加・変更する方法Bootstrap5のボタンをそのまま使用するのではなく、アイコンをつけたい場合もCSSコードを追加することなく実装可… 2024 / 08 / 20 [HTML] Webサイトに塗りつぶしや画像の背景を追加する方法おしゃれなWebサイトによくある背景画像はレイアウトがずれていたり、サイズ調整されていますが、基本的なレイアウト方法が… 2024 / 08 / 18 [HTML] Bootstrap5のCSS変数でスタイルをカスタマイズする方法LP-UIKITのコンポーネントやテンプレートはBootstrap5に対応したHTMLでコーディングされています。 こ… 2024 / 08 / 16
このページを最初にブックマークしてみませんか?
『Web担当者、ネットショップ運営者、個人事業主の方など自分でホームページを作る人...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く