Icons - Material DesignMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
【保存版】Notionで使える「無料」のアイコン素材サイト集
FLAT ICON DESIGN（フラット アイコン デザイン） サイト名：FLAT ICON DESIGN（http://flat-icon-design.com/） カラフルでキャッチーなアイコンを無料でダウンロードできます。 日本語サイトでわかりやすく、安心して利用できるのでおすすめです。 PNGからai、SVGなど多くのファイル形式が選べ、背景色も変更できるなど、カスタマイズ性の高さもポイントです。 融通が利くのに操作がシンプルなのもうれしいです。 Google Fonts（グーグル フォント） サイト名：Google Fonts（https://material.io/icons/） Googleが提供している「フォントとアイコン」のサイトです。 馴染みのある、シンプルでおしゃれなアイコンが多いです。 ファイル形式はSVGとPNGから選択できます。 スマホやPCの「ダークモード」
【商用OK/無料】シンプル＆おしゃれ！フリーアイコン素材サイト25選 - Workship MAGAZINE(ワークシップマガジン)
Webデザインをしているけれど、イチからアイコンを作っている時間がない…… オリジナルのアイコンを作りたいけど、何か参考になるサイトはないかな？ そんな方のために、商用利用可能なフリーのアイコン素材を配布しているサイトを25個集めました。 ビジネスにも使えるシンプルな素材から、最近流行している3Dの素材まで、ジャンル別に人気のアイコンサイトを紹介するので、使用目的に合わせたアイコン素材をすぐに見つけられるはずです！ ぜひ参考にしてみてください。 フリー素材のアイコンを使う時の注意点 素材を紹介する前に、まずはフリーアイコンを使用する際の注意点をおさえておきましょう。 主に注意しておきたいポイントは、3つあります。 商用利用は可能か クレジット表記は必要か 加工は可能か まず気をつけなくてはいけないのは、商用利用の可/不可についてです。素材サイトによっては商用利用が許可されていない素材もある
H1一つでここまで出来るCSS見出しデザインのアイデア9個 :. lab. :. SQUEEZE .:
Cut here 壁はセロのおねがい一足たちを中をこめセロたた。またもう少しくたくたたるというあとずない。粗末だたんなはたまた病院の気の毒がいの上がはもう生意気たたて、これでもガラスと叩きれへんましう。 /* 01.切り取り線 */ #heading01{ position:relative; padding:5px; font:bold 24px/1.6 Arial, Helvetica, sans-serif; text-align:center; color:#655; border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1); box-shadow: 0 5px 4px -4px rgba(0,0,0,0.
大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita
まとめノート風Webサイトを作ろうとしたきっかけ 本当はWeb制作本を執筆してみたかったのですが、資金等の関係もあり、Web上でブログ形式で書いていこうと考えました。そこで困ったのがWebサイトのデザインでした。最近では、ほとんどのブログでフラットデザインが使われていますね。Qiitaもその１つだと思います。フラットデザインとは、色に関していえば基本は白地や薄いグレー色で、その他1,2色をアクセント色としてデザインしているもののことですね。比較的簡単に作れて、かつ見やすいデザインなので重宝されていると思われます。 しかし、それではどこも同じような感じなので訪問者の頭に残りづらいと思うんです。そこで、思い出したのが今でもよく使っている大学ノート(ルーズリーフ)です。中学・高校時代はよく要点をまとめたまとめノートを作ったものです。ルーズリーフを使ったことがない人はいないと思うくらい、馴染み深い
無料インスタグラムブログ埋め込みツール InstantWindow
インスタグラムの画像をホームページやブログに簡単に埋め込むことのできるツールです。無料でご利用いただけます。3,000以上のサイトで利用されている簡単に設置でき、軽量なブログパーツです
日本地図を簡単に扱えるjQueryプラグイン「JapanMap」 - 魔ッドアングラー
日本地図を簡単に扱えるjQueryプラグイン「JapanMap」 Japan Map ( jQuery plugin ) 都道府県をクリックできる日本地図 甲子園が始まるので代表校をまとめてみようと思い、日本地図をHTMLやCSSで表現できないかなーと探してみるとなかなか無いんですよね。テーブルで書くともの凄くややこしくなりそうだなと思っているところに「Japan Map」というjQueryプラグインに遭遇しました。 「canvas」というHTML5の機能を使用しており、美麗な日本地図が画像無しで使用できます。すごい！ プラグインをダウンロードする このページ上部にあるリンクから作成者様のサイトへ行き「Japan Map」の本体をダウンロードします。 「tar.gz」と「zip」がありますのでお好みの方でどうぞ。 そして、jQueryを動かすにはjQuery本体も必要ですので、無い場合は公
Japan Map ( jQuery plugin )
Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
【レスポンシブWEBデザイン】スマホとパソコンで改行の位置を変える方法 | インクループ株式会社｜神奈川県相模原市 ホームページ制作、WEBマーケティング
レスポンシブWEBデザインで納品したお客様で、パソコンとスマホでそれぞれの改行の位置に細かく指定があったケースがありましたので、パソコンとスマホで異なる改行位置を設定する方法を紹介したいと思います。 レスポンシブWEBデザインとは？ まずレスポンシブWEBデザインについて説明したいと思います。 レスポンシブWEBデザインはここ数年主流となっているWEBデザインのスタイルです。同じWEBページをパソコンで見た時とスマートフォンで見た時、それぞれのデバイスで見やすいように自動的に表示方法を変えるというものです。スマホ用とパソコン用で別々のサイトを作るわけではないので、運用面において効率的で、デザインの統一性などの利点が挙げられます。 レスポンシブWEBデザインはこんなやつです。（他のデザインに関しては制作実績をご覧ください。） ちなみにインクループで作るWEBページはすべてレスポンシブWEBデ
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
最強の font-family 指定 | Thought is free
キレイかどうかは別として・・・ 「見やすい」を重視した場合の font-family 指定は ゴシック（サンセリフ） font-family: sans-serif; 明朝（セリフ・ローマン） font-family: serif; ・・・だと思うｗ この font-family の指定の仕方は Wikipedia で採用されている。 とどのつまり、各々のブラウザで指定されたフォントにお任せするってことだ。 見やすいフォントってのは、人それぞれ違うし、 結局、普段から見慣れてるフォントが一番見やすい。 Windows Vista で満を持して登場した メイリオフォントも、今では慣れたが、 初めて出てきた時は、 何じゃこりゃー (゜Д゜)！ と感じたもんだｗ 個人や企業のWebページだと 「デザイン」という概念があるので、 そう簡単な問題ではないけど 単に「文章を読んで欲しい」というのであれ
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス
こんにちは! ヨス（プロフィールはこちら）です。 今現在、Google検索では「スマホ対応」がされているかどうかは超重要になっています。 具体的にいうと、PCの検索順位はスマホでの検索順位が適応されているのです！ 今回は、ブログのスマホ対応でのポイントをくわしく解説します。 スマホ対応で困った6つのこと 今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。 スマホで見たら画像がはみ出す?! まずはこちらの比較画像をご覧ください。 画像サイズ（左: 変更前・右: 変更後） スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。 これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。 でも大丈夫! CSSの<im
![[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/f65ab4b0dcf3e460e3895ac786ca89120feaa297/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-for-smartphone-300.jpg)
Create a New Pen
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Boxicons : Premium web friendly icons for free
JapanMapで描画した日本地図にページリンクを追加する方法
色の名前
Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法
