今日会社の後輩くんから「display: inline-blockを使ってliを横並びにしてるんですけど、隙間ができてしまうんですが…」との質問。 彼は最近HTMLを学び始めたばかりなんですが、自分も昔これでmarginとかいじくり倒して悩んだことがあり、みんな同じ壁にぶち当たるもんなんだなぁとしみじみ…。 display: inline-blockでliを横並びに <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul> li { display: inline-block; /* IE 6/7 */ /display: inline; /zoom: 1; width: 100px; height: 100px; border: 1px solid #ccc; list-style: none; text-align: center; li

2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ

新入社員必見！議事録のポイントとは？(3ページ目)新入社員の仕事といえば議事録もその一つ。意識することで、議事録を自己研鑽の場に高めることもできる、書き方のポイントを紹介します！ 議事録に書くべきこととは、ずばり「論点に答える情報」のこと。ここで言う論点とは、「読む人がこれまで知らなくて、知りたいと思っている情報」です。知っていて当たり前な情報や、知りたくない（知らなくてもよい）情報は、読む時間がもったいないですね。 論点を意識するテクニックとして、項目名を「～について」としない、ことがあります。なぜならば、項目名が「～について」だと、～について何が知りたいのかが、ぼやけてしまうからです。 例えば、「ターゲットとすべき顧客セグメントについて」という項目名よりも、「ターゲットとすべき顧客セグメントはどこか？」の方が、知りたいことの焦点がはっきりしますよね。 また、論点に応える情報のウェイトは

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

A little exploration I did for the Tool website (http://toolofna.com/). 12 buttons with a unique rollover effect each using only CSS. Most work on most...

css3、僕も好きで使うことは使うのですが、 css3を使っている事が理由ですごく見にく いサイトやブログにたまに遭遇してアレな ので無効化するブックマークレットを探して みました。良さそうなのがありましたので 少し手を入れさせてもらいました。 もちろん、css3で素敵でリッチなデザインになっているサイトも多数ありますが、中には逆に見難くなってしまっているサイトも見かけます。たまにストレスになっているのでブックマークレットで対応。 もとはToggle CSS3 Bookmarkletというのがあったんですが、増える様子が無さそうなので手を入れさせて頂きました。 css3を無効化するブックマークレットremove-css3　←ブックマークレットです 上記をブラウザに登録してください。閲覧中のサイトで使われている以下のcss3のプロパティをリセットします。 -moz-border-radius

css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～

css3で新たに加えられたドロップ シャドウを使って一歩進んだシャド ウを作るTipsです。画像でよく使わ れている、めくれた際に出来る様な シャドウをcssのみで実装。 以下のようなシャドウをcssのみで実装します。 CSS3 でめくれた感じのドロップシャドウを 下部の両端にドロップシャドウがあると思います。良く見る手法ですね。これを画像を使わず、css3のみで実装します。 cssとHTMLのソースは以下。 htmlは以下 <div id="shadows"> <article> <h3>CSS3 でめくれた感じのドロップシャドウを</h3> <p>下部の両端にドロップシャドウがあると思います。良く見る手法ですね。これを画像を使わず、css3のみで実装します。</p> </article> </div> css div#shadows { width: 559px; margin: 20

こんな感じのスマホサイトによくあるクリックで展開するメニューを実装してみました。左に俗にいうハンバーガーボタン、右に検索ボタンを設置したものを想定しました。 実装 html タグマークアップはこんな感じです。次の記事の方法を使って、左右にアイコンを配置しています。この方法だとシンプルに実装できます。→ 「次に進む/前に戻る」で CSS の記述量が減るテクニック · rakuishi.com <div class="container"> <header> <div class="menu"><img src="images/menu.png" width="20" height="20" /></div> <div class="search"> <img src="images/search.png" width="20" height="20" /> </div> </header>

Googleアナリティクスで自社のアクセス解析をしようと思い、データをとりあえず眺めて、 訪問数が伸びた、減った。 直帰率が高い、低い。 で終わっていませんか？ これだけでは、Googleアナリティクスを見ても何が原因で上がったのか下がったのかが分からず、次の施策を打つことができません。 Googleアナリティクスはただ眺めているだけでは何の価値ももたらさないのです。 でも安心してください。 Googleアナリティクスで何が見られるかを知れば、今日からあなたもバリバリ使いこなすことができます！ 今回はGoogleアナリティクスのデータから、施策を打つまでの導き方をご紹介します。自社サイトのアクセス状況を確認して、今後のサイト改善に役立ててみては如何でしょうか。 分析に自信がない、時間が割けない方は無料診断を利用するのもオススメです。 ※本記事は株式会社WACUL提供によるスポンサード・コン

jquerymobile(ジェイクエリモバイル)を利用している場合は、ページ内リンク（ページ内ジャンプ、ページ内アンカー）が効かないようです。 jquerymobileでは1つのファイルで複数のページがあるように作ることができ、その機能上で「#（ハッシュ、シャープじゃないよ）」を利用するために、 ページ内アンカーするときには「＃」が無効化されてしまうようです。 みなさんがいろいろ対応するためのjavaスクリプトを作成してくれているんですが、複数のページ内リンクにも対応しているスクリプトがこちらでした。 １、リンクにイベント用のクラス名をつける リンク用のaタグに、class=”anchor”という名前をつけました。 名前付け用のaタグはいつも通りnameやidに名前をつけます。 <a href="#aaa" class="anchor">アンカー１</a>｜ <a href="#bbb"

CSSでスプライト画像（複数の画像を一つの画像ファイルにまとめた画像。HTTPリクエストを減らすのに役立つ）の設定をしていた時、ChromeとかIE9では画像が表示されるのにIE8では表示されないことがありました。なぜだろうと調べてみたところ、 .button-content { /* 正常に画像が表示される */ background: url(../img/sprite.png) no-repeat -35px 0; } と、書けば大丈夫だけど、 .button-content { /* no-repeatの前に半角スペースがないと、IE8で画像が表示されない。 */ background: url(../img/sprite.png)no-repeat -35px 0; } と、書くとダメなようです。 こういう微妙なバグ？は厄介ですね、ということでメモ。