清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
WordPressカテゴリーの順番を並び替えるプラグイン|WordPress超初心者講座
WordPressブログに表示するカテゴリーの順番を並び替えたい！ という時に便利なプラグインを紹介します。 WordPressの「カテゴリー」ウィジェットを使った場合、ブログに表示されるカテゴリーの順番は、思い通りに設定することができません。 しかし、「Category Order and Taxonomy Terms Order」プラグインを使うと、簡単なマウス操作でカテゴリーの表示順を変更できます。 本記事では、Category Order and Taxonomy Terms Order プラグインの使い方を、初心者向けにわかりやすく解説します。 こんにちは、かずよしといいます。2010年からWordPress（ワードプレス）を使っています。 この記事を書いた、かずよしです ユーザー数のべ800万人超えの情報サイト「WordPress超初心者講座」を管理・運営する人。ワードプレスの
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
ロゴデザインや見出しに最適！無料で使える欧文/英語フリーフォント83 | co-jin
ロゴをデザインするとき、既存のフォントをベースに作成することになるケースが多いと思います。 しかし、手持ちのフォントが少ないと、いいロゴもできないものです。 そこで今回は、ロゴデザインや、ポスター・フライヤー・チラシの見出しとして利用した場合に最適な、無料で利用できる欧文/英語フリーフォントをコレクションしてみました。 ロゴ作成などのお役に立てれば幸いです。 なお、ライセンス形態は作者の都合などによって変更される場合があります。 ご利用の際は、各フォントのライセンスを再度お確かめの上、ご利用ください。 フリーフォントもいいですが、こちらもご参考にしていただきたいです。 「3000円で150万円の価値！欧文フォント本「TrueTypeフォント パーフェクトコレクション」は無料フォント以上だ」もぜひご覧ください！ Chunk Five 商用利用可 Chunk Five Elegan Tech
ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
jQueryやその他ライブラリを使わない、素のJavaScriptでのDOM操作関連をまとめてみました。 要素の検索 //id指定 document.getElementById('id'); //class指定 document.getElementsByClassName('class'); //タグ指定 document.getElementsByTagName('div'); //cssセレクタで指定 document.querySelector('#main .posts h1'); //最初の一つを取得 document.querySelectorAll('a'); //すべて取得 //親要素 element.parentNode; //子要素 element.firstElementChild; //最初の子要素 element.lastElementChild; //最後の
[Mac]トラックパッドのダブルタップでマウスのドラッグ状態にする方法 - あなたのスイッチを押すブログ
トラックパッドが便利すぎて、マウスを全然使わない私です。 トラックパッドでクリックする場合は、そのままトラックパッドを押し込みますよね。ドラッグする場合は、押し込んだ状態のままカーソルを動かします。 でもこれを、タップ動作だけで行う方法があります。 つまり、トラックパッドを押し込まずに、ダブルタップすれば何かを選択した状態を維持することができ、そのままカーソルを移動させればドラッグさせられるんです。 今日はそんなMacの小技的な設定について。 ダブルタップで選択状態を維持する設定 今回の設定を行うと、トラックパッドをダブルタップすることで、何かを選択した状態を維持することができます。 例えば、ウインドウを移動させるときは、ウインドウの上のグレーの部分をクリックして、そのままドラッグしますよね。 今回の設定を行った場合、グレーの部分をダブルタップするだけで選択した状態が維持されます。従って、
![[Mac]トラックパッドのダブルタップでマウスのドラッグ状態にする方法 - あなたのスイッチを押すブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d66d82e634574f4c3debf439ac7c23760e07a28/height=288;version=1;width=512/https%3A%2F%2Fbamka.info%2Fwp-content%2Fuploads%2Fcc303c2b3313795ee1739bef2938a307.jpg)
【Haml】日本語文字を含むとエラーがでるので【コンパイルエラー】 | トムのブログ
謎なエラーが出まくってます。 とむです。 Sublime Textでhamlを使おうと思っていろいろ設定していたのですが、日本語文字を入れた状態でビルドするとエラーになってしまい、上手くビルドできませんでした。 エラーは、 「Haml error on line 58: Invalid US-ASCII character “\xE3″」 といった、内容のエラーです。 ネット上で情報を集めてもなかなか集まらずエラー解決に１時間位もかかってしまったので、同じように困っている人向けへの記事です。 結論から言うと、 1行目に「- # encoding: utf-8」 と入力してやると上手くビルドできました。 もし解決しない人がいたら一度試してみて下さい。 Warning: Use of undefined constant nul - assumed 'nul' (this will throw
IE でスクロールバーがコンテンツに重なる問題を解決する
図のように、IE10 や IE11+ ではコンテンツ (HTML の要素) とスクロールバーが重なってしまう (= オーバーレイする) ことがあります。 設定によっては、スクロールバーは一定時間が経過した後に自動的に隠れますが、 スクロール中にテキストが読みにくくなったり、リンクやボタンがクリックしにくくなることは問題です。 ここでは、この問題について解決します。 原因はビューポートの設定 IE でスクロールバーが重なる原因は、(ほとんどの場合に)ビューポートの設定です。ビューポートとは、ページが描画される領域です。 ビューポートの設定を変更するときは、meta 要素を使って指定するか、CSS を使って指定します。 ビューポートの設定を変更することで、デバイスの解像度が変化したときに、ビューポートの大きさも変更することができるようになります。 言い換えれば、レスポンシブデザインにすることが
今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
jQueryで動的に作った文字列の幅を取得してみる | SRIA BLOG – 宮城県仙台市のWEBシステム開発・スマホアプリ開発
こんにちは！先日健康診断で脂肪肝と診断された橋浦です！ 先日Web案件で、文字列の幅を取得してwidthに設定したい場面がありました。 しかし、その文字列はjQueryで動的に生成していたため単純なwidth();などでは取得できず…。 結局2通り方法を試して、2つ目の方法でやっと上手くいったのでした。 今回は、せっかくなのでその方法を紹介してみたいと思います。 ① 文字数を数えて、数から判断しちゃう プログラミングに関してチンパンジー並の経験と知識しかない僕が浅知恵を絞って最初に思いついた方法です。 幅は取れないけど、consoleで調べたら文字列の内容は取得できている模様。 なら、文字数を取得して、その数を幅にしちゃえばいいじゃないッ！！！！！ ということで書いたソースがこちら。 DEMO
jQueryでparseInt()を使ってCSSプロパティの値を取得する｜BLACKFLAG
以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して jQueryでCSSプロパティの値を取得する方法を紹介しましたが、 「parseInt()」を使って同様にCSSプロパティ値を取得する方法も 結構必要になったりすることがあるので、メモ書きとして紹介してみます。 前回のサンプルと同じ内容でのサンプルで動作させてみると。。。 ＜div id=”box”＞とID名が付けられたボックス要素に CSSで幅「width」と高さ「height」を指定。 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示するサンプルの場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width: 300px; height: 100px; } ◆SCRIPT <script type="text/ja
REM vs EM – The Great Debate | Zell Liew
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/rem-vs-em. We hope to fix this soon!). One of the best practices to typography on the web is to use relative units like rem and em. The question is, which should you use? There's been a longstanding debate between rem supporte
どうでもいい雑記その1229 : 雑記帳 : rusica.net
Category: ゲーム関係, FGO関係 敬称 ベイスターズに年下の選手がめっちゃ増えてきてしまったけど、言及するときは「さん付け」で書くことに気を付けよう。知り合いでも何でもないし。 以前も書いたけど、有名人だからって敬称なしで表記するのがどうも個人的に好きになれない。政治家の人でも、スポーツ選手でも、芸能人でも「さん付け」表記を徹底したい。 Twitterで暴言吐いてる連中は銀河の彼方で星になってくれればいいのに ソシャゲやらの公式アカウントに対してが多いように思うんだけど、Replyの内容が酷すぎる連中が多くて吐き気がする。子どもなのかな？ 子どもであってほしい。まとも（に見える）社会人があそこに交じってる様なら頭痛い。 いや艦これ改について公式アカウント何か言ってんのかな、と公式アカウント見に行ったら宣伝Tweetに対してのReplyが酷いのなんの。吐き気がしたわけ。何とかなら
:last-of-type - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
[ ランダムな文字列作成 ] - Nippon Kaisho システムツール
■ What's This? ランダムな英数字の文字列を作成します。 適当な英数字の文字列を沢山作るのは意外と面倒なものです。 これで一気に作成します。 文字列に組み入れる要素、文字数、作成件数をそれぞれ指定し「作成」ボタンをクリックします。 もし数字だけの文字列なら「数字」をチェックします。チェックマークのついた要素で作成されます。 なお、このツールでは次の英数字は含まれません。（混乱を避けるための当社のデフォルト仕様です。） -> 小文字:loqv -> 大文字:IO -> 数字:10 ※ただし数字だけの場合は0から9まで全てが含まれます。 作成されたデータはテキストフィールドに表示されます。 コピーしてエクセル等に張り付けることができます。
【Font】超カワイイ丸文字フリーフォント［Arciform］がオススメです。
カワイイ丸文字に一目惚れ。 無料で利用できるフォント［Arciform］を紹介します。 アルファベットのみの英文フォントで日本語は収録されていませんが、ロゴなどに有効活用できそうです。 大文字 こちらは大文字のリスト。特に「S」や「Y」が個性的ですね。 小文字 同じく小文字のリストです。 この可愛さに心を奪われました。 アクセント記号 フランス語やドイツ語などで使われる特殊なアクセント記号つきの文字です。 シンボル 特殊文字もクオリティが高いですね。「¥」や「@」など、もうすべてがカワイイです。 個人的に超オススメの可愛いフォント。［Arciform］のダウンロードは下記サイトからどうぞ。 Arciform || Free Typeface : https://www.behance.net/gallery/30453085/Arciform-Free-Typeface
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
README.ja.md#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0for%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B
eky.hk
about:blank
Maintenance Page - Monavis
