はてなブックマーク

floatやclearプロパティ周りの話題が出るたびに、「flex使えばオッケーじゃん」というような声が散見されるので、「それは違う！」と強く訴えたい、というお話です。 そもそもflexはfloatの代替品ではない floatプロパティは、それを設定した要素を文字通り"浮かし"て、後続の要素を回り込ませる役割を持っています。 一方のflexの役割は"並べる"のであって、floatのように後続要素を回り込ませる機能は持ちません。 floatを使って要素を並べるのは、本来の用途から少し外れています。そのためclearfixという多少の無理をしていました。その無理のしわ寄せは、clearfixを適用した要素には、after疑似要素を利用できないところに現れます。 なお、要素を並べるには、floatの他に、 display: inline-block; display: table;とtable-

(久しぶりだとテーマのつくり方を忘れてしまう) WordPressでテーマを作るとき、JavaScriptやCSSのファイル読み込みは、headタグ内で <script src="<?php bloginfo('template_url');?>/js/hoge.js" type="text/javascript"></script> とか <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/css/hage.css" /> てな具合にやるのがHTML/CSSコーダーにとっては分かりやすい。 ところがWordPressで推奨されているのはfunctions.phpで読み込ませること。プラグインも含めてスクリプトファイルの重複や依存関係も考慮したうえで出力させることができる。 読み込み方

ヘッダー、フッター、サイドバーはまとめて管理したい HTMLのみで作られた静的サイトでは、ヘッダー・フッター・サイドバーといった共通部分に変更を入れる際、すべてのページを変更しなければならないため面倒。 以前かかわった大規模案件では（サイト設計者がやたらjsに頼るタイプの人だったので）jsで読み込んでいたけど、重くならないのかなと。とりあえずそういうのが必要な場合は以下を参考にすることにして。 http://affiliate.ks-product.com/javascript-common-parts-external/ 更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer｜web制作に関するネタの引き出しサイト 今回はPHPでincludeする方法。WordPress使ってたらこっちのほうがなじみがある。 使っているサーバーでhtmlファイル内でPHPが使える

googleadservices がデザインを破壊する GoogleAdservicesのトラッキングコードを入れると、消去できない余白がサイトの下にできてしまう問題があります。悪さしているのは、 <script src="https://www.googleadservices.com/pagead/conversion.js" type="text/javascript"> というタグで、</body>タグの直前に幅300px、高さ13pxのiframeを挿入します。 このiframeタグに何らかのclassが付与されているのなら簡単に対処できるのですが、それがないため途方に暮れていました。 ぐぐった結果 主犯のscriptタグをdivで囲み、そのdivタグにdisplay:none;することで消せるよ、という情報が得られました。 （参考） 試してみると確かに消えます。 が、displ

条件 ルートフォルダの下にスマホ用のサイトとして/sp/フォルダを作り、スマートフォンからのアクセスは/sp/フォルダへリダイレクトさせる。 パソコンで/sp/フォルダ内のページにアクセスしてきた場合はPCのほうへリダイレクトさせる。 PC用のサイトのURLは、/で終わるタイプ。すなわちページごとにフォルダを作り、その中にindex.htmlがある。 ブログも併設されており、/blog/フォルダにブログのシステムがある。こちらはPC,スマホの振り分けは行わない。 PC用サイトとブログの画像は同じフォルダに入っている。 つまりファイル構成はこんな感じ /example.com/ index.html (PC用インデックス) /page1/index.html　（PC用ページ1） /page2/index.html　（PC用ページ2） ・ /img/　　　　　　（PC用およびブログ用画像フォル

(一部修正2015/1/17：記事内では修正1として表示) ロリポップやさくらなどのレンタルサーバへのMTOS5（Movable Type Open Source 5）のインストール手順は掲載されていますが、XAMPPへのインストール方法はあまり見かけないのでメモとして記録しておきます。 作業環境 XAMPP ver.1.7.3 MTOS ver.5.01 OS Windows XP SP3 事前準備 1.MTOS5のダウンロード MTOS5（Movable Type Open Source）のサイトから「今すぐダウンロード」のボタンをクリックしてMTOS5をダウンロード。 ダウンロードしたファイルをダブルクリックして展開。 2.XAMPPの準備。データベースの作成 XAMPPを起動、Apache,MySQL,File Zillaを起動。 ブラウザでXAMPPを開き、左サイドメニューからp