はてなブックマーク

remと聞くとレム睡眠しか思い浮かびません。 体は眠っているのに脳は活発に稼働しているだなんてニンゲンの神秘を感じてしまいますが、今回はそういう話でなくて、ただの単位です。単位としてのremです。

Sassネタは今日はお休みしてbrackets-cssfierが気になったので使ってみました。感想やら手順などをちょこっと。 ちょこっとしか書かないってことはどういうことだかお利口さんなみんなは分かるよね。 まずはエディタの準備から。 使うエディタはGithubで公開されているAdobe Bracketsです。 Adobe Brackets GithubAdobe Brackets Downloadとりあえずダウンロードしてインストールしておきましょう。 brackets-cssfierのインストールファイル→拡張機能マネージャーをクリック。 URLからインストールをクリック。 テキストボックスに「https://github.com/rcaferati/brackets-cssfier」を貼り付けてインストールをクリック。 以上でbrackets-cssfierのインストールは終わりです

WebFontって使ったことないなー。 でアイコン的に使ってみた。 ちょっと洒落たメニュー作ってみたよ。 今回使ったのは「Font Awesome」 ダウンロードしたファイルを解凍するとcss,fonts,less,scssの4つのフォルダが入ってます。 使用するのはcssとfontsのみ。 使い方まずはhead内にcssをリンクしましょう。 <link rel="stylesheet" href="css/font-awesome.min.css">これだけでWebフォントは利用できます。ちなみに以下。 <i class="fa fa-home"></i>と書いてあげるだけで家のアイコンが表示されます。（デモのHomeアイコン） その他のアイコンは「The Icons」で確認できます。（多くて探すのめんどうだけど・・・） これじゃつまらんのー。ってことでサンプル的なメニューを。 html

tableってスマホの小さい画面だと見づらいですね！ですね！ そんなときはMedia Queriesでガラッと見た目を変えちゃいましょう！ と言うわけで1つのページをPC用、スマホ用とテンプレ変更して表示したりレスポンシブなページで使えそうなテーブル用CSSです。 ますはデモ。(ブラウザのサイズ(横幅)をグイ～ンで小さくしてみてください。) table { width:80%; border-collapse:collapse; margin:50px auto; } th { border:1px solid #ccc; background:#e1e1e1; padding:5px; } td { border:1px solid #ccc; padding:5px; } @media only screen and (max-width:420px) { thead { displa

全国数百万人(適当)のWEBクリエイターのみなさん！毎日「IEしねしねー」の呪文唱えてますか！ 今日はそんな腐クリエイターさんたちのための情報ですよ！(今更・・・) 思いっきりCSS3が使えるIEは10・・・ しかし、UAシェアを見てみるとまだまだIE7～8、あるいは6もいるのが現状。 内容にもよりますが、IE全体のシェアも国内では半数を超えている状況。 よってプロのWEBクリエイターたるものIEを無視するわけにはいかず、CSS3を使わないわけにもいかないのです。 ケースバイケースでbox-shadowやborder-radiusなんかは切り捨てても(表示されなくても)良い場合もありますが、古いIEでも当然表示されたほうがいいですよね。 という訳でCSS3 PIEの登場です。 使い方は簡単です。 CSS3 PIEのパッケージをダウンロード、解凍してサーバーにアップロード、CSSにIE独自拡

border-radiusって？手っ取り早く説明すると角を丸くするためのプロパティです。 書き方html<div class="b-radius-a"> 角丸ですー。 </div> .b-radius-a { border:1px solid #000; border-radius:10px; }もっと細かく基本、値を1つ指定すると4つの角を丸くしてくれますが、他にも以下のような指定方法があります。 ●半角スペースで区切って値を4つ：4つの角を個別で指定できます。 border-radius:左上 右上 右下 左下;●半角スペースで区切って値を3つ：左上　右上と左下　右下を個別に指定できます。 border-radius:左上 右上と左下 右下;●半角スペースで区切って値を2つ：左上と右下　右上と左下を個別に指定できます。 border-radius:左上と右下 右上と左下;水平、垂直を個

WordPressで地図を表示するプラグインっていっぱいありますよね。 そのほとんどがショートコードを使うものが多いです。（実は使ったことがないから知らん） 例えば膨大な施設紹介のサイトで場所をGoogle Mapを使って紹介となると、クライアント様に「地図はこんな感じでショートコード入力してくださいねー」なんてちょっと酷かなと思います。 そこでカスタムフィールド(標準のカスタムフィールドでもCustom Field Templateでも大丈夫！)に入力した住所を使ってGoogle Mapを表示しようってことです！マジっすか！ もちろん住所に入力がなかったら別の何かを表示できるよ！ まずはこんな感じ的なデモ ※デモはCustom Field Templateを使ってます。 Custom Field Templateの設定Custom Field Templateのインストールは適当にググっ

CSSで三角形を作るには.sankaku { border:10px solid transparent; border-bottom-color:#369; border-top-width:0; width:0; } と書くと「▲」が描けます。 これをある要素(divとか)に擬似要素(:after)として追加してあげれば吹き出しになります。 CSSで吹き出し(上)html.fukidasi_top { width:200px; background-color:#369; border-radius:6px; position:relative; padding:30px; color:#fff; } .fukidasi_top:after { border:10px solid transparent; border-bottom-color:#369; border-top-wid

<?php $files = get_post_meta($post->ID, PDF, false); foreach($files as $file){ $file = wp_get_attachment_url($file); } ?> <a href="<?php echo $file; ?>" target="_blank" rel="noopener">PDFファイルです</a> これでアップロードしたPDFにリンクを貼ることができます。 ただし今回は、投稿する記事が毎回PDFじゃなくて本文ありの記事も書くというのが前提。 やることは・・・ PDFファイルがアップロードされているかPDFファイルがアップロードされていたら記事タイトルにPDFへのリンクを貼るそうでなかったら記事タイトルに通常通り記事へのリンクを貼るこんな感じです。 ではPDFファイルがアップロードされてるかどうか