Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめ コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
CSSで作る！押したくなるボタンデザイン100（Web用）
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
アプリ開発の設計にオススメな高機能設計ツール「JUSTINMIND」 | 技術屋のメモ | WEB/アプリ開発技術メモ
アプリ開発の設計にオススメな高機能設計ツール「JUSTINMIND」 by ateliee · 公開済み 2014年8月8日 · 更新済み 2017年7月1日 みなさんこんにちわ！ 今人気のプログラム言語といえば、JavaやC言語につづいてObjective-Cなどがあります。 なんといっても今はアプリ全盛期です。 一説では海外のプログラマはObjective-Cが使えるだけで給料が倍になるとか・・・・ そんなアプリ開発の際に重要になってくるのが設計フェーズです。 しかし、設計というのはとても面倒なものです。 そんなあなたにオススメなのが、超高機能な設計ツール「JUSTINMIND」をお勧め致します！ http://www.justinmind.com/ JUSTINMINDってなにができるの？ WEBサイトはもとより、iPhone,Android,iPadなどのモバイル端末、さらにはGo
吹き出しを使ったコメント欄のサンプル | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
テキストボックスをおしゃれにするCSSスニペット10選。フォームのデザイン改善に。 | KodoCode
フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。 シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。See the Pen Animated Textbox by Stefan C. (@stefcharle) on CodePen. よく見るタイプのデ
Djangoメモ(13) : extendsとblockでテンプレートの継承 - もた日記
親テンプレート作成と継承 ナビゲーションバー追加 参考：フォント変更 まとめ A Complete Beginner's Guide to Djangoのチュートリアルを参考にテンプレートを継承してみる。 親テンプレート作成と継承 テンプレートに共通部分がある場合は共通部分を親テンプレートとして定義し、子テンプレートに個別の処理を記述するのがメンテンナンスしやすい。 最初に親テンプレートとなるtemplates/base.htmlを下記内容で新規作成する。 {% load static %}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}Django Boards{% endblock %}</title> <link rel="stylesheet" href="{% static
マウスカーソルの形状を変える
解説 「cursor」プロパティは、ページ上で表示されるマウスポインタ（カーソル）の種類を変えることができるスタイルシートです。 通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。 これらカーソルの種類を要素ごとに変えることができます。 値 「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。 以下はWindows系のOSのポインタの一例です。 OSやブラウザによって表示されるカーソルの形状は異なります。 値 カーソル形状 ポインタ例
[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
style､link､scriptタグ
スタイルシートの指定方法は、①タグに直接書き込む場合、②<head>～</head>内に記述する場合、 ③外部スタイルシートファイルを使用する場合の３通りが有ります。
WordPressの管理画面内のデザインをcssで手軽に変更できるようにするプラグイン・Add Admin CSS
ちょっと今更な話題なんですけど、始めて 使ってみたら便利だったのでご紹介です。 管理画面内のcssを手軽に変更できる、と いうプラグイン。よくあるブログサービス でも管理画面は簡単にデザインを変更でき るようになっていますが、それを実現する プラグインです。 手軽に、というのはプログラミングの知識が不要って意味です。このプラグインを有効化すると、cssを追記できるようになりますので、カスタマイズの知識が無くても管理画面内のデザインを変更できます。 css書くだけで管理画面のデザインを変更できます。この手のは沢山あるんですが、結局シンプルにcssで出来るのが制作者向けかなぁとは思いました。 抜粋が狭すぎるので広げてみた。あと、テーマやプラグインはいじられると困るので非表示に、みたいな感じ。 こういったカスタマイズの目的はWebに疎いクライアントさんはアクセス出来ないようにしたい、邪魔なものを
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き
[CSS]縫い目風のかわいいデザインをスタイルシートで実装したナビゲーション
ぱっと見、画像を使用しているかのような縫い目風のデザインをスタイルシートで実装するナビゲーションを紹介します。 もちろん、画像は使っていません。 また、IE6などのCSS3非対応ブラウザも配慮した実装となっています。 Sexy CSS3 menu デモページ [ad#ad-2] 実装のポイント スケーラビリティ アンカーのフォントサイズを変更することで、サイズを簡単に調整できます。 画像は無し 画像を使用していないため、メンテナンスが簡単です。またHTTPリクエストを減らします。 カスタマイズ 簡単にドロップダウン型などに変更できます。 このスタイルシートのアイデアの元となったのは、LESSで使用されているダウンロードボタンです。 LESS 実装方法 HTML HTMLはspan要素を使っている以外は、クリーンです。 このspanはスタイルをつけるのに必要で、疑似要素非対応ブラウザへの配慮
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
ブラウザのスタイルをリセットするスタイルシート -Normalize CSS
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
罫線を描く【border】：CSS入門