テンプレートを使って簡単にホームページが作れるサービス6選
ホームページを自分で作成する方法には、WordPressに代表されるCMSを用いるか、WIXのようなホームページ作成サービスを利用する方法、テキストエディタで作ったHTMLやCSSなどのソースファイルをサーバーにアップロードする方法の3種類があります。 ホームページ作成に関する知識に自身が無い場合、自分の作りたいイメージをホームページに再現するためには、はじめからHTMLやCSSでコーディングするのではなく、レイアウトやデザインがそのイメージに近いテンプレートを利用するのが良いでしょう。 今回は、テンプレートを利用してホームページを簡単に作成できるサービスや、テンプレートを提供しているサイトなどを紹介します。 圧倒的に使いやすいCMS！見たまま編集のferret One 直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集 | コリス
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで面倒なのは要素を整列させること Flexbox以前 Flexboxで簡単に CSSで面倒なのは要素を整列させること CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりまし
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
サイトマップの実装で面倒な階層を繋ぐラインも簡単に実装できるサイトマップ用スタイルシート -Slickmap CSS
Flexboxで実装された美しいサイトマップを簡単に実装できるビジュアル サイトマップ ツールを紹介します。サイトマップはレスポンシブ対応で、第4階層までのコンテンツに対応しています。 階層を繋ぐラインなど、実装が面倒な要素も簡単に利用できます。
デザインがしっくりこないときに試すこと10選【新米デザイナー向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情
[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート
// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is 100%, equivalent to 16px; @return #{$numSize}; } // Mixin that will include the fall back px declaratio
![[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/68f33993450e46d15bbdfbb5207d0da2c88fffc7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018071905-02.png)
Paper-co | 紙のテクスチャー素材を無料でダウンロードできるサイト
商用可のラベルとタグの無料素材 一覧 紙のテクスチャ素材をつかったラベルやアイコン素材をダウンロードできます。
商用利用無料、和紙・和風の紙のテクスチャ素材がダウンロードできるサイトのまとめ
和紙・和風の紙、畳や段ボールやノートなどのテクスチャ素材がダウンロードできるサイトを紹介します。 そのまま背景に使ってもよし、写真やイラストにオーバーレイさせてもよし、テクスチャ素材は何かと便利ですね。 素材: WASHI Japanese Papers ここで紹介しているサイトはすべて、個人でも商用でも、Webでもアプリでも紙でも無料で利用できます。 ちなみに、上の素材だけ期間限定無料です。 和紙.pw 個人・商用利用、無料。 写真ACなどを運営しているACワークスの新サービス、今度は和紙素材の専門サイトです。 ローンチ記念として、和紙のテクスチャ素材100点が完全無料でダウンロードできます！ ※要メールアドレス、初回アクセスから24時間のみ有効。
アイコン使いや図版が参考になるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 突然ですが、アイコンや図版のデザインに苦労したことってありませんか？ 僕はけっこう毎回苦労するので今回のブログで「アイコン使いや図版が上手いな」と思うサイトを集めてみました。 TAKAO 599 MUSEUM https://www.takao599museum.jp/ GIFアニでアイコンを動かしているのがとても可愛いですね！ 下層ページで使用しているアイコンも動かしてたり図版を丁寧に作っていたりと、しっかりとデザインにコストをかけている好印象なサイトです。ラインアイコンの線を太くすると親しみやすい印象になりますね。 Web design tools for designers and developers | Webflow https://webflow.com/designer 透明感のある色使いのアイコンは今後新たなトレンドとなりそうですね。サイ
WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」
WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」 Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。 Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご
豪華な花柄が美しいSVGフォント「Flower Bouquet SVG Font」
TOP > Design , Font > 豪華な花柄が美しいSVGフォント「Flower Bouquet SVG Font」 タイポグラフィ自体にデザイン性を持たせることで、ぱっと華やかなものにしてくれます。今回ご紹介する「Flower Bouquet SVG Font」は、美しい花とともに可変性の高いSVGに対応しているフリーフォントになります。 バラやパンジーなどの色鮮やかで華やかな雰囲気が特徴。デザインを彩り鮮やかに演出してくれます。 詳しくは以下 色とりどりの薔薇やパンジーなどの花は、色のはっきりとしたクラシックタイプと柔らかい雰囲気が水彩の淡いタイプの2バージョンで作成されています。ポスターやWEBサイト、ちょっとした服飾のデザイン、パッケージなどにも使用することが可能。シンプルなデザインに花を添えるにはぴったりなタイポグラフィとなっています。 ここまで精度の高いものを
デザインに使いたい最新のフリーフォントまとめ「21 Fresh Free Fonts For Graphic Designers」
TOP > Font > デザインに使いたい最新のフリーフォントまとめ「21 Fresh Free Fonts For Graphic Designers」 クオリティの高いフリーフォントは制作を支えてくれるデザインの強い味方。多種多様なフリーフォントを揃えておけばコストを抑えられる他、デザインの引き出しも広がります。今回ご紹介するのはそんなデザインにぜひ使いたい最新のフリーフォントをまとめた「21 Fresh Free Fonts For Graphic Designers」です。 Fresh Free Fonts Typefaces | Fonts | Graphic Design Junction ラフなテイストのものからコーポレートにも使えるスマートものまで、多種多様なフォントが全部で21種類紹介されています。その中から幾つか、これはと思ったフォントをピックアップしてご紹介
サイトのヘッダー・フッター・ページの前後などに任意のコードを追加できるWordPressプラグイン「Add to All」 | TechMemo
Add to Allは、WEBサイトのヘッダーやフッター、ページの前後などに任意のコードを追加することができるWordPressプラグインです。管理画面上から色んな場所にHTMLなどを追加することができます。 Add to Allのインストール インストール手順は以下の通りです。 Add to Allをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Add to Allを有効化します。 Add to Allの使い方 WordPress管理画面で[設定] – [Add to All]にアクセスして、それぞれのタブで設定を行います。 Third Party Third Partyタブでは、Google AnalyticsのトラッキングコードやSearch Consoleの認証コードなどを設定
CSSだけでスクロールに応じたプログレスバー | かちびと.net
Result スクロールするとプログレスバーが進んで、 あとどれくらいページの高さがあるか分かるようにするやつ css header { position: fixed; top: 0; height: 125px; width: 100%; background: white; } main { margin-top: 128px; } @supports (height: 100vh) { body { background: linear-gradient(to right top, #0089f2 50%, #ddd 50%); background-size: 100% calc(100% - 100vh + 129px); background-repeat: no-repeat; } body:before { content: ""; position: fixed; to
あふれるホスピタリティ！ 気がきくCSSプロパティの精鋭たちを紹介します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
あったらいいな、コンビニのスイーツデリバリー。こんにちは、フロントエンドエンジニアのザワです。 我々フロントエンドは、普段から何十種類というCSSプロパティを駆使してWebサイトの見た目を作るお仕事をしています。今回は、そのプロパティの中でも、渋くて優しくて気のきくジェントルマン、カウンターバーで「お隣の方からです……」的な、ホスピタリティあふれるCSSプロパティにフォーカスしていきたいと思います。 pointer-events: none; 効果 クリックやタッチイベントを無効化する。 場面 使う場面としては、スマホ画面などでよく見られる、ハンバーガーメニューをクリックして表示されるメニュー画面の表示非表示などです。opacityを0に設定すると要素が透明になって見た目では見えなくなりますが、要素自体は存在するのでクリックできてしまいます。 そこで「pointer-events: non
Webフォントとして使用可！入力した文字を様々な日本語フリーフォントで表示してくれるWEBサービス「ためしがき」 | TechMemo
ためしがきは、入力した文字を様々な日本語フリーフォントで表示してくれるWEBサービスです。フォントを適用したときの表示を確認することができます。 表示されたフォントの中から気に入ったものがあれば、配布サイトからダウンロードしたり、SNSでシェアしたりすることもできます。 なお、表示されるフリーフォントは、すべてWebフォントとして使用可能なフォントとのことです。 ためしがきの使い方 ためしがきにアクセスして、表示したい文字を入力します。 リアルタイムでフリーフォントが適用された文字を表示してくれます。 気に入ったフォントがあったら、クリックして詳細を開きます。 [フォントをシェアする]をクリックすると、シェア用の画像が生成されSNSに投稿できます。[配布先：〇〇]のボタンをクリックすると、配布サイトに移動してフォントをダウンロードできます。 ためしがきの注意点 ためしがきは、WOFF2とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴ丸フォントがかわいい！ロゴにも本文にもぴったり、丸めで縦長の日本語フリーフォント -コーポレート・ロゴ丸
【無料】初心者必見！LightroomやPhotoshopで使える！写真が映えるレトロなフィルム写真のような雰囲気がだせるフィルムダストテクスチャ30種！
無料で使える！使いやすい花(フラワー)のベクターイラスト画像素材28種！【フリー,AI,PSD,PNG】
