タグ

ブックマーク / gihyo.jp (34)

  • 第9回 パンくずナビゲーション部分を作る | gihyo.jp

    前回の次回予告は「ブログ記事リストテンプレートを完成させよう。」となっていましたが、パンくずナビゲーション部分のボリュームがかなりありますので、今回はその解説を少し詳しく行います。ここで作成するパンくずナビゲーションは、ブログ記事リストテンプレートだけでなく、すべての第二階層用のテンプレートに流用します。 パンくずナビゲーション部分を作る くれま先輩:ということで、今日は「パンくずナビゲーション部分」に集中します!予定を変更してすみません…。第二階層用のテンプレート内で使用する「パンくずナビゲーション」のモジュールを作りましょう! ほげ山くん:あ、はい。じゃ、新規モジュールを作成する画面を開きますね。上部メニューの[デザイン→テンプレート]で、「⁠テンプレートモジュール」の下の「テンプレートモジュールを作成」をクリック。でいいですよね。 くれま先輩:うんうん。じゃあ、タイトルを「パンくずナ

    第9回 パンくずナビゲーション部分を作る | gihyo.jp
  • 第8回 ブログ記事リストテンプレートを使って、カテゴリ別絵本一覧ページを作る | gihyo.jp

    トップページの次は、ブログ記事リストテンプレートをいじっていきましょう。「⁠最新情報」カテゴリとその他のカテゴリで別々の体裁になりますので、カテゴリ名による条件分岐を行うところから始めます。 Movable Type4.23とMotionでましたね! ほげ山くん:先輩、今月もなんですけど、Movable Type 4.23のセキュリティアップデートでましたね! くれま先輩:でましたね(笑⁠)⁠。早速アップデートしておきましょー! 【参考リンク】 [重要]セキュリティアップデート Movable Type 4.23 の提供を開始(MovableType.jp) http://www.movabletype.jp/blog/_movable_type_423.html くれま先輩:で、Motionの告知もでましたね。 【参考リンク】 Movable Type をソーシャルアプリケーションに『M

    第8回 ブログ記事リストテンプレートを使って、カテゴリ別絵本一覧ページを作る | gihyo.jp
  • 第2回 OpacityとRGBa実践テクニック | gihyo.jp

    OpacityプロパティとRGBaプロパティバリューは、どちらも要素に透明度を指定することができるCSS3のプロパティとプロパティバリューです。どちらも透明度を指定し背景が透けさせることが可能なプロパティです。 今回は、OpacityプロパティやRGBaプロパティバリューの実践的テクニックと、それぞれの違いを説明します。OpacityプロパティもRGBaプロパティバリューもイマジネーションを利用する事で効果的な使い方ができます。 OpacityプロパティとRGBaプロパティバリューをサポートしているブラウザ OpacityプロパティとRGBaプロパティバリューをサポートしているブラウザは以下のとおりです。 Opacityプロパティ Firefox 2以上、Safari 2以上、Opera 9以上、IE8以上、Chrome RGBaプロパティバリュー Firefox 3以上、Safari 3

    第2回 OpacityとRGBa実践テクニック | gihyo.jp
    ciqlie
    ciqlie 2008/12/26
  • 第1回 text-shadow実践テクニック | gihyo.jp

    CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。 今回は、CSS3なのですがCSS2.1でもあったtext-shadowプロパティについてフォーカスします。 すでにプロパティの名前から何ができるかは予想がつきます。ただ、"そろそろ何ができるか"ではなく、"どのように使うか"という実践の部分に注目して紹介していきます。 text-shadowプロパティの記述方法 まずは、基text-shadowプロパティの記述方法ですが、以下の形式で値を指定します。 セレクタ { text-shadow: ぼかし色 X方向への距離 Y方向への距離 ぼかしの距離 } ぼかし色 ぼかし色はRGB、色名にて指定が可能。#000はRGBの黒だが、blackでも指定することが可能。ぼかしの色は、text-shadowプロパティの値として一番最初に記述

    第1回 text-shadow実践テクニック | gihyo.jp
    ciqlie
    ciqlie 2008/12/26
  • 第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp

    今回使用する「Dialog」「⁠Draggables」「⁠Droppables」「⁠Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します(

    第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
  • [開店前準備編]STEP1:開店前に購入者になってショップの運営フローを確認しよう | gihyo.jp

    第1回目となる今回は、開店前準備のさらに前段として、実際にネットショッピングを体験する手順について解説します。皆さんも、まずユーザの立場でネットショップの魅力に触れ、ユーザに喜んでいただけるネットショップのオーナーを目指してください。 「購入者の気持ち」を追体験して共感する これからネットショップを開店、開業しようと考えている皆さんに、開業前に、ぜひ試していただきたいことがあります。それは、ご自身が購入者となって、実際にネットショップで買い物をする経験です。この経験を通して購入者の気持ちを追体験しない限り、「⁠購入者のことを常に考える」というネットショップ運営の根幹を理解できないことを実感してほしいと思います。 購入者の気持ちを理解できないと、商品を梱包するとき、購入者の気持ちを無視して「梱包代がかさむからエアークッションの量を減らそう」といった営利第一主義に走ってしまうかもしれません。

    [開店前準備編]STEP1:開店前に購入者になってショップの運営フローを確認しよう | gihyo.jp
    ciqlie
    ciqlie 2008/12/04
  • 第5回 横並びメニューの区切り線をCSSで表現しよう:実践Web Standards Designのススメ|gihyo.jp … 技術評論社

    はじめまして、福島英児と申します。『⁠実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。 『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。 良く見かける横並びメニュー ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。 今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。 図1 画像を使った横並びのナビゲーション(gihyo.jp) gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした

    第5回 横並びメニューの区切り線をCSSで表現しよう:実践Web Standards Designのススメ|gihyo.jp … 技術評論社
    ciqlie
    ciqlie 2008/11/30
  • 第5回 head要素の中身を作る/グローバルナビゲーションを作る | gihyo.jp

    くれま先輩:しかし読者の方から、「Movable Type4.2xでは、『メインページ』と『検索結果』のテンプレートには、あらかじめ変数が設定されているのでは?」というご指摘をいただきました。 そこで確認したところ、「メインページ」テンプレートには「main_index」という変数が、「検索結果」テンプレートには「search_results」という変数が、あらかじめ設定されていました。 【参考URL】 Archive Template Variables | MovableType.org(英語) http://movabletype.org/documentation/designer/ archive-template-variables.html くれま先輩:上記ページには、検索結果テンプレートに「search_template」という変数が設定されていると記述されていますが、実際

    第5回 head要素の中身を作る/グローバルナビゲーションを作る | gihyo.jp
  • 第4回 テンプレートモジュールを読み込ませる/head要素の中身を作る | gihyo.jp

    今回は、前回作成したヘッダ領域のテンプレートモジュールとフッタ領域のグローバルテンプレートを各テンプレートに読み込ませる練習をしたあと、head要素の中身もテンプレートやカテゴリに応じて出力内容を変更させ、グローバルテンプレート化してみます。 Movable Type4.2正式公開されましたね! ほげ山くん:先輩!先日ついに、Movable Type4.2が正式に出荷開始されましたね! くれま先輩:この連載でもずっと紹介して待っていたから、嬉しいね!注意したいのは、4.2出荷後すぐに、カスタムフィールドと優先アーカイブタイプ関連の問題点を修正した4.21が出荷されていること。まだアップデートしていない人は、必ずアップデートしてくださいね! ほげ山くん:僕、個人的に、コミュニティ・ソリューションを使って読者が参加できるブログを作りたいんですよねー。 くれま先輩:mixiのIDを使ってMova

    第4回 テンプレートモジュールを読み込ませる/head要素の中身を作る | gihyo.jp
  • 第3回 コーポレートサイトのヘッダ領域フッタ領域を作ろう | gihyo.jp

    この連載も第3回目となりました。今回からいよいよ、Movable Typeを使用したコーポレートサイトの作成にとりかかっていきます。今回はサイトの全体像や要件を一通り見ていった上で、サンプルのブログ記事を投稿し、ヘッダ領域フッタ領域の作成まで練習してみましょう。 作成するサイトの全体像を確認しよう くれま先輩:じゃ、ほげ山くん、今回私が担当するお客様のサイト制作を手伝ってもらうことで、Movable Typeのカスタマイズについて勉強していってもらいます。よろしくね! ほげ山くん:頑張ります! くれま先輩:まず、今回のお客様について説明するね。絵の出版社「librito(リブリート⁠)⁠」さんという会社で、商品書籍の紹介をメインとした会社サイトを作って欲しいというご依頼なんだ。 図1 絵の出版社「librito(リブリート⁠)⁠」さん ほげ山くん:おぉ!楽しそうな絵がたくさんあります

    第3回 コーポレートサイトのヘッダ領域フッタ領域を作ろう | gihyo.jp
  • 第1回 Movable Type 4.1や4.2では、何ができるの? | gihyo.jp

    連載では、くれま先輩とほげ山くんの2人が、MT4.1を(4.2が正式公開された後は4.2を)使ったサイト制作を行いながら、制作の上で押させておきたいポイントや躓きやすい部分を取り上げ、実際に使えるTipsを紹介していきます。 はじめに 皆さま、はじめまして。フリーランスWebデザイナーの黒野明子と申します。Movable TypeをCMSとして使った企業サイトの構築をメインに、サイトの企画設計・デザイン・コーディングなどを日々行っています。 2007年06月05日にMovable Type 4.0公開ベータテストが開始されてからほぼ1年が経ちました。つい先日の2008年5月30日には4.2リリース候補版 (RC) 1 が発表され、正式公開の時期も近づいています。そんな中、4.0以上で追加されたさまざまな機能を活かして企業サイトを作成している方もいらっしゃいますが、「⁠難しそう!」「⁠テン

    第1回 Movable Type 4.1や4.2では、何ができるの? | gihyo.jp
  • 特集:jquery.jsを読み解く|gihyo.jp … 技術評論社

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    特集:jquery.jsを読み解く|gihyo.jp … 技術評論社
  • 連載:先取り! Twitter使いへの道 AtoZ|gihyo.jp … 技術評論社

    第8回最終回特別企画!アンケート結果発表!~Twitterの「今」を探る~ ふじかわまゆこ(ふうり) 2007-12-28

    連載:先取り! Twitter使いへの道 AtoZ|gihyo.jp … 技術評論社
  • 第11回 スクリプトインジェクションを防ぐ10のTips | gihyo.jp

    前回はスクリプトインジェクションがなくならない理由を紹介しました。それをふまえて今回はスクリプトインジェクションを防ぐ10のTipsを紹介します。 デフォルト文字エンコーディングを指定 php.iniには、PHPが生成した出力の文字エンコーディングをHTTPヘッダで指定するdefault_charsetオプションがあります。文字エンコーディングは必ずHTTPヘッダレベルで指定しなければなりません。しかし、デフォルト設定ではdefault_charsetが空の状態で、アプリケーションで設定しなければ、HTTPヘッダでは文字エンコーディングが指定されない状態になります。 HTTPヘッダで文字エンコーディングを指定しない場合、スクリプトインジェクションに脆弱になる場合あるので、default_charsetには“⁠UTF-8⁠”を指定することをお勧めします。サイトによってはSJIS、EUC-JP

    第11回 スクリプトインジェクションを防ぐ10のTips | gihyo.jp