サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
wsoccer.hatenablog.jp
2015-10-17 デザイナーと呼ばれて、お金をもらって、で？ デザイナーと呼ばれた。もちろん呼ばれるだけならそりゃ、「億万長者！」、「日本一の男前！」だってありえるわけだけれど、ちゃんとデザインをした上で対価、つまりお金を受け取った。 仕事としてであることとすること的なことに関してずっと考えてきた身としては、今回そう呼ばれたことは少し感慨深い。何かが一歩進んだ感じがする。ただそれは、キャリアとしてでなく、あくまで「エスタブリッシュすること」というものについての思考が次のフェーズに進んだというだけのことにすぎないのだと思う。 へぇ、何をやったんだい?そうお思いの方もいるかもしれない。そんなあなたに良いニュース。今回の私の仕事は、選考過程も成果も金額も含めてすべてネットで公開されている。次のページに進んでいただければ、そのすべてを見ることができる。採用されているのが私のアカウントだ。 cr
2015-08-14 「デザイナー」に、何を期待してたと言うんだい? gestaltung 君、随分と東京オリンピックのエンブレムの騒動で躍起になっているみたいだけれど、私に製作中であると前に言っていた展覧会のポスター案件は終わったのかな？君にそんな暇はあったっけ？ 私は、擁護とも取れる記事を書いた。そうだよ、確かに書いたよ。その後パクリとかパクリじゃないとか、新たに問題になったことがあるけれど、私の考えは変わっていない。改めて言う。あれは良い、というか、効果的なんだ。確かに美的にはちょっと、いちゃもんをつけたくなる要素はあるかもしれない。だが、何であれ、あのデザインにはパラリンピックを差別している人々をあぶり出す仕掛けが組み込まれているのだからね。そして、実際に多くの人々が、左側だけのエンブレムを持ち出して語って、パラリンピックなんてどうでもいいと考えていることを無意識に露呈させてしまっ
2015-04-27 Webサイト(ホームページ)を持ちたい方へ。しかも無料で お店や何かしらの団体、活動などをやっていて、ホームページが必要という場面はあると思います。そんな時に、制作会社に頼むと、ピンキリとはいえ、数十万は取られるでしょう。しかし、誰もが金銭的に余裕があるわけではありません。そこで、無料で高品質なウェブサイトを作ることができるサービスをご紹介します。ちなみに、私は数十万で仕事を受ける側の人間です。 ホームページを用意するということを、別の言い方に置き換えると、それはインターネット上での存在を確かにするということになります。第三者が検索して、とりあえず基本的な情報を得られるようにすること、これが大事です。現代では、よくよく考えれば恐ろしいことですが、ネットで存在しなければ現実にも存在しないことと等しくみなす人たちが一定数います。そういう人たちに向けても、やはりネットで存
はじめに 仕事が全然取れないので、次のTOEICで950点くらいとって英語講師に転身しようかな、と考えているファイヤードです。 さて、デザインから実装までを行うウェブサイト制作を売りにして、私は活動し始めたのですが、ウェブサイトは私が作らなくてもいいのでは、と考えるようになりました。前提として、私は今のところ、小中規模の店舗や企業を中心にアプローチしています。 50ドルで買える高品質テーマの衝撃 ThemeForestに並んでいる50ドル前後のテーマやテンプレートを見て、それらよりも良い(同じくらい、じゃダメですよ)デザインのサイトを実装を含めて自信を持って作れるという制作者の人がいたら、手を挙げてくれませんか。もちろんいることでしょう。でも、たとえ作れるという人でも、50ドルというテンプレートのコストに時間対効果で敵うでしょうか。 今、私の手元には『デザイナーのためのプロの制作術が身につ
2015-04-04 有名サイトのフォントまわりのCSS指定状況 gestaltung Typography WebDev 採集方法は、記事詳細ページで本文にインスペクタを当て、そのpタグや包含ブロックに適用されているCSSをまず見て、次にbodyや*まで遡っていくという方法をとった。下記にその採取結果をCSSスニペットとして掲載するが、スタイルのうちフォントに関連しない部分はこちらで勝手に省いた。採取は主に3月下旬に行われた。 大手新聞社 文字を読ませるということならば、まずは新聞社だろうということで採取しに行った。しかし、日頃眺めている中で、デザイン的にあんまり期待できないことはわかっているため、左右バランスよく2社のみ。 朝日新聞 朝日新聞デジタル：朝日新聞社のニュースサイト フォントファミリーの指定なしで、ブラウザのデフォルトフォントに任せている。 #Main #MainInn
2015-07-28 WEBNKO(ウエブンコ)という書店体験のできるサービスを公開しました。 WebDev いちおう完成しましたので、お知らせします。 作ったもの WEBNKO(ウエブンコ)というサイトです。AmazonのAPIと連携しているので、いちおうサービスと名乗れると思います。文庫本の背表紙をただ羅列しており、デスクトップの前で書店にいるような感覚を味わえます。ローンチに伴ったレーベルとして、岩波文庫、ちくま文庫、ちくま学芸文庫を収録しています。これから新書や他の文庫レーベルも扱う予定です。 推奨環境 Google ChromeかSafariでごらんください。対応環境について、詳しくはサイトでも記しています。Windowsユーザーの人は、いますぐMacに切り替えてください。というのは嘘ですが、Windowsだと文字が綺麗に見られません。 その特徴と動機 少しでも本に詳しい人は知っ
2014-10-08 Bootstrapでワンページ(シングルページ)レイアウトする時にスマホ時のグロナビのページ内遷移で広げていたトグルメニューを自動的に閉じるための一行 jQuery WebDev RWD Bootstrap Bootstrapのグローバルナビゲーションは、モバイル時にはデフォルトでは上からするするっと出て来ます。これは、ページ遷移があるときであれば、遷移に伴って勝手に閉じてくれるのですが、シングルページ(ワンページという呼び方で今後統一します)の時には、開きっぱなしになってしまいます。これだと、ユーザーがもういちどあの三本線を押して、自分で閉じなければならないという手間が生じてしまいます。 調べたところ、これを解決するにはたった一行のjQueryコードだけで事足りることが判明しました。 Hide Twitter Bootstrap nav collapse on
2015-04-12 Bootstrapでメディアクエリを書き加える時の指定方法について整理する Bootstrap WebDev max-widthかmin-widthかで、境目の数字が異なるので、そこが混乱の元なんですな。自分でも今日とぼけて間違って指定してしまっていたので、ここに整理しておきます。 参照するのは、Bootstrap公式サイトのCSSのページの中のgrid optionsです。 まず、おさらいも含めて、Bootstrapがどのように指定しているのかを見ます。だいたい次のようなかたちです。 @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200
2014-10-21 Bootstrapのカラム逆転(順序変換)を実装する際に気をつけたいところ Bootstrap RWD タイトルで何を行っているのかよくわからない、という方は、まず例からご覧下さい。参照して欲しいのは、CSS · Bootstrap Grid のなかの「Column ordering」の部分。あるいは、この記事を通して見ていただきたいfiddleのページを作ったので以下をご覧下さい。 Reversing Columns in Bootstrap 3 - JSFiddle Reversing Columns in Bootstrap 3 - JSFiddle 要は、Bootstrapのグリッドを使っている時に、モバイル時だけサイドバーをまず上に持ってきたい(あるいはその逆)、というケースがあって、そのための方法が「カラム逆転(順序変換)」です。サイドバーに広告があ
2015-01-13 background-attachment:fixed;とbackground-size:cover;はモバイル時に衝突する。 HTML&CSS WebDev RWD 画像を大きく見せるデザインで、あるdiv領域にbackground-imageを適用するということはよくある。その際、CSSは次のようになる。これは、imageを固定させて、パララックスのように見せかける、「擬似パララックス」とでも呼ばれうるスタイルだ。昨日の記事を書いている時に見つけたサイトでも使われている(Frog - バンクーバーを拠点とするクリエイター留学サポート企業)。 .header-image-area { background-image: url("../img/example.jpg"); background-color: #0f0f0f; background-position:
制作環境 ローカル制作発環境を持てないのが困るところです。 自分の場合は、このはてなブログのフロントページのHTMLソースをコピペし、邪魔そうなスクリプトなどの部分を取り除いて、無理やり再現しました。7割くらい完成してからはローカルを離れ、非公開ブログを作成してそこの「デザインCSS」欄にコピペしていました。 本番環境での制作 「デザインCSS」というのは、ブログの設定画面から、「デザイン」->「スパナのアイコン(カスタマイズ)」の中の一番下にあります。ふだん、他人が作ったテーマを少し改変したいときにもここに書き足します。 選択したテーマはここからCSSのインポートで呼び出されています(例えば、「MJMJB」の生のCSSのURLは、http://hatenablog.com/theme/8454420450092214672.cssです)。 つまり、この「デザインCSS」の欄を空にして
2015-01-03 Google Mapsのスクロール無効化とモバイル時だけのドラッグ無効化 Maps WebDev Google Mapsを埋め込む時に、動いて欲しくないときがよくある。個人的には、ワンページレイアウトやモバイルも含むRWDのウェブサイトを作ることが多いので、基本的に動いて欲しくない。 それはオプションに渡す値次第でなんとかなる。鍵となるのは、scrollwheelとdraggableで、それぞれにfalseを指定すれば無効になる。 いまいちど確認しておくと、地図のスクロールを拒否する理由は、ワンページレイアウトでページ全体をスクロールしていく時に、そのままだと地図の場所でスクロールを延々と続けてしまうから。ドラッグを拒否したいのは、モバイル機器のタッチパネル上でスワイプする際に今述べたようなことと同じ状況がおきてしまうから。 ここでは、デスクトップのドラッグは問
2015-01-12 敢えてレスポンシブ対応しないという正しい選択 RWD WebDev 2015年にウェブサイト製作をする者として、いかに優雅な可変を実現するかが力量の見せ所なのではないか、そう考えているほどにRWDに凝っているといえば凝っている私ですが、なにがなんでもRWDすればいいと思ってはいません。RWDが総合的に見て、サイトに悪影響を及ぼす事だって有り得るのではないか、と考えることもあります。 具体的な事例をもって説明します。日本語で書かれたウェブデザイナー向けサイトの5本の指には入るであろう、次の2つのブログについて触れます。 コリス | サイト制作に関する最新の情報をご紹介 Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。 いずれも、サイドバー右には広告が入っています。屈指のPVを誇るサイト特有の、純粋広告まで
2014-11-19 結局、footerの下部固定はどうやるべきなのか。レスポンシブ対応で今のところベストな方法 RWD WebDev HTML&CSS 問題 フッターの下部固定が問題になることは、コンテンツに不足がないCGMサイトやメディアでは特に問題にならないので、なかなか問題として扱われにくいという気がしている。しかし、個人メディアや小規模サイトにおいては、ヘッダー領域のコンテンツと合わせても、縦の合計が400pxに届かないようなある意味貧しいページに頻繁に出会うことになる。その際に、フッターに対して何もスタイル上の対策をしておかないと、コンテンツ領域にフッターが浮いてくっつくようになってしまい、不恰好に見える。 今のところベストな方法 この件に関しては何度も調べていたものの、これまでBootstrapで検索することが多かったからか、今回はBootstrapのページが検索上位に出てき
このページを最初にブックマークしてみませんか？
『wsoccer.hatenablog.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
