第2回 グリッドシステムとブレイクポイントを理解する | gihyo.jp
※接頭辞の後にカラム数の数値をつけたものがclass名となる 例を挙げて説明します。デスクトップサイズ（992px～1199px）で2列並び、それ位下の幅では縦に並べたい場合には、並べたい要素のclass名を「col-md-6」とします。 また、デスクトップサイズでは4カラム、タブレットでは6カラムというように複数のclass名を設定することで、条件を重ねがけできます。 例えば、デスクトップサイズで3列並び、タブレットで2列並び、スマホで1列としたい場合には、並べたい要素のclass名に「col-md-4」「col-sm-6」の2つを指定します。 実際にBootstrapを使って確かめる どのような挙動をするかを早く覚えるには触ってみるのが一番です。まずは、CDNでBootstrapを読み込んで試してみましょう。 HTML5でドキュメントを作りhead要素内に、次のコードを記述します。
第5回 Flash側：画像ファイルを読み込む | gihyo.jp
前回、FlashにXMLデータを読み込みました。 今回は、そのXMLから取り出した画像のURLから画像データを読み込み表示します。 おさらい 前回作成したフレームアクションは、次の通りです。 //読み込みオブジェクトの生成 var myLoader:URLLoader = new URLLoader(); //テキストデータという宣言 myLoader.dataFormat=URLLoaderDataFormat.TEXT; //読み込み完了したらonLoaded()を実行 myLoader.addEventListener(Event.COMPLETE,onLoaded); //読み込み完了時に実行される関数 function onLoaded(e:Event):void { //XMLデータとして読み込んだテキストデータをパース var myXML:XML=new XML(e.targ
第21回 jQueryでAJAX入門：Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み | gihyo.jp
Google AJAX Feed APIを使って取得したデータをjQueryを使ってページ内に表示させる 以上をふまえて、第18回で作成したサンプルデータを書き換えてみましょう。 $.ajax()で取得していた部分をfeed.load()に置き換えてその後の処理もGoogle AJAX Feed APIにあわせて書き換えています。 // Feed APIのロード google.load('feeds', '1'); jQuery(function($){ // ロードしたRSSを表示するブロック var rssBlock = $('#rss').append('<ul/>'); // Feedインスタンスの生成 var feed = new google.feeds.Feed('http://rss.rssad.jp/rss/gihyo/design/feed/rss2'); // Fee
第13回 フルスクリーンで背景画像を表示するには | gihyo.jp
Webでも裁ち落としでインパクトを出せる DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。 現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。 今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いや
NORIのFlashユーザのためのMovable Type講座 gihyo.jp版 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック 記事一覧 | gihyo.jp
第6回完成したサイトを「テーマ」として保存しよう！ 高橋真弓（たかはしまゆみ） 2010-08-30 第5回カスタムフィールドを使って、商品紹介のカタログページを一番簡単な方法で作ってみる 高橋真弓（たかはしまゆみ） 2010-08-16
第1回 WordPressの基本的な5つのルール（その1：ルーティング） | gihyo.jp
WordPressは世界で最も普及しているCMSですが、2.8以降からは徐々にCMSの殻を破り、様々な機能を提供する総合的なプラットフォームへと進化し始めています。本連載は、WordPressをソリューションとしたWeb制作の現場において必要な、また助けとなる知識やノウハウをご紹介していきます。 第1回目となる今回からは数回にわたって“最低限理解しておくべきWordPressの基本的な5つのルール”についてご紹介します。 ルールはそれぞれ“ルーティング”“デバッグモード”“フックとフィルタ”“キャパビリティ”“データベース”といずれもWordPressの中核をなすものです。これらのルールを理解することで、より高度で複雑な要件にも対応することができ、Web制作そのものを WordPressでマネージメントすることも不可能ではなくなります。 リクエストを処理するルーティ
第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
第1回 PCサイトと携帯サイトの違いを知る | gihyo.jp
携帯サイト開発で考慮すること PCサイトの作成経験者が初めて携帯サイトを作るときには、どのような所に違いがあるのかをまず認識しなければなりません。PCサイトの場合ブラウザの数も限られており、またそれぞれの動作も大きくは異なりませんが、携帯サイトではキャリアはもちろん機種ごとにも動きが変わってきてしまいます。そして携帯サイトはPCと違い、ブラウザのバージョンアップができません。そのため広く使ってもらうサイトを作るには古い機種にも対応しなければならず、多種多様な仕様の端末を想定して開発をしていく必要があります。そのため開発の前にどのような点に気をつけなければならないかをきちんと認識しておく必要があります。 携帯サイトの開発において、最初のポイントは「携帯端末で画面を正しく表示すること」です。PCサイトと同じように携帯サイトを作成すると、画像が表示されなかったり、画面レイアウトが崩れたりといった
2010年1月第2週号 1位は、ブラウザ上でのモックアップ作成のススメ、気になるネタは、Google Nexus One（ネクサス・ワン）ついに発表 | gihyo.jp
週刊Webテク通信 2010年1月第2週号1位は、ブラウザ上でのモックアップ作成のススメ、気になるネタは、Google Nexus One（ネクサス・ワン）ついに発表 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年1月4日～2010年1月10日の間に見つけた記事のベスト5です。 1. 12 Killer Tips for Designing in the Browser | Design Shackhttp://designshack.co.uk/articles/css/12-killer-tips-for-designing-in-the-browser Photoshopなどを使って画像でWebページのラフを作るのではなく、最初のモックアップの段階からHTMLとCSSで作る
2009年12月第2週号 1位は、ミニマルなWebレイアウトを作るために必要なこと、気になるネタは、絶対に覚えたい iPhone＋Google音声検索・10の技 | gihyo.jp
週刊Webテク通信 2009年12月第2週号1位は、ミニマルなWebレイアウトを作るために必要なこと、気になるネタは、絶対に覚えたい iPhone＋Google音声検索・10の技 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年12月7日～12月13日の間に見つけた記事のベスト5です。 1. How to project a minimalist layout? attention to the details | Your Inspiration Webhttp://www.yourinspirationweb.com/en/how-to-project-a-minimalist-layout-attention-to-the-details/ ミニマルなWebレイアウトを作るた
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第8回 タブプラグインを作ってみよう（後編） ｜gihyo.jp … 技術評論社
前回つくったタブパネルスクリプトをもとにして、タブプラグインを作ってみましょう。プラグインを作る、というと何か難しいことのように聞こえるかもしれません。前回作ったタブパネルスクリプトのように、なにも難しいことはありません。まずはプラグインについて少し考えてみましょう。 jQueryプラグインについて 前回の始めに言及したように、プラグインとは、既に完成しているJavaScriptファイルを読み込み、実行するだけで簡単に利用できるものを指すことにします。 例えば、jQueryプラグインは通常以下のようにして実行できるようになっていると思います。 プラグイン（メソッド）の実行 jQuery(function(){ $('div.tabArea').tabPanel(); // 対象のjQueryオブジェトに対してメソッドを実行する }); $('div.tabArea')に対して、tabPan
jQueryではじめるAjax：第2回 jQueryによるAjax実装｜gihyo.jp … 技術評論社
第1回ではJSONPによるAjax実装を取り上げましたが、今回はそこで使ったJSONという表記法と、JSONPというAjax実装手法について解説します。また、jQueryによる簡単なAjaxの実装についても解説します。 JSONってなに？ JSONとは、JavaScript Object Notationの略称です。ECMAScript言語 ECMA-262をベースに作られた、Javascriptオブジェクトの表記法のサブセットです。 JSONは、名前と値のペア、および、順序付きの値という2つのシンプルな構造に基づいて、構造化データを簡潔に表現することができます。 オブジェクト（名前と値のペアの集まり） JSONでオブジェクトを表現するには、メンバを「{」と「}」で囲みます。複数のメンバは「,」で区切られます。例えば、名前が「color」、値が「green」というメンバを持つオブジェク
第1回 CLARIFYING OBJECTIVES「ウェブサイトの目的と目標を定める」 | gihyo.jp
はじめに／正しいウェブデザインとは ウェブデザインは大変自由な業種である。日々進歩する技術や新しいクリエイティブにあふれ、「正しい」という言葉はあまり似合わない。しかし自由で、インタラクティブなインフラを活用するウェブデザインだからこそ、クリエイティブなアイディア以前に考えなければならない点がたくさん存在する。無論ウェ ブだけでなく、いかなるデザインにおいても目的を達成するためのロジックの積み上げやリサーチは必要であり、構築的なプロセスは存在する。 では、「正しい」ウェブデザインとはどのようなプロセスだろうか？ この連載を通じて筆者はウェブデザインの「正しい」プロセスを見出してみたい。ウェブデザインという仕事に関わるクリエイティブ・ディレクター、アート・ディレクター、デザイナーの視点から、ウェブデザインに必要なロジックを導き出そう。 まずは「手法」ではなく「目的」を なぜウェブサイトを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
