2013年総まとめ：ウェブ制作に役立つエントリーBest 20
2013年、当サイトのウェブ制作に役立つエントリーBest 20の紹介です。 去年までは、はてブ数が多かったエントリーをピックアップしていましたが、今年はPocketからのアクセスが多いものにしました。 コリス 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed FeedBurner経由の方は、変更をお願いします！ [ad#ad-2] 2013年、Pocketからのアクセスが多かったエントリー 2014年用、漢字も揃っている日本語のフリーフォントのまとめ -商用サイトだけでなく同人誌などでの利用も明記 一つのカラーから配色セオリーに基づいてカラースキームを作りだす配色設計に役立つツールのまとめ Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり ウェ
Webデザインを勉強する時に参考にしたいまとめサイト・記事25選
Webデザインを勉強する時に参考にしたいまとめサイト・記事25選 Webデザインやホームページ作成を勉強したい人向けに、参考になるまとめサイト・記事・小技テクニックを集めてみました。「Webデザインの見本サイト」や「今すぐ使えるテクニック」など、初心者がすぐに参考になるサイトばかりです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ | らふらく ^^
最近、スマホの普及と共に、プログラミングを学習したい人が増えてきているようです。 私の周りでも、プログラミングに興味があり、webサービスをつくってみたいという人が大勢います。 ということで、プログラミングをやった事がない人（または初級者）のために、 プログラミングで何を学べばいいか、 どうやって勉強したらいいかというノウハウを紹介したいと思います。 何を学ぶべきか プログラミングにはいろんな言語があるため、どの言語をやればいいかわからないという声を耳にします。 そこで、初級者でも学びやすい言語を厳選し紹介したいと思います。 1. 何はともあれ「HTML」 こちらは、Webサービスをつくる上で書かせない言語で、 今見ているページ（見た目の部分）はすべてHTMLで書かれています。 HTMLを学ぶ上では以下のサイトが参考になります。 HTMLの基本 HTML入門 ドットインスト
Webフォントが楽しい！Webフォントの探し方と使い方・設置の仕方などなど。
ブログに関して技術的なことはかっらきしわからない（からっきしなんて言葉はじめて使った） 私ですが、ちょっと Webフォント なるものに挑戦してみました。 ここ最近ずっと、日本語のフォントに中国語風の『Heiti SC』というのを使っていたんですが、ちょくちょく「文字化けですか？」「見辛い」「気持ち悪い」「調子に乗っている」などなど言われていたので、フォントの変更に踏み切ってみました…(,,-_-) ただ、Mac は ともかく、iOS で表示できる日本語フォントってほとんどないんですよね…。たぶん… おそらく、『ヒラギノ角ゴシック』か、前述の『Heiti SC』しかないような気がします。他にもあるのかな…｡:ﾟ(;´∩`;)ﾟ:｡ 『Heiti SC』は漢字が中華風になっちゃいますしね… 実際は『ヒラギノ角ゴシック』のみと言っても過言ではないですよね…。 『Heiti SC』の ひらがな部分
SEOキーワード選定法~検索エンジン上位表示に絶対必要な５ステップ~
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. SEOキーワードの選定と言うと、ほとんどの方が、漠然と月間の検索数のみを調べているのではないだろうか？ しかし、効率的にSEO対策を実施するためには、それだけでは足りない。 SEOで最速で最大の成果を出すためには、以下の５つのステップが必要だ。 効果的なSEOキーワードのリストアップ検索数リサーチライバルサイトの詳細のリサーチ対策するキーワードの順番検索エンジンにも読者にも高評価されるコンテンツアイデア逆に言うと、それさえ、しっかりとこなして、ある程度経験を積めば、狙い通りに検索エンジンを攻略できるようになる。本日は、そのために、『鉄板のSEOキーワード選定法~検索の上位表示に絶対必要な５ステップ~』をステップ・バイ・ステップでご紹介する
スクロールすると左右から画像が集まってくるWebデザインのNizoっぽいやつをjQueryで作る
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト？って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
CNET Japan
人気の記事 1中国製スパイチップは「証拠なし」--Super Microが調査結果を発表 2018年12月12日 2AI画像認識の「Googleレンズ」、iOS版Googleアプリにも搭載 2018年12月12日 3ファーウェイCFOの保釈決定--保釈金は8.5億円 2018年12月12日 4無料アプリの代償か--利用者の位置情報データをマーケターに販売する米企業の実態 2018年12月12日 5スマホ決済「PayPay」をビックカメラで使ってみた--還元額や使い勝手は 2018年12月04日 6未来の折りたたみスマホに--「曲がる」極薄ガラスの限界に挑むコーニング 2018年12月12日 7グーグル「Pixel Slate」を使ってみて--長所と短所、「iPad Pro」との比較など 2018年12月10日 8乗車料金が“タダ”になるDeNAの「０円タクシー」に乗ってみた 2018年12
アフィリエイトで稼ぎたい人が、まずは読むべきエントリー24選 : マネーハック ～投資から節約術までマネー情報の総合サイト～
アフィリエイトで稼ぎたい人が、まずは読むべきエントリー24選 カテゴリアフィリエイト鈴木 アフィリエイトで稼ぎたい・・・と、少しでも思っている方は必見。 アフィリエイト成功者による体験談の暴露から、悪い例の見本まで。 ネット上では知識こそお金なので、 まずは読んでみてくださいね！ アフィリエイト簡単すぎワロタｗｗｗｗｗｗｗｗｗ : あじゃじゃしたーはてなブックマーク - アフィリエイト簡単すぎワロタｗｗｗｗｗｗｗｗｗ : あじゃじゃしたー 急に金持ちになったんだが、質問ある？ - まめ速はてなブックマーク - 急に金持ちになったんだが、質問ある？ - まめ速 アフィリエイトだけで生活してるけど質問ある？ : ガラパゴス速報はてなブックマーク - アフィリエイトだけで生活してるけど質問ある？ : ガラパゴス速報 アフィリエイトで月30万円以上稼ぎたい方向けの見せ方テクニックはてなブック
デザインでテクスチャを効果的に使う5つの実用的なテクニック
5 Awesome Techniques for Using Textures in Your Designs [ad#ad-2] 下記は各ポイントを意訳したものです。 背景としてのテクスチャ オーバーレイとしてのテクスチャ モックアップのためのテクスチャ イラストのためのテクスチャ テクスチャをテキストに当てはめる 背景としてのテクスチャ テクスチャを効果的に使うポイントの一つは、繊細です。テクスチャを使用する際は基本的には、コンテンツから気を散らさないようにします。 例をみてみましょう。ここにシンプルなアートワークがあります。 このテクスチャは釣り合いがとれていません。コンテンツから気を散らせ、カラーもマッチしていません。 このアートワークにマッチするようにテクスチャを変更します。 テクスチャのサイズを縮小し、カラーを調整し、微妙なグラデーションを適用しました。 背景としてのテクスチャ
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
第1回 プレゼンスを高めるにはサイトのセマンティック化が必要
ソーシャルネットワーキングサービスなどを使ってソーシャルメディアにWebサイトの情報を流すのが当たり前になってきています。ところが、そこで流れている情報は必ずしも読みたくなる情報や発信者の伝えたい情報ではないことが多々あります。これは、Webサイトの情報をソーシャルメディアに正しく伝えていないことが原因です。ソーシャルメディアに情報を伝えるための、標準仕様がいくつか登場しています。これらを駆使して、Webサイトの情報を正しくソーシャルメディア上で共有しましょう。 2011年はソーシャルメディアがインターネット業界を超えて語られるようになった最初の年になりました。Twitter、Facebook、mixiといったソーシャルネットワーキングサービス（SNS）に加えて、グーグルもGoogle+を公開してSNSに本格参入してきたことで、主要プレーヤーが出揃ったと言えるでしょう。Webサイトのオーナ
Happy-Go-Lucky: [iPhone] hiro45jp さんの AppHtml を Webアプリにしたよ！
@toshiya240 より @hiro45jp さんに敬意を込めて。 私は昨年からブロガー向けのソフトウェアを作るようになりました。 きっかけは AppHtml です。 アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 ここから始まった そして、私は Mac のサービスメニューから AppHtml を呼び出せるようにしました。 Happy-Go-Lucky: [Mac] どこからでも AppHtml を呼び出す - サービスメニュー版を作ってみたよ♪ MarsEdit などのブログエディタで記事を書いているときに Web ブラウザが起動していないこともありますよね。そんなときに AppHtml を使いたくなりました。でも、わざわざブラウザを起動するのは面倒です。 ということで、Bookmarklet をサービスメニューとして実装(移植
![Happy-Go-Lucky: [iPhone] hiro45jp さんの AppHtml を Webアプリにしたよ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/c8d0c7efe6ea5d6fea96130d4c816977308a4db0/height=288;version=1;width=512/http%3A%2F%2Fwww.gravatar.com%2Favatar%2F1defc346744650a5d07edf83b705806f%3Fs%3D200){kind=avatar}
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブやらアイコンフォントやらフラットやら！2013年の気になる技術やデザインを試してみたリニューアル手順！ | バンクーバーのうぇぶ屋
