web制作が捗りそうな便利なwebツール【随時更新】 - Qiita
概要 制作時にブクマしとけばいいのについ毎回検索しちゃうものや ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ？」みたいなやつを防ぐ為に 自分及び社内用に作ったリンク集です。 ルール 会員登録やインストール無しで使える無料のwebツール等 ※例外としてGoogleはログイン可能とします。 オンラインエディタ コード共有 CodePen HTML・CSS・JSをブラウザ上でサクッと試すのに便利。 右上の「New Pen」で無料で使える。 scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能 CodeSandbox VanillaJS、React、Vue、Angularなどの環境がサクッと試せる。 Add Dependencyでnpmのパッケージを入れたり、Shareの方法も様々でテンプレートとしてのダ
HTTPステータスコードチェッカー｜複数URL一括検索&転送経路調査もOK
HTTPステータスコードチェッカー｜一括検索&転送経路調査もOK 複数の任意URLからHTTPステータスコードを一度に取得・確認する事ができるwebツールです。 200や404コードはもちろんの事、301や302リダイレクトの転送経路検索も同時に表示可能です。 ▼URLを入力（1行に1URL） NOコードURL 1
HTML5とHTML 5.1、それらの新機能
2016年11月に2年ぶりのバージョンアップを果たしたHTMLの言語仕様。その目指すところと、HTML 5.1の新機能を幾つか見てみよう。 連載目次 2016年11月1日付けでW3CはHTML 5.1を勧告した。これは2014年10月28日付けで勧告されたHTML5をバージョンアップするものだ。本稿ではその主な追加機能などをざっくりと見ていくことにしよう（なお、本稿ではメジャーバージョンのみを付加する場合には「HTML5」と、マイナーバージョンを含める場合には「HTML 5.1」などと表記する。これはW3Cでの仕様における表記とも合致している）。 そもそもHTML5とは 新機能の話をする前に「HTML5とは」について少し考えておきたい。1つは誰が仕様を策定しているか。もう1つはHTML5の位置付けだ。 仕様を策定するのは誰？ 前者に関していえば、現在、HTMLはWHATWG（Web Hyp
Webサービスを立ち上げたい人の背中を押してくれる良記事17選
2015年10月1日の記事を更新しています。 新しいWebサービスのアイデアがあっても、何から手をつけたらいいか分からない、進め方が分からないという方は多くいらっしゃるんのではないでしょうか。 なにより、同じようにWebサービスを立ち上げた人からの助言や参考にしたいというような後押しが欲しいと感じる場合もあるでしょう。 今回は、Webサービスを作りたい方が読むべき記事をまとめてご紹介します。 経験者によるサービス立ち上げ時にやったこと、失敗例、考え方と言うような生々しい実体験までを知ることができます。 新たにWebサービス立ち上げ時に役立つ内容ばかりですので、これから始めようと思っている方は参考にしてみてください。 Webサービスを始める際に読んでおきたい記事まとめ 1.立ち上げたウェブサービスを失敗させないために ウェブサービスの立ち上げ時に大切なこと｜ウェブストリートメディア 計画を立
CSSファイルとJSファイルを最小化してパフォーマンスを向上させる
CSSファイルとJSファイルを最小化してパフォーマンスを向上させる 転送量削減のためのアプローチについてはgzipの他に、テキストファイルそのものの圧縮がある。これを行うと転送にかかる時間が短くなるだけでなく、ブラウザがJavaScriptを評価する時間や、キャッシュされたときのメモリの削減にも繋がるので、是非実施したい。 最小化・最適化 使っていない関数や余分な変数宣言を削除したり、共通化をしっかり行い、冗長なコードを除くこと。cssに関しては構造の最適化までしてくれるcssoというツールがある。ホワイトスペースの除去など一般的な圧縮の他に、ショートハンドで書けるところをショートハンドに変換してくれる。素晴らしい。Gruntのプラグインもある。 開発中はコメントを適切に書いて、見通しの良いコードを書くべきだが、ブラウザに認識させる段階ではその必要がない。改行コードが取り払われて一行になっ
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.13? Compatibility with recent jQuery versions (up to 3.6): Usage of deprecated jQuery API
WEBデザインが独学で身につく！WEBデザイナー必見の神サイト20選
2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー１年制が、今からの更新情報を受
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.js - URIN HACK
ブロック要素の高さを揃える軽量なjQueryプラグインjquery.tile.js。このプラグインを使用するとブロック要素を簡単にタイル状に並べることができる。 このプラグインには余分な機能が一切無いため 使い方がシンプルでプラグインは非常に軽量 になっている。 JavaScriptを使用しないで要素の高さ揃える場合はHTMLのtable要素を使う、CSSのdisplay: tableを使用する、float: leftで横に並べてmargin-bottomを大きくするなどの方法が考えられるが、デザイン面で融通が効きにくく初心者にとっては少し敷居が高い。 要素を横に並べるにはfloat: leftやdisplay: inline-blockなどを用いるのが最も簡単だが、この場合HTMLとCSSだけで要素の高さを自動的に揃えるのは（特にそれが複数行あったり各要素の高さが内容物に応じて可変だった
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Webデザイン作成に必須のツール＆効率化できるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL
2回も続いてないのにまさかの番外編！ここぞ変化球！キエル消える魔球！！ ってことで、最近Androidの相手ばかりしていて、「IE… そんな女もいたよね」って感じでしたが、ちょっとハマったので忘備録。グラデーションを使ったデザインをCSSで再現しようとした話。ということでCSSグラデーションのスニペットをUltimate CSS Gradient Generatorで吐き出してみたんですわ。 /* CSS */ .gradient { background: -moz-linear-gradient(top, #000 0%, #595959 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#595959)); background
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Affinger6(action)の使い方
Webpark 
丸やバツなどの記号が小さく表示される事象 | Web Design Tips
DTIのホームページサービスがクローラに返すページタイトルを改変している？ - DAHLBECK NETWORKS
SEOチェキ