[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア
Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。
![[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア](https://cdn-ak-scissors.b.st-hatena.com/image/square/756f0468957ea28ca57928b50217267f6ec350ab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101105-01.png)
初心者でもデザイナーのように文字の見た目を劇的によくする「カーニング」をマスターするための9つのポイント
優れた無料フォントはたくさんありますが、フォントによっては文字を並べた時に文字同士の間隔が不自然になってしまうことも。そんな時は文字間隔を調整するカーニングを行うことでデザインをよくすることができますが、どのようにすれば適切にカーニングができるのか、初心者でも使える9つのポイントがまとめられています。 A Beginner’s Guide to Kerning Like a Designer – Design School https://designschool.canva.com/blog/kerning/ 文字と文字の間隔は、単純に同じ距離であれば自然に見えるというわけではありません。以下の画像では左側の「Type」の文字間隔が全て等しく、右側は同じではないのですが、実際に人間の目で認識されると自然に見えるのは右側になります。これは、それぞれの文字によって持っている「空間」の大きさに
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
おもしろい人はやっている、会話を盛り上げる7つのポイント | ライフハッカー・ジャパン
『「おもしろい人」の話の公式』（吉田照幸著、SBクリエイティブ）は、テレビのディレクターとして「あまちゃん」「サラリーマンNEO」などを制作してきた著者が、「誰でも簡単に話を弾ませるコツ」を紹介した書籍。ちなみにそのコツについて、「はじめに 自分がおもしろくなくても、面白い話はいくらでもできる！」のなかにこんな記述があります。 自分の言いたいことが伝わらない。誤解されてしまう。話が盛り上がらない。笑いなんてとてもとれない。でも待ってください。裏を返すと、笑いが取れれば、話は盛り上がり、自分のいいたいことも伝わり、理解されるようになる！ってことになります。 つまり、「おもしろい」ということは、コミュニケーションの問題を一気に解決する可能性を秘めているということ。「つくり込んだ笑い」をベースにした番組を生み出してきたディレクターらしい考え方です。本人のことばを借りるなら本書に示されているのは、
音作りのプロが教えるブッ飛ぶほど最高な iTunesイコライザ設定「Eargasm Explosion」がコレだ!!
» 音作りのプロが教えるブッ飛ぶほど最高な iTunesイコライザ設定「Eargasm Explosion」がコレだ!! 特集 パソコンで音楽を聞くとき、もしも「iTunes」を使っているのならば、ぜひとも試してほしいイコライザ設定がある。“音作りのプロ” を自称する海外のネットユーザーが自信マンマンで紹介したイコライザ設定こそが……上の画像である!! 彼はこの設定を『Eargasm Explosion（イヤガズム・エクスプロージョン）』と命名しており、意味合いとしては「爆発しちゃうくらい耳がキモチイイ！」であろうか。イヤガズム・エクスプロージョンの考案者は、以下のように語っている。 「iTunesで最高の音を楽しみたかったら、この秘密のイコライザ設定を試してみろ。俺を信じろ。俺は音作りのプロだぞ？ とりあえずやってみろ。その違いは明らかで、ブッ飛ぶこと間違いなしだ。一度でも聞いたら……こ
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
日々の作業が超快適に！Macが超便利になる小技や設定47個まとめ | ゴリミー
Macを使っているだけで作業効率がグンと上がる！ただ、設定次第ではさらに便利になる可能性を秘めている！ これまで発見する度に都度紹介してきたMacを便利にする小技や便利Tips全47個をまとめてみた！中には知っているだけで日々の作業スピードが向上するものもあれば、最近困っていたことの解決方法になるものもあると思うので、参考にしてみるべし！ ユーティリティ系の小技や便利設定 Macでファイルの拡張子を常時表示する方法 OS X 10.8 Mountain Lionでスクロールバーを常に表示する方法 MacのデスクトップにMacintosh HDや外付けハードディスクのアイコンを表示する方法 MacのFinderで複数選択したファイルを含んだフォルダを一発で作る方法 「OS X Mountain Lion」のホットコーナーの誤動作を防止する方法 OS X Lionでトラックパッドやマウスのスク
女性誌にみる女性向けデザインを研究したまとめ
どうも、シンプルやかっこいいWebデザインよりも甘いガーリーテイストのWebデザインが好きなガリザワです。 女性向けのデザインをする時に、女性ファッション誌を参考にすることがあります。しかし一概に女性ファッション誌と言っても数多くありその発行されている雑誌の種類は100種類もあります。そんな中で、主な女性ファッション誌の傾向とデザインの分析をまとめてみました。 女性ファッション誌エディトリアルデザインに学ぶ 女性ファッション誌には、WEBデザインには無い女性デザインの雰囲気を感じれる、WEBサイトではあまり見かけないようなデザインパーツなんかも数多くあるので、デザインをするときに参考にしている。 特に女性向けのデザインをするときに、ターゲット層が細かく分けられており、そのターゲット層にあったデザインをする必要がある。その上でターゲット層に合った雑誌の傾向をまとめてみた。 （伊藤忠ファッショ
イケててヤバいGit入門 | GREE Engineering
この投稿はGREE Advent Calendar 2013 20日目の記事です。 プロデューサーの皆さん、みりっほー。進捗どうですか？私はダメです。ごめんなさい。（´・ω・｀） WG事業部の二宮です。今日はアイマス駆動開発の話をしようかと思ったのですが、急遽Gitの使い方の話に変更しました(Inspired by 堀口先生)。 アイマス駆動開発の話が気になる方は、是非一緒に飲みに行きましょうw ※この記事では、ツールにGitやGitHubを利用することを想定しております。 Gitをスマートに使いたい グリーでは、基本的にA successful Git branching model（有志の方による日本語訳）にのっとって開発しています。 Gitについて基本的な考え方の部分は堀口さんの記事で言及されているので、私は現場で具体的にどのような使い方をしているのかについて書きたいと思います。 と
8 iPhone IFTTT Recipes You Can't Live Without
When IFTTT launched an iPhone app in July, it opened up a whole slew of new possibilities about how to put the incredibly handy service to even better use than ever. New channels accessible via the iPhone app allow access to your iPhone contacts, photos and reminders. Once you've activated the channels on your phone, you can create new recipes from the comfort of your browser. We've put together a
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
PDOの真の力を開放する - PHPでデータベースを扱う(3)
ちょっと遅れましたが、シリーズの第３回です。前回までに論じた内容をふまえて、簡単な実装を示します。↓前回までの内容はこちら。 DAOの悪夢 - PHPでデータベースを扱う(1) - 泥のように ドメイン駆動設計という救世主 - PHPでデータベースを扱う(2) - 泥のように 題材 「記事にタグを設定できるブログ」みたいなシステムを考えてみます。ブログ記事を示すEntryテーブル、タグを表すTagテーブルの二つを用意しました。MySQL WorkbenchによるER図(鳥足記法)は以下になります。 1つのEntryに対して複数のTagがある、１対多の関係です。同じTagが複数のEntryに関連するため、多対多の関係と見なすこともできそうですが、タグ程度だとあまり意味がないので、これ以上のテーブル分割はやめておきます。 Entryテーブルの主キーがentryIdと冗長な名前をしているのは、自
写真は怖くない！すごい「Photoshop」マジック小技集２３
作成：2013/07/16 更新：2014/11/01 無料素材 > 写真うつりが悪い、気になるところをサクッと修正したい。今回は、顔や体型を簡単に修正する方法やアクションをまとめました。結構共通する部分が多いですが、顔以外にも使える色々な方法があるのでお試しを。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 髪 １．髪の色を変える ２．髪の毛を切り抜く 肌 ３．シミやそばかすを消す ４．肌を美白にする ５．肌を滑らかにする 顎 ６．顎をシャープに ７．リフトアップ 目 ８．目を大きくする ９．まつげを増やす １０．目のクマ／ほうれい線を消す １１．目の色を変える 鼻・唇 １２．鼻を高くする １３．ぷるるん唇にする １４．歯を白くする 体型・表情 １５．バストアップ １６．ポーズを変える １７．顔の表情・形を変える 背景 １８．背景を消す １９．背景をぼかす
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
[Mac] iTunesで「完全に重複する曲」の表示やiCloudメールの小技など、最近ためになったTips 11個。 | Appdrill
[Mac] iTunesで「完全に重複する曲」の表示やiCloudメールの小技など、最近ためになったTips 11個。 Photo by the tartanpodcast いろいろなブログで紹介されているMacの小技やTipsをまとめました。 どの記事も役立つものばかりなので、是非チェックしてみてください！ 1. iTunesで重複する曲の抽出 通常の「重複する曲」の表示ではなくて「完全に重複する曲」を表示する方法です。 ⇒ iTunesで「完全に重複する曲」を表示する方法 – ゆるくいろいろと 2. Windowsのフォントを無料でインストール Windowsユーザーから貰ったOffice書類を開く時や、ウェブを作る時などに使えそうです。 ⇒ 無料でMacにMS系フォントをインストールする方法。これでKeynote等のエラーも解決するかも。 | あなたのスイッチを押すブログ 3. OS
![[Mac] iTunesで「完全に重複する曲」の表示やiCloudメールの小技など、最近ためになったTips 11個。 | Appdrill](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ddf8df097c23c0a183f6b1c8c608146930aac94/height=288;version=1;width=512/https%3A%2F%2Fappdrill.net%2Fwp-content%2Fuploads%2F2012%2F10%2FI-don_t-have-an-office_4364379105_l.jpg)
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
よく分からずにトーンカーブを使っている人に。 - kojika17
画像の色調補正する時、何を使いますか？ 私の場合、基本的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。 トーンカーブ基本 縦軸と横軸は、0から255まで階調を表しています。 画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。 横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。 斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。 階調の出
良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良の方法？ 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
