サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1.CSSツール（14個） 2. パターンツール（7個） 3.イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7.SVGツール（8個） 8. スクリーンショ
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1.HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3.CSSを解析し、CSSOMを構築する 4.JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1.Web制作便利ツール 2. デザインコレクション 3.イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツールWeb制作の常識が変わる、便利な最新オンラインツールまとめWeb制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 MeiryoUI 'MeiryoUI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'YuGothic', 愛のあるユニークで豊かな書体Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体Windows8.1~ YuGothicUI 'YuGothicUI', 愛のあるユニークで豊かな書体Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MSUIゴシック 'MSUIGothic', 愛のあるユニークで豊かな書体 MS明
HTMLで最初に書かれている要素が、他のすべてを包み込む要素であるということは少なくありません。これはラッパーと呼ばれるもので、多くの人が使用していると思います。 このラッパーの在り方について、divがよいのか、sectionはどうなのか、コンテナとの違い、レスポンシブ対応の幅指定やpadding指定の効果的なテクニックなどを紹介します。 The Best Way to Implement a “Wrapper” inCSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Wrapper vs Container -ラッパーとコンテナ width vs max-width -widthとmax-width Additional Padding -追加のpadding どのHTML要素を使用するべきか <body>タグを使用 v
![[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fa295455180b3b8aecc4e6fcf4fa77f6224405f55%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201703%252F2017082401.png&f=jpg&w=240)
ブログの文字サイズって小さいことが多いと思いませんか？ 今回は一行の文字数とフォントサイズ、行間、文字間隔など、読者が読みやすいCSS設定について考えていきます。 1行の最適な文字数を元にブログの読みやすさについて深堀りしてみました。 デフォルトの文字サイズサイズが小さい設定で読みにくいように思えたのでCSSカスタマイズで大きさを調整し、最適なブログデザインを目指します。はてなブログテーマの文字サイズ設定が小さい pタグのフォントサイズを調査 1行の文字数をどのくらいにしたら読みやすいブログデザインになるのか ブログでの横書き表示は1行35文字ぐらいが読みやすい スマホでは1行15文字から20文字程度が読みやすい ブログの行間や文字間隔についても考えてみる ブログのフォントサイズを読みやすいサイズにするCSS設定はてなブログテーマInnocentのフォントサイズを大きくするCSSカスタ
初心者向けにCSSで書くz-indexの使い方について解説しています。画像などボックスの重なりの順序を指定する際に利用します。書き方を間違えると変な見た目になってしまうので、自分で書けるようにしておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査CSSで書くz-indexの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次z-indexとはz-indexの書き方実
CSSでレイアウトを組んでいる時によくある希望のレイアウトは「画像の中央配置」 そんな訳で今回は自分がCSSでコーディング作業をしている時に使用している画像の中央配置の方法を色んなサイトで調べたりするのが面倒なので、自分用の備忘録代わりにまとめておきます。 （1）「text-align:center」でインライン要素を中央寄せ 「text-align:center」はもっとも一般的な中央配置のプロパティですが、前に「text」と書いてあるとおり、テキストや画像などのインライン要素でしか使えません。画像をただ単に中央に配置したいだけなら、これだけでおけ。 【HTML】 <p class="img_center"> <img src="img/sample_image01.jpg" alt="サンプル画像" /> </p> 【CSS】 p.img_center{text-align: cen
CSSデザインサンプルのホームページ制作の流れをご確認下さい。CSSのコピー 下記ソースをコピーして下さい。 /*-------------------------containerの指定*/ #container { position: relative; width: 100%; margin: 0; padding: 0; }HTMLファイル指定部分 <body> <div id="wrapper"> <div id="header"> *** ヘッダー部分 *** </div> <!--container 基点--> <div id="container"> <div id="contents"> *** コンテンツ部分 *** </div> <div id="sidebar"> *** サイドバー部分 *** </div> </div> <div id="footer"> *
pxでも、%,em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できるCSS3の「calc()」は、プロパティの値を計算式で
calc()関数を使用すると、レスポンシブ対応ページのレイアウトや要素の配置、ビューポート幅に基づいた相対的なフォントサイズの定義などが期待通りに実装できます。 Webページやスマホアプリの実装に役立つcalc()関数の使い方を紹介します。 calc()関数はOpera Miniを除くすべてのメジャーブラウザ（IEを含む）にサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 Calc() function with Use Cases 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()関数とは calc()関数を使おう calc()関数の使い方: 相対的な固定要素の配置 calc()関数の使い方: 天地左右の中央に配置 calc()関数の使い方: ビューポート幅に基づいた相対的なフォントサイズ ca
さくっと短時間で、慣れれば1分！デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala DesignBlocks Froala DesignBlocks -GitHub Froala DesignBlocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
CSSでできることCSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。 以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。 背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。 スタイルシートが必要な理由 以前はHTMLのタグによってスタイルの指定も行われていました。 文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関する
HTMLタグの書き方HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。 たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。 タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。 題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。 <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。 開始タグと終了タグで囲むことで、開始と終了を表現します。 開始タグから終了タグまでのひとまとまりを要素と呼びます。 図の<title>要素はWebページの題名を示すタグであり、この場合、Webページ
2012/09/11 かつてIllustratorやPhotoshopで作っていたテキストの装飾もCSS3のtext-shadowプロパティを使えばもはや不要になるのではと思ってしまうくらい多彩な表現が可能になってきました。 画像ではないのでクライアント環境に合わせた適切な出力が得られますし、一度に複数のスタイルをダイナミックに変更できます。画像ファイルを作成する工数もかかりませんし、テキストデータなのでコピー可能、SEOにも効果的でしょう。 いいことづくめのCSS3によるテキスト装飾。ここでは一例を見ていきます。 強調(その1)text decoration color: #444;text-shadow: 1px 1px 0px #eee, 2px 2px 0px #707070; 強調(その2)text decoration color: #fff;text-shadow:
[18-5] 水玉、ボーダー、チェック柄を作ろう（background-size） 最終更新日：2017年11月01日 （初回投稿日：2011年08月15日） 今回は、グラデーションの応用編です。CSSのグラデーションで「水玉」や「ボーダー柄」を作り、それをCSSの新プロパティ background-size でタイリングさせます。 使用するCSSプロパティ こんなものを作ります↓本日のINDEX 水玉模様の背景を作ろう 円形グラデーションの応用で「正円」を描く 「正円」をリピートして水玉模様にしよう 「background-size」について 縦、横、斜めの縞模様の背景を作ろう 縞模様を組み合わせてタータンチェック柄を作ろう 応用でボタンとか作ってみた ● 2017年10月：この記事には ベンダープレフィックス（-webkit- などの接頭辞）を使っていましたが、不要と判断し削除し
![[18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f0369ecd9c29f6086e78d26a2468f5f731f42a00a%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fblog-imgs-110-origin.fc2.com%252Fh%252Fo%252Fn%252Fhonttoni%252Fogp_image.jpg&f=jpg&w=240)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
