タグ

web制作に関するlen1010のブックマーク (30)

  • CSSで要素を左寄せ・中央寄せ・右寄せする方法

    CSSにおいて、標準では左寄せや左揃いが適用されています。しかし、デザインに合わせて要素を中央寄せや右寄せにしたいことがあると思います。 そこで、今回はCSSで要素を左寄せ・中央寄せ・右寄せする方法を紹介します。

  • HTML+CSS主体のJavaScriptエフェクト! 簡単で「使える」jQueryテクニック(解説つき)

    4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課(めか)でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType(ブログ構築ツール)での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript(以下 JS)プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer

    len1010
    len1010 2013/12/22
    トグルデザイン
  • FINDJOB!終了のお知らせ | FINDJOB!

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    FINDJOB!終了のお知らせ | FINDJOB!
    len1010
    len1010 2013/12/22
    色の考え方
  • http://handywebdesign.net/2013/12/slide-share-about-color/

    http://handywebdesign.net/2013/12/slide-share-about-color/
  • デザイン作業のスピードアップ

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。

    デザイン作業のスピードアップ
  • 制作案件に使えば注目度アップ!CSS3を使った驚きのアニメーション表現

    一般的なサイト制作案件では、過度なアニメーション... / CSS3を使ったアニメーション表現 / Simple Icon Hover Effect...他...全10件 一般的なサイト制作案件では、過度なアニメーションを求められることは少ないですが、上手に取り入れることで利用者の心をグッとつかむことができます。どうせ作るなら、ユーザーの印象に残り、かつクライアントの目的を達成できるサイトに仕上げたいものです。 そんな、これからの制作案件にも採用できそうな、ちょっと目を引く表現方法を集めました。

    制作案件に使えば注目度アップ!CSS3を使った驚きのアニメーション表現
  • HTML5とは何かを簡単にまとめてみた

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R&D統括部 制作部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた

    HTML5とは何かを簡単にまとめてみた
  • こんなに高性能なのに商用でも無料利用できるEコマース用WordPressテーマファイル -Velvet Sky

    Eコマースサイトでよく利用される機能を備えたWordPress用のテーマファイルとPrestashop用のテーマファイルを紹介します。 Free Prestashop and WordPress E-Commerce Theme: Velvet Sky [ad#ad-2] すぐにEコマースサイトができてしまいそうなテーマファイルですが、利用するにあたっての一番のポイントは日語化でしょうか。 デザインをはじめ、機能も便利なものが揃っているので、勉強目的にも役立つと思います Velvet Skyの主な特徴 Velvet Skyの対応ブラウザ Velvet Skyのデモ Velvet Skyのライセンス Velvet Skyの主な特徴 WordPress 3.1+対応 Prestashop 1.4.2.5対応 カスタムホームページ 水平タイプのメニューとサブメニュー スライドショーモジュール

  • 実例から学ぶ、固定表示されるナビゲーションを賢く使うポイント | コリス

    Netontwerp 正方形のグリッドが特徴的なウェブサイトで、ナビゲーションは真ん中に配置されています。サイトは1ページで構成されており、ナビゲーションのラベルをクリックするとスライドのアニメーションでコンテンツが表示されます。 ナビゲーションは各コンテンツに溶け込むようにデザインされており、こういった使い方は小さいサイトには素晴らしいソリューションとなるでしょう。 Black Estate Vineyard このサイトも1ページで構成されたもので、半透明な背景を使用したナビゲーションが配置されています。各コンテンツは半透明のナビゲーションの後ろにスクロール表示され、ユーザーは迷うことがないでしょう。 半透明の背景を使用する一番の利点は、さまざまなビューポートのサイズでも不具合が生じないことです。

  • [CSS] テキストの文字サイズ・行間確認用

    CSSで行間( line-height )と文字サイズの確認用ツールです。画面右の項目を変更してご利用ください。 このページでは、段落(P要素)まわりのCSSで重要だと思われる文字サイズ、行間、左右マージン、段落間隔(P要素の下マージン)を実際に変更し、確認できます。 CSSでのレイアウトデザインにおいて、最も重要な基事項といえば文字の可読性です。最近ではブログの普及もあって、極端に読みにくいページは少なくなりましたが、WEBを作る人としては押さえておきたいところです。 以下、サンプル文章代わりの雑文です。 海外で小さい文字のサイトってありますよね。でね、そのサイトが妙にイカしたデザインに見えたりだとか。実際、ぱっと見は綺麗です。文字が小さくなるにつれて文章ではなくて模様だとかパターンの塊に見えるためだと思うのですが、そういったサイトの文字サイズを日語に適用するとちょっとまずい。 例え

  • PHP アーカイブ / ウェブデザインライブラリー

    PHPとGDを使ってCAPTCHAを実装する方法 (2008年3月 4日) 自動登録を行うスパム投稿を防ぐ一般的なCAPTCHAを実装する方法を紹介しています。

  • [連載]WordPressでWebサービスを作る方法(1:PHPとは) | Stocker.jp / diary

    このブログでは何度も触れていますが、3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンしました。 このサイトは、WordPress というブログ向けの CMS(コンテンツ管理システム)を使って作りました。 このサービスを作った際の手順をケーススタディとして「PHPWordPressを全く知らない方でも、WordPressWebサービスを作り、それをたくさんの方に利用して頂ける方法を分かりやすく学べる記事を書こう」と思い書き始めたのがこの記事ですが、「PHPとは」から「WordPressサイトにおける内部SEO」「ソーシャルメディアマーケティング」まで網羅する特大記事になり、1記事として一度に掲載することが難しくなったので、全10回の連載としてお送りします。 WordPressPHP初心者の方はぜひ1ページ目からソースコードを書き写しながら、既に

    [連載]WordPressでWebサービスを作る方法(1:PHPとは) | Stocker.jp / diary
  • 今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。

    みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます! 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン(人件費) ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい! なんでどんどん情報をシェアしたいですね! もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信

  • CSSサンプル集 vol.5 ::: Webデザインレシピ

    WebデザインレシピCSSサンプルのページです :D ヘッダーに入れるものがなくなってしまった w ど、ど、ど、どーしよー X( まぁメインのページじゃないからいいことにしよう ... CSSでレイアウトするなら、絶対覚えておきたいブロックレベル要素のクセ :: サンプル集 自分の意図したとおりのデザインを邪魔するのがCSSです w あれ?これってどうやってやるんだっけ?となかなか覚えきれないものをちょっとまとめてみました。 インライン要素についてのあれこれ Sample#1 普通のインライン要素 普通によく使うインライン要素、<a>タグ、<strong>タグに、以下のようなスタイルを指定してみました。 margin : 20px; width : 300px; height : 100px; padding : 20px; border : 1px solid #ccc; backgr

    len1010
    len1010 2011/06/17
    margin,padding学習系、ブロックレベル要素のクセ
  • 「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

    ☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。???(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ

    「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
  • [非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステップ

    こんばんは! 先日の、はてブのホットエントリー PARKN’ PARK さんの 「「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント」に触発されてペンを取った私、坪内が日はお送りします。 形式がほとんど決まっているブログデザインは、トップページと記事ページのデザインさえ固めてしまえば、あとはブログシステムが勝手にカテゴリーページや過去アーカイブページなんか作ってくれるので、 Web サイトを一からデザインする手間に比べれば、あっという間です。 ブログの質はデザインでなく、コンテンツなので、手間を掛けるのであれば、コンテンツに手間を掛けるべきというのは、言わずもがな。 だからといって、デフォルトのテンプレでは味気ないし、似たようなブログとの差別化もしたいと思う気持ちも分かります。でも、Web デザインなんてよく分からないし、カッコイイのが自力でできると思え

    [非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステップ
  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
  • FontPark.com | Download fonts

    FontPark.com was launched in 2008 and has since grown to become the biggest website offering free fonts for download. The goal of FontPark is to provide users with a collection of free and high-quality fonts covering all font styles and categories. The current font database has more than 120,000 fonts available for non-commercial and commercial use for Windows, Mac and Linux.

    len1010
    len1010 2011/06/15
    使えるフォントサイト
  • これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ

    Webデザインをするときにいつも使っている Photoshop ... あまりに高機能なので、ツールパネルだけでもボタンがいっぱい。はじめて Photoshop に触れる人にとってはちょっと難解なインターフェイスかもしれません。Photoshop を始めたばかりの初心者さん向けの、ツールパネルのまとめです。 Webデザインするときに、いつも使っている Photoshop。でも当にはじめて Photoshop を使い始めた人にとっては、Photoshop の画面に並んだ、たくさんあるボタン類からして意味がわからないんだと思います…。そー思ってツールパネルのボタンを端から見ていくと、自分でもコレなんだっけ?っていうのがいくつか …。 実は最近友達が Photoshop を使い始めました。全く Photoshop を使ったことのない彼女に使い方を教えてあげるって約束しちゃったので …。 そんな

  • 初心者さんのためのWebサイト制作に役立つリンク集

    2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください!」との声が多いのですが、日のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください! ↑私が10年以上利用している会計ソフト! Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため?何のため?Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム(Webサイトのレイアウト)を作成 Webサイトの骨組み: ワイヤーフレームを素早く・

    初心者さんのためのWebサイト制作に役立つリンク集