普段コーディングしていて、実はform周りはあまり使う機会がありません。WordPressとかだと、プラグイン使っておしまいですからねぇ。。。 で、このformが実技に毎年出ています。内容はほとんど同じなのでこれを機会に勉強してしまおうというのが今回の記事…

少なくとも半年前（2016年4月ごろ）には公式ディレクトリからなくなっていた模様 クライアントのサイトをメンテしていたところ、Lightbox Plus Colorboxが公式ディレクトリで検索しても出て フォーラムで「見当たらないよー」という声がありました。 Lightbo…

UX論は間違っているんじゃなくて時代遅れなんじゃないの？という疑問 - architecture_database そもそもUXって、「時代遅れになる」ような代物じゃないだろうと。「事業計画の立案は時代遅れになる」なんてことを言っているようなものである。UXってのは「お…

タイルレイアウトをfloatで実現するにはタイルの高さをそろえるためにheightを固定するとかしなきゃいけない。 WordPressみたいに記事からタイトルとサムネイルを取り出して並べる場合はタイルの中身がはみ出すというトラブルによく遭遇する。何でそんな縦に…

プロが実践するモダン CSS の書き方入門テクニック20選まとめ - PhotoshopVIP 1. 縦方向のマージン幅 他のプロパティとは異なり、縦方向のマージン幅はうまく効きません。 「うまく効かない」ではなく「相殺される」「重複する」と訳すべきでしょうね。 横方…

もっとも簡単な方法をメモ 普通に調べるとコマンドラインがどうたらこうたらとか難しい話が出てきたり、Poeditのバージョンが上がってUIが少し変わっていて戸惑ったので忘れないようにメモ。※以下、WordPressテーマは"ki-orion"という名称を例にしています。…

別に読めなくても恥ずかしくはない。 Loading... どちらかというとタグではないものをタグと呼んでいるあたりが気になるかな。 あとどこから手に入れた知識かは知らないけど読み方は一部を除いてあまり気にする必要はないと思う。 a アンカーは正式名称。普…

少し前に話題になったWindowsの游ゴシック、游明朝が汚い（かすれる）という問題について、表示をまともにするための方法を検討することにしました。 これまでの経緯 Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？ | Cherry Pie Web Wi…

ここ数日なんか流行っているので悪乗りしてしまおうという魂胆。 http://cpg.hatenablog.com/entry/2016/06/30/193755 http://d.hatena.ne.jp/shi3z/20160701/1467330446 主要でもないプログラミング言語200種を一行で解説 - Qiita http://daruyanagi.jp/ent…

BEMの利点と落とし穴 BEMは使用箇所が明確で、何に使っているのかがすぐ分かって、関連するほかのクラスもすぐに見つけられて、そのため保守性が高い。 見た目は確かに醜いけれど、それ以上に利点が大きい。使わない手はない。 とはいえ、それなりに経験を積…

これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス 上のリンク先で言われていることは大体みんなやってきたことなんじゃないかと思います。一人でやる案件なら別に意識するまでもなくやれるでしょうが、複数名でやると簡単…

(久しぶりだとテーマのつくり方を忘れてしまう) 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コーダーにとっては分かりやすい…</link>

概要 BootstrapやFoundationを参考にしながら（パクりながら、ともいう）CSSフレームワークを作りました。 詳細はKomitsuboshi-cssにまとめています。GitHubでも公開中。 ある程度デバッグもできたので公開しましたが、利用する際はベータ版くらいの感覚で使…

ようやく目的の情報が見つかったのでメモ。元情報はこちら。 画像の幅を指定し、親要素のwidthに代入し、さらに画像にあてた説明文を画像のaltとして入れたい。 - ハリマカツユキ・旧技術ブログ やりたいこと 量産を前提とする静的なサイトで、画像にキャプ…

タップ（クリック）で開閉するメニュー - Webデザインの日々日記の応用で2段のメニューを作ったのでメモ。 HTML <nav class="gnav"> <div class="toggle burg"> <span class="burg-inner"></span> </div> <ul class="menu1"> <li class="toggle2"><span class="toggle2-inner">menu1</span> <ul class="menu2"> <li><a href="#">menu1-child</a></li> <li><a href="#">menu…</a></li></ul></li></ul></nav>

レスポンシブデザインの設計では、画像の元サイズより画面幅が大きいときは元サイズで、画像の元サイズより画面幅が小さい場合は画面幅まで縮小して表示する、という動作にすることがよくあります。CSSで書くとこんな風に。 img { width: auto; max-width: 1…

https://tarahako.com/wordpress-customize-php せやな、と。 僕の場合はPHPを勉強する入り口としてWordPressを選んだクチ。それなりに使えるようになってテーマをスクラッチで作れるようにもなった。ただしPHPはまだまだ。 そもそも、PHPを勉強してもWordPr…

ヘッダー、フッター、サイドバーはまとめて管理したい HTMLのみで作られた静的サイトでは、ヘッダー・フッター・サイドバーといった共通部分に変更を入れる際、すべてのページを変更しなければならないため面倒。 以前かかわった大規模案件では（サイト設計…

静的ページでWordPressの情報を取り込む 前提 サーバーがhtmlもphpとして扱ってくれるように設定してあることが必要。 .htaccessファイルに AddType application/x-httpd-php .html を書き込むことで機能することが多い。php.iniの編集を必要とする場合もあ…

以前はajaxzipを使っていたものの、製作元が「新たに設置するときはYubinbangoをお勧めします」と出ていたのでメモ。 こちらは古いほう。Google Codeが廃止されたため跡地化しています。 Google Code Archive - Long-term storage for Google Code Project H…

事例 大きくは本社-支社-下請け（派遣など）の3階層での業務。 「下は考えるな」という方針。 支社の担当者にも「自分で考えない」が徹底されている。 一方、本社側でも担当する全員の思考が統一されているわけではない。Aが言ったことをBが後で否定すること…

何度も同じ話がわいてくるなーと思いつつ。 おおむね、「もう駄目だ」の根拠というのが JimdoとかWixとかタダでそこそこのテンプレで“ホームページ”が作れるサービスがあって、多少パソコンが使える人なら簡単なサイトを作ることができる。 ただの“ホームペ…

t2なんとか CPUクレジットをためてドカンとできる。 t2.microで1500PV/hくらいはさばける。（WPで） 1サーバーに100ドメインくらいさばける クレジットを使い切るとCPUの10％くらいまで処理速度が落ちる。 使い切った状態でAMIMOTOを使っているとどうなるか …

各種条件 ハードウェア：Mac Book Pro 2011 early 13inchモデル（いわゆる地雷モデルですね。幸いうちは不良は出ませんでしたが） Bootcamp バージョン4.0 Windows7から10にアップデート 不具合メモ （多分）Bluetoothは使えない これはアップデートする前に…

世の中SublimeTextが流行っていますが、いまいち使いこなせていない私はBrackets派です。 プラグイン入れるにもコマンド入力不要なんで楽です。 ちなみに使い慣れたDreamweaverの文字色に合わせるため、機能拡張から"Dreamweaver Theme"というテーマを入れて…

検索して出てきた方法を使ったら複数のカテゴリーに属しているときはうまく動くけど、一つのカテゴリーにしか属していないときにはうまく動かない、というかエラー吐いたりして困ったので頑張ってみた。 条件 single.php 投稿記事の下に「同じカテゴリーのそ…

動画へのリンクを画像で用意し、クリックするとポップアップで動画が再生される、というやり方。 Use Secondary Lightbox:にチェックを入れた上で、 <a href="http://www.youtube.com/embed/なんとかかんとか" class="lbp_secondary"><img src="画像ファイルのURI" alt="動画へのリンク" ></a> とまあ、こんな感じで貼り付けるわけだけど、ここでYoutubeへのリンクURLが重要。 Youtubeの動画ページの…

キャッシュ周りのトラブル、特にフォームに前の人の書き込んだものが表示されてしまう、などの話があるため、サーバー側のキャッシュについては可能な限り避けてきましたが、そうも言ってられない案件があったので導入。 導入前に画像の軽量化、CSS化、リク…

スマホ対応案件が増えてくるにつれ、ハンバーガーメニューを作らなければならない場面が増えてきました。 タップするとメニューが開く、という条件だけならCSSだけでも可能（:hoverで開くように指定すると、スマホではタップで動作する）ですが、閉じるには…

条件 ルートフォルダの下にスマホ用のサイトとして/sp/フォルダを作り、スマートフォンからのアクセスは/sp/フォルダへリダイレクトさせる。 パソコンで/sp/フォルダ内のページにアクセスしてきた場合はPCのほうへリダイレクトさせる。 PC用のサイトのURLは…