Web開発について教えてください

前へ 次へ
このQ&Aのポイント
  • 自分で綺麗なサイトを作るためには、どの開発環境を使えば良いのでしょうか？
  • Webアプリケーションを作成するためには、PHPとスタイルシートを使用する方法がありますが、テキストエディタで作成するのが一般的です。
  • PHPとスタイルシートを一から自分で作成するのは難しいですが、参考サイトやフレームワークを利用することで綺麗なサイトを作ることができます。
回答を見る
  • ベストアンサー

Web開発について教えてください

基本的なことで恐縮です。 以下のような綺麗なサイトを作るには、開発環境は何を使えば良いのでしょうか？ PHPとスタイルシートですが、自分でテキストエディタで記載していくのでしょうか？ 何か開発環境用のソフトがあるのでしょうか？ http://aaps.me/entry.php 上記はログインのみですが、”aaps”アプリ（以下のサイト参照）のように商品を綺麗に並べて表示操作できるWebアプリを作成したいのですが、開発環境を教えてほしいです。 http://aaps.me/welcome.html PHPとスタイルシートを一から自分で作成しても、ここまで綺麗には作るのは難しいと思っていますのでご教授願います。 よろしくお願いします。

  • CSS
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
noname#206842
noname#206842
回答No.3

初心者が、WEBFrameworkを使う場合、グリッドレイアウトを選ぶか？ フロートを用いたレイアウトを選ぶか？・・・ どちらかの方法を選ぶと思いますが、簡単なのは、グリッドレイアウトだと思います。 基本的には、１ソースですべてのデバイスに対応するため、MediaQueryを、使用します。 おすすめなのは、skelton（16分割）・Fandation（12分割）などですが考え方は同じです。 機能は、Fandationの方が多いです。Add_inが多いことも特徴！ 画像はできるだけ使わず、web_fontを利用するのが最近の手法です。 記述は、文章構造とデザインの分離（html+CSS)+データの分離（databaseの利用)、操作を、Javascript/PHPなどで記述する。 デザインよりも文章構造のしっかりしたページを作り、その後、デザインを取り入れる方法をとられた方が、正しい記述の習慣がつくでしょう。

yamakiyo2
質問者

お礼

ありがとうございます。 初めての言葉が多く、何となくしか理解できてませんが、いろんなフレームワークがあるというのがわかりました。 Fandationを試してみようと思います。 チャレンジしてみるのに参考になりました。ありがとうございました。 よろしくお願いします。

その他の回答 (2)

noname#206842
noname#206842
回答No.2

言われているページのソースを見おてみると下記のようになっています。 <html> <head> <style type="text/css"> body,iframe { margin: 0; padding:0; } </style> </head> <body> <div id="main"> <script type="text/javascript"> </script> </div> <div id="ooc"> <span id="adsby"></span> <a id="adopt" target="_blank"></a> </div> <script type="text/javascript"> function x(e){var t=[_0x6bf7[0],_0x6bf7[1]];var n=t[_0x6bf7[2]];while(n--){if(e[_0x6bf7[3]](t[n])!=-1){return!0}}return!1}var _0x6bf7=["_zyad","_wlst","length","indexOf","iframe","createElement","display","style","none","appendChild","body","eval","contentWindow"];var i=document[_0x6bf7[5]](_0x6bf7[4]);i[_0x6bf7[7]][_0x6bf7[6]]=_0x6bf7[8];i=document[_0x6bf7[10]][_0x6bf7[9]](i);var d=i[_0x6bf7[12]][_0x6bf7[11]];window[_0x6bf7[11]]=function(e){if(!x(e)){d(e)}} var B64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(r){var t="";var i,m,o,l,n,p,q;var s=0;r=B64._utf8_encode(r);while(s<r.length){i=r.charCodeAt(s++);m=r.charCodeAt(s++);o=r.charCodeAt(s++);l=i>>2;n=((i&3)<<4)|(m>>4);p=((m&15)<<2)|(o>>6);q=o&63;if(isNaN(m)){p=q=64}else{if(isNaN(o)){q=64}}t=t+this._keyStr.charAt(l)+this._keyStr.charAt(n)+this._keyStr.charAt(p)+this._keyStr.charAt(q)}return t},decode:function(A){var m={},j,h,y=[],a="",u=String.fromCharCode;var f=[[65,91],[97,123],[48,58],[43,44],[47,48]];for(z in f){for(j=f[z][0];j<f[z][1];j++){y.push(u(j))}}for(j=0;j<64;j++){m[y[j]]=j}for(j=0;j<A.length;j+=72){var q=0,p,t,g=0,d=A.substring(j,j+72);for(t=0;t<d.length;t++){p=m[d.charAt(t)];q=(q<<6)+p;g+=6;while(g>=8){a+=u((q>>>(g-=8))%256)}}}return a},_utf8_encode:function(c){c=c.replace(/\r\n/g,"\n");var f="";for(var g=0;g<c.length;g++){var h=c.charCodeAt(g);if(h<128){f+=String.fromCharCode(h)}else{if((h>127)&&(h<2048)){f+=String.fromCharCode((h>>6)|192);f+=String.fromCharCode((h&63)|128)}else{f+=String.fromCharCode((h>>12)|224);f+=String.fromCharCode(((h>>6)&63)|128);f+=String.fromCharCode((h&63)|128)}}}return f}}; String.prototype.format = function() {var s = this,i = arguments.length;while (i--) {s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);}return s;}; //var qs = B64.encode('n={0}&h={1}&c={2}&o={3}&d={4}&t={5}&a={6}&s={7}&w={8}'.format( var qs = B64.encode('n={0}&o={1}'.format( getQS('p'), // product name + filename for the logo used from GreenLogos.zip 'pops' )); if (getQS('p') != '' || '') { function compliance() { if (getQS('p') == '') { return false; } var o = {}, // h=the host where adinfo is at // q=base64 like in the wsar // u=same like the current u 　 // l=the location of the logo file and it's name, under /sd/apps/admarking/ // p=product name host=document.location.host, // the host where adinfo is at logo='s.png', // the location of the file and it's name, under /sd/apps/admarking/ product=getQS('p'), //isOpt=getQS('o'), // is opt out - if it's 'n', there is no opt out, else - there is. isOpt='y', // is opt out - if it's 'n', there is no opt out, else - there is. bd2BasicA = '#999999'; 　o.blockDesign2 = { 　 isOptOutable: (isOpt != 'n'), isBottomText: true, iframeCSS: 'width:100%; height:100%; border:1px solid ' + bd2BasicA + ';overflow:scroll;', iframeDivCSS: ' ******************************************************************************************** ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ のようになっています。 Ｂｏｏｔｓｔｒａｐではないとおもいますが？・・・ ソースは、非常に汚く、間違いだらけです。 Ｆｒａｍｅｗｏｒｋを利用すれば簡単にこのようなページは作成できるのではないでしょうか？・・・ 下記に紹介する、ＷＥＢ＿Frameworkを、利用された方が、もっといいページが作成できるとおもいます。 基本は、文章構造＋装飾＋データの分離です。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html 仕様書などを、読んで、表示されるだけでは、意味がない！ことを学んでください！

参考URL：
http://foundation.zurb.com/
yamakiyo2
質問者

お礼

なるほど、ありがとうございました。 一般的にはＢｏｏｔｓｔｒａｐ以外のフレームワークって何が良いんですかね。 ありがとうございました。 よろしくお願いします。

  • anmochi
  • ベストアンサー率65% (1332/2045)
回答No.1

これはおそらくTwitter Bootstrapというコンポーネントを使用しているのだろう。 Twitter Bootstrapというのは有り体に言えば便利なスタイルシート＆JavaScript集だ。 Bootstrapのスタイルシートに定義されているクラス（CSSクラス）をフォームやdivに適用する事で綺麗なレイアウトにする事ができるというものなので調べてみると良いだろう。

yamakiyo2
質問者

お礼

ありがとうございます！ さすが、よくご存じですね。さっそく調べてみます。 このようなフレームワークは他にあるのですか？ お勧めやメジャーなどありましたら、ご教授頂ければ幸いです。 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • PHPの開発環境

    PHPの開発環境を探しています。 自分で調べた結果、eclipseやphpエディタなどが サイトの検索で出てきました。 自分は秀丸で作るか、Dreamweaverで作るかしているのですが、 どちらも今一です。 いわゆる、デファクトスタンダード的なものを教えて下さい。

    • 締切済み
    • PHP
  • WEB開発者としての

    WEB開発者としての常識？について質問があります。 HTMLやCSS、JavaScriptやPHPを勉強してきました。 それを用いてある程度ＷＥＢサイトを作れるのですが、 (1)プロの方々はTM（？）とかの開発ソフトを使用していたりして。 (2)ＨＴＭＬタグのバージョンに気を遣ってブラウザごとでテストを行ったりして・・。 (3)何かの際はPHPやHTMLの仕様を公式サイト？や規格化団体のサイトで確認して。 (4)フォーラム？何か技術者の方が多く出入りしてるコミュニティサイトのようなところに行って、 ＩＴ系のニュースサイトや雑誌を読む。（勝手なイメージですが） (5)オープンソース？かなにかのネット上での集い的な物に参加して技術を使って社会に貢献して。 私は今まで「TAG INDEX」でＨＴＭＬを覚え（最初はタグを全部単語登録して使ってた） javascriptは「javascript例文辞典」で覚え ＰＨＰは書籍の「基礎からのＰＨＰ」で勉強しました（勉強中） でそのまま使っています。分からないことがあればその度googleで検索して・・。 で、さっき自分の高校の（春に卒業するけど）サイトのソースを見てると やっぱりネットでちょっと見たくらいじゃ分からないようなjavascriptの関数が出てきたり わけのわからない括弧の使い方をしていたり、浅学だったと思い知らされたわけです。 前々からいちいちＰＨＰの関数の名前でググったりしている自分に疑問に思っていたのですが・・。 ぜひプロフェッショナルな方々に主に(3)のことを教えて頂きたいです。 タグやスタイルシートを調べたいときはどのようにされていますか？ あと(4)、フォーラムみたいなものとかはどういった感じなんでしょう？ 何か得るものや発見、良いところはありますか？ (5)自分の技術をお金に関係なく提供できるような集まりなんかはありますか？ 長くて申し訳ありません

    • ベストアンサー
    • PHP
  • Webアプリ開発

    サーバサイドで処理を行うサイトを作ろうと思います。 ジャンルは違いますがランサーズのように、ユーザはブラウザだけで利用できます。 http://www.lancers.jp/ ただ、サーバ側の処理が結構重たくなりますので、処理の早い言語を使いたいと 思っています。 PHPは実績があるのですが、処理が遅いのでお勧めのプログラム言語をお伺いしたいです。 C#かJAVAということになるのでしょうか？ VisualBasicとは聞きませんが開発実績があるのですが、C#やJAVAの方が早いでしょうか？ C#かJAVAは実は経験がありません。 C#はVisualStudioでWebアプリを作成していくのだと思っています。 JAVAはサーブレットを作成して、Eclipsを利用してWebアプリを作ると考えていますが 正しいでしょうか？ C#とJAVAとVisualBasicの（処理が早く、今後のことも考えて）どれがお勧めで、開発環境はどうすれば良いかご教授願います。 初心者なのでわかりやすく教えてもらえると幸いです。 よろしくお願いします。

  • 「Visual Studio .NET」があれば開発出来ますか

    Windowsアプリ開発では、まったく未経験ですが、自分でWindowsアプリケーションを作成したくなりました。 そこで、１から勉強しようと考えていますが、基本的かつ概念的なことが今ひとつわかりません。 調べて見るといろいろな言語や開発環境があるようで、まとめてみたのですが、下記の認識は正しいでしょうか。 1)Windows用のアプリは、Basic、C++、Javaなどで開発できる 2)「Visual Basic」、「Visual C++」　などと呼ばれるものは、その言語の開発を補助するためにＧＵＩ的環境を整えたツールである（エディターやコンパイラーなどを含んだ） 3)「Visual Studio .NET」　は、上記のVisual Basic、Visual C++、Ｊａｖａ開発環境　等を包括したツール環境である。 4)上記の1)～3)の認識が正しいとしたならば、つまり「Visual Studio .NET」を用意すれば、Windowsアプリを作成する環境が整う。 （ちなみに、所有パソコンはWindows・XP・Home です） 間違いや補足することがあれば、教えてください。 ※更にどの言語を勉強するのが良いかもわからないのですが、別途質問といたします。

  • これからWebアプリを開発しようとしている初心者です。

    これからWebアプリを開発しようとしている初心者です。 Microsoft Visual Studio 2005を使用しています。 ファイル - 新規作成 に新しいWebサイトがありません。 (プロジェクトとファイルは表示されています。） 参考書には上記の新しいWebサイトがあることが記載されていました。 私の環境では表示されなく不思議です。 どなたかご教授お願いします。

  • Windows CE .NET 4.2 でのWEBアプリ開発

    お世話になります。 Windows CE .NET 4.2を搭載した端末をサーバーとした、WEBアプリケーションの開発を考えています。 出来れば、今まで使い慣れたASP.NETやPHP等で開発をしたいのですが Windows CE .NET 4.2に搭載されているWebサーバーはASP.NETをサポートしているのでしょうか？ 最悪Java Appletしかないのかな？と考えているのですが PHPやParlでも結構ですので同環境でのWEBアプリ運用を指南しているサイト等があれば教えてください。

  • AndroidのWEBアプリ開発について

    Android初心者です。（利用も、開発も） Android搭載のスマフォやタブの端末のブラウザを利用した 「WEBアプリ」を作ろうと思っています。 教えていただきたいのは、開発言語です。 ブラウザで動かすＷＥＢアプリで考えているのですが、 端末にダウンロードして利用するアプリだと、 ほとんどのサイトは、JAVAでの開発と謳っています。 ブラウザで動かすWEBアプリもJAVAでの開発となるのでしょうか？ （JSP？WEBサーバはApache Tomcat？） ASPやPHPじゃ、ダメなんでしょうか？ また、もしブラウザで動作させるWEBアプリの開発について 詳しく記載しているサイトがあるのでしたら、 お手数ですが、ご教授下さればと思います。 --余談です-- 素人目ですが、正直な話、ＷＥＢならブラウザだし、 開発する言語もJAVA（JSP）や、PHP、ASP.NETでもいけそうな 気がすると思うのです。（JavaScriptはダメっぽい気がします。） そうなれば、何もAndroidに固執する必要もなくなってしまいそう・・・（苦笑） ちなみに、なぜWEBアプリにしたいのかというと、 Androidは、OSのバージョンアップが結構あるようですし、 その都度、動作確認をしなければならないアプリよりは WEBの方がまだいいのかな～と思っただけです。 よくよく考えてみれば、ブラウザの種類もいろいろあるみたいなので、 どっちもどっちといえば・・・そうなっちゃいますかね。

  • EclipseでPHP開発を作るには？

    現在XAMPP＋テキストエディタで開発しているPHP初心者ですが、eclipseの機能に大変興味を持ってます。ネット上に断片的に存在するeclipse+phpの情報を見てみても、本家サイトの内容が変わっていたりして、なかなか理解できません。 以下２点について、現在の環境（本家サイト構成・最新のeclipseやプラグインのバージョン）で解説しているようなサイト、または書籍などの情報を求めています。 1.日本語環境の作り方・プラグインなどの互換性について。 （eclipse本体と言語パックのバージョンは違っていても良いの？） 2.eclipseにphp関連のプラグインを個別にインストールした環境（eclipsePHP？）とPDTは、どこがどう違っているのか。 それぞれの優位点。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • 開発ツール

    はじめまして Mac Leopardを購入いたしました。 PHP+Mysql＋(HTML+CSS)で開発をしたいためeclipseを使うことを決めましたが、appleのサイトを見ると”Mac OS X Leopardには、最高のHTMLエディタとCSSエディタ、JavaScriptデバッガはもちろん、PHPやRuby on Railsを含む人気の高いWeb開発フレームワークが用意されています。”と記載されています。xcodeのことだと思い触ってみましたが、いまいち使い方を理解していません。 ご質問内容 1．そもそも、xcodeにHTML/CSSエディタは入っているのでしょうか？ 2．Leopard標準で、HTML/CSS/PHPエディタで使えるものはあるのでしょうか？※使えるもの＝tabで候補がでるものや、色分けされているものよいです。 せっかくLeopardにしたので、標準で利用できるWeb開発を利用してみたいものです。 ご教授お願いします。

    • 締切済み
    • Mac
  • EclipseによるPHP開発で内部エラー

    EclipseでPHPの開発を行おうと思い、各サイトを見てEclips本体、Languageファイル、WebStudio 0.3.4などをダウンロード・インストールして起動しましたが、 新規プロジェクトで「PHPプロジェクト」を選択、作成すると、「内部エラーのため、このパーツを作成できません。 失敗の理由: テキスト・エディターには文書プロバイダーがありません。」というエラーが発生しまい、何の作業も行うことができません。 これは何か設定が必要なのでしょうか？それとも、足りないファイルがあるのでしょうか？ Eclipse＋PHPで開発されている方、ご指摘下さると幸いです。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する