PingendoPingendo Bootstrap 4 builder Design, build and deploy web pages in a flow. Pingendo is a modern tool for designers, developers and web agencies. Intuitive as stacking blocks, powerful as a text editor. Download it for free
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
jQueryでバリデーション付きメールフォームを作ろう (1/3)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) ダウンロードページ
みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) Ver. 1.0 のダウンロードページ このページから、miChecker Ver. 1.0 （以下、miCheckerと呼びます）がダウンロードできます。 miCheckerのダウンロードおよびインストールは、必ず以下の説明をよく参照した上で実施して下さい。 miCheckerの実行環境 ダウンロードの手順 インストールの手順 miCheckerのダウンロード 1. miCheckerの実行環境 miCheckerは、以下の実行環境でお使い頂くことができます。 OS： Microsoft Windows XP SP3, Windows Vista, Windows 7 メモリ： １GB以上 （2GB以上を推奨） ハードディスク空き容量： 250MB以上 Java実行環境： Java 32bit版 Versi
5年間放置サイトで月間35万PV稼ぐ3つの戦略
訪問数は約4倍、PVは約2倍になっています。 PVより訪問数の伸びが高いので検索エンジンからの流入が増えているのでしょう。 最近のGoogleは新しいページを重要視するというのはウソですね。だって、うちのページは最低5年前、大半は10年以上前に書かれたものですから（笑） では何がほったらかしなのに検索エンジンにも有利に働き訪問数が増え続ける要因なのかというと。 おそらくですが、ツイッターやフェイスブックなどのSNSやQ&Aサイトなどでたびたび引用され被リンクが逓増し続けているからだと思います。 もしGoogleが「新しさ」を重要視しているなら、ひょっとするとページではなく「被リンクの新しさ」ではないかと勝手に想像しています。 「引用元になる→被リンクが増える→検索順位が上がる→引用される」この循環ですね。 さて、ここから本題です。 うちのサイトが引用されやすい３つの要因。 1) 枯れたコン
Credit Card Test Numbers and Paypal Test Accounts
2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」
AWS + 網元で、超高速 WordPress を手に入れよう、そうしよう
8月1日から、このサイトの WordPress を置いているサーバーを Amazon Web Services（以下 AWS）の Elastic Compute Cloud（以下 EC2）に移してみました。 ちょっぱやになってるけど、でも導入難しいんでしょう？なんてぼくが半年前に思っていたような声が聞こえてきそうですが、AWS の導入自体はさして難しいものではありません。 この記事では、ぼくでもできる、あなたでもできる AWS + 網元の導入についてご紹介します。 Table of Contents AWS って何？ 網元って？ AWS のアカウントを作成する AWS コンソールにログインする EC2 のリージョンを選ぶ Key Pairs を作成する Security Groups を作成する サーバーインスタンスを立ち上げる Elastic IPs を設定する WordPress のセ
WEBサイトのコンバージョン改善に役立つ必須の無料分析ツール７選
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBマーケティングでは、全てのデータを数字という最も具体的な形で計測することができる。 そして、その数字をもとに地道な分析と改善を繰り返すことで最終的に大きな結果へと繋がる。 しかし、WEBサイトのパフォーマンス改善や、ランディングページのコンバージョン率UPに役立つデータを得る方法を知らないという方は意外なほど多い。 そこで、本日は私自身も使っていて、効果を実感している７つの無料分析ツールをご紹介する。 これらのツールを使うことで、あなたは喉から手が出るほど欲しかった貴重なデータを得ることができる。そして、そのデータをもとに、改善していくことで大きな結果を出すことができるようになる。 １．User Heat User Heat 登録ペ
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
非WEB屋でもサイトが作れる驚異的サービス／『サイトを作る』という敷居がどんどん低くなっていると実感する物色々 | バンクーバーのうぇぶ屋
先週くらいのお話ですが、“カナダで留学した後自分たちでスモールビジネスをやるからサイトが欲しい、でもお金無いから自分たちで作りたい。”的な相談があって、「そんな、サイト作るだけのサービスなんぞ、腐る程あるわぁああ！！」と、半分ヤケくそになってお話したので丁度いい機会だからまとめてみようと思います。 まぁ、今日はどちらかというと、完全に非WEB屋な人に向けたサイト自体を作るサービス、問い合わせなどのフォームを作るサービス、ユーザーテストを低コストで行うためのサービス、そういう物をご紹介していこうと思います。 たぶん、趣味やとりあえずサイト作りたいと思っている人には朗報として、とりあえずサイト作れる人がWEBデザイナーだと思っている人へは啓発（的な？）として、記事を書かせて頂けると幸いです！ 加えてたまに、「サイトが作れるようになりたい。」と僕の元に来てくれる人がいますが、もしそういった人が「
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
PayPal API導入・活用ガイド 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
Webサービスを10日以内にリリースする方法をすべて書いたよ（「Gumad」編） - パパパパ
このブログは、僕がこれまでWebサービスを30くらい作ってきて、失敗したり成功したり色々体験していることをまとめています。 「Gumad β」は株式会社メーヴェの安宅（ディレクター）と杉本（エンジニア）の2人で、Gumroadの存在を知ってから9日間で作ったWebサービスです。作っている間にあったできごとや僕らの動きを公開したら、これから個人やベンチャーの人たちがWebサービスを作る人の（良い意味でも悪い意味でも）参考になるかもということで、少々こっ恥ずかしいですがブログに書き残しておこうと思います。 ちなみに、今回のシステム関連の話は「Gumadβで使ったgemまとめ」こちらに詳しく書かれています。 いまは「Gumad β」はミニWebサービス的な位置づけですが、もしGumroadやその周辺のサービスが盛り上がってくれば、面白い展開ができると考えており、ベンチャーらしく短期間でゲリラ的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
【SEO対策】国産より圧倒的に高性能！海外で人気の無料SEO解析ツール10選
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
https://www.hirok-k.com/blog/
ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox