ブロブ等のWebサイトにFacebookやtwitterなどのSNSボタンを設置していますでしょうか？記事に「いいね！」を押してもらったりシェアしてもらうのに大切なアイテムですね。各SNSの公式サイトにもボタンの設置方法等が紹介されていますし、多くの方が利用しているのではないかと思います。 WordPressをご利用の方であれば、『WP Social Bookmarking Light』等のプラグインを利用して簡単にSNSボタンを設置することが可能です。 しかし公式のSNSボタンを利用することによるデメリットも存在します。SNSボタンを設置してあるページを読み込む（表示させる）のに、とても時間がかかり重いのです。Facebookの「いいね！」ボタンは特に重いような・・・。ユーザビリティやSEOの面でもページ表示速度が重要視されるようになり、「0.1秒でも早くしたい！」という方にとって無視す

公開日：2014-11-11 最終更新日：2017-01-20 先週の土曜日、2014年11月10日に谷 拓樹（@hiloki）さんの著書『Web制作者のためのCSS設計の教科書』出版記念イベント『CSSオジサン #0』に行ってきました！ 2週間程前にUPした記事「今秋はWeb系セミナー（in関西）がいっぱいあるよ！」で「この日までに読了するぞー！」って高らかに宣言しましたが、5章までしか読めていないまま参加しました。有言不実行@よしぱんです。 メンテナブルでありつづけるためのCSS設計 まずは著者のhilokiさんのセッションです。セッション内容はスライドと、あと森和恵さんのブログ記事「『CSSオジサン #0』で、CSS設計を学んできました」を読んで頂いた方が絶対良いので、私は読了ほやほやの書籍＋セッションで自分が考えたことを書きます。 書籍「Web制作者のためのCSS設計の教科書」を読

昨日大阪で開催された、CSSオジサンっていうCSSの勉強会に行ってきたのでその雑感。CSSオジサンってだけに若者は少なかった。女性の人が思ったよりいた印象ある。 発表は、最初がCSS設計の教科書の著者である@hilokiさん。@hilokiさんと言えばCSS設計。「メンテなブルであり続けるためのCSS設計」というタイトルの発表だった。CSSを片手間に書いている人たち、@hilokiさんのスライドは一読すべきだと思う。 メンテナブルでありつづけるためのCSS設計 from 拓樹 谷 次が@cssradarさんで、「CSS Investigation: CSSコードレビューの仕方教えます」という発表。コードレビューをする側の心構えや、おなじみの便利ツールの紹介、コードの不吉な匂いの見つけ方とかの話だった。 最後が@t32kさん。「CSSオジサン、この先生きのこるためには」というタイトルで、@t

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の

Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery

連続した要素にinline-blockを指定すると、隙間が空く現象。 インラインブロックを指定するということは、img要素と同じ表示になるということです。 すなわち、img要素でも、同じ現象が見られます。 これらのhtmlは以下のようになっています。 <ul class="listinline-block"> <li>ディーシーエスWEBスクール</li> <li>ディーシーエス建築写真</li> <li>ディーシーエスHP制作</li> <li>ディーシーエスチラシ制作</li> </ul> <div class="imgyoko"> <img src="" /> <img src="" /> <img src="" /> <img src="" /> </div> 何か気づきませんか？ じつは見えない改行があるんですね。 <ul class="listinline-block"> <l

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ &nbsp;を&emsp;に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:

CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書きましたが、スマホ用だけでなくレスポンシブなサイトにも便利です。 box-sizingとは box-sizingの値には「content-box」「border-box」「inherit」があります。content-boxは初期値で、要素の大きさを、width、padding、borderで計算されます。 今回便利というのborder-boxを使った場合です。border-boxを指定すると、要素

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記　2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi

Htmlでサイズ可変で縦横比固定のブロック要素を実現する方法を模索していたところ、 ちょっと独特な方法ですが可能なようです。 こちらのページに書かれていました。 日本語訳がちょっとおかしなことになっているので転載。 以下は幅によって高さが決まるタイプのコード。 html <div class="aspectwrapper"> <div class="content"> 内容… </div> </div> css .aspectwrapper{ position: relative; } .aspectwrapper:after{//beforeでもよい padding-top: 75%;//幅に対する高さの割合 display: block; content: ""; } .aspectwrapper > .content{ position: absolute; top: 0px; le

結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ

CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr

これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある

各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S

タイトルは どうしてプログラマに・・・プログラムが書けないのか? からもってきました。 原文はこれですかね。 FizzBuzz問題という有名な問題があります。 1から100までの数を表示させる。 ただし3の倍数のときは数字の代わりにFizzと、5の倍数のときはBuzzと、3と5の両方の倍数のときはFizzBuzzと表示させる。 ただこれだけの問題です。 PHPで平易に書くとしたらこんなかんじでしょうか <?php for ($i = 1; $i <= 100; $i++) { if ($i % 15 == 0) { echo 'FizzBuzz'; } elseif ($i % 3 == 0) { echo 'Fizz'; } elseif ($i % 5 == 0) { echo 'Buzz'; } else { echo $i; } } JavaScriptならこんな感じで書けますね

ドットインストール代表のライフハックブログ

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co