【全ブラウザ対応 CSS3で作る「流れるテキスト」】 - Webサイト専門プログラマの言いたい放題HTML4にあった「marquee」タグを使うと、タグの中に書いたテキストを 右から左へ自動でスクロールさせることができます。 ホームページの「新着情報」などによく使われていますね。 しかし、「marquee」タグは元々、IE（インターネットエクスプローラー）独自のタグ。 そのため、現在のHTML5では非推奨とされており、将来的に廃止されるかも知れません。 そこで、CSS3のアニメーションの仕組みを応用すれば「marquee」タグと同様のことが 実現できます。 on-ze.com
【WordPressにヘッダー画像を組み込もう】 - Webサイト専門プログラマの言いたい放題
苦労して探してやっと見つけたテンプレート。 でもヘッダー画像が入る場所がありません。 WordPressのテンプレートを探していて、 希望通りのパーツが全部揃ったものが見つかる ことはまずありません。 オリジナリティを求めれば求めるほど、 テンプレートという「型が決まったもの」とは かけ離れていくからです。 少しヤル気を出してHTMLとCSSを学びさえすれば、 テンプレートに付いていないパーツを、 好きな場所に好きなレイアウトで組み込むことが できるんです。 今日のレッスンでは、PCとスマホで配置が換わる レスポンシブなヘッダー画像をテンプレートに 追加しました。 「テンプレートって触るのが怖い」 「どこをどう変えたらいいのか分からない」 それはどのページにどのテンプレートが使われて、 どのパーツがどのタグに対応しているのかという 着眼点を知らないからそう感じるだけなのです。 特定のテンプ
【2045年、シンギュラリティ到来で仕事がなくなる？】 - Webサイト専門プログラマの言いたい放題
近年、シンギュラリティ（技術的特異点） という言葉をよく見かけます。 コンピューターの人工知能（AI）が人間の 頭脳を上回る瞬間、という意味かと。 この、シンギュラリティに関する意見には 「今まで人間がやっていた仕事が奪われる」 という否定的な意見が多いようです。 一理ありますが、新たな需要が生まれると 私は思っています。 記事中で原田康徳氏が語っておられるように、 コンピューターと共生する時代を生きていく 私たちは、 コンピューターの良いところ悪いところを 知っておく必要があると思います。 そのためには、プログラミングを通じて 『コンピューターとは何か？』、 『アプリはどういう原理で動くのか？』、 といったことを仕組みから理解することが 大切だと思います。 www.atmarkit.co.jp
【描くのもプログラマーの仕事のうち】 - Webサイト専門プログラマの言いたい放題
エクセルは表を描くだけじゃなく、 図形や画像を挿入することができますが、 その中でも特に「スマートアート」は秀逸。 あらかじめ複数の図形を組み合わせて、 ビジネス資料などでよく使う階層図などを 選べるようになっています。 配色も、ある程度は用意された候補から 選べるので、そのまま使ってもOK。 でも、やっぱり自分の思うような表現を したいときは「100％ピッタリ」という ものは見つからないんですよね。 なので、図形だけをパズルのように ちまちまと組み合わせて絵を描くのも 捨てたものじゃないなぁと思います。 プログラマーって、プログラムするだけが 仕事じゃないしスキルじゃないんです。 ・パワーポイントでプレゼン資料 ・ワードでマニュアル作成 ・エクセルで設計図 ・PDFでダウンロードコンテンツの原稿 など、「人に伝えるためのモノ作り」も 大事な仕事なんです。 エクセルは表を描くだけじゃなく、
【CSSだけで見出しをデザインするスニペット50選】 - Webサイト専門プログラマの言いたい放題
CSSだけで美しいタイトルの装飾ができるスニペット集です。 www.nxworld.net あまりやり過ぎると「ウザッ！」と感じさせてしまいかねないのですが、 よく見かけるCSSデザインですね。 疑似要素とCSS3の使いこなしがポイントです。 一度使ってみて仕組みがわかると面白くなってくるので、 実務で「よし！使ってみよう！」となります。 その興味関心が、テクニックを自分のものにするコツです。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.lesson/ 【2】プログラミング講座CODEMY office-ing.hatena
【iPhone（iOS Safari）の独自仕様】 - Webサイト専門プログラマの言いたい放題
拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする – wevdev iPhone（iOS Safari）では、フォントサイズが実質16pxより小さい フォームにフォーカスを当てた時に、自動的に画面が拡大するという 独自仕様があります。 「文字が小さいと入力し辛いでしょう？ だから拡大してあげますね。」 という配慮なのでしょうけれど、 フォーカスを戻しても拡大前の状態に戻らないという困った仕様です。 OSによってブラウザの挙動が異なるのは仕方がないことですが、 ウェブ制作者としては迷惑なことが多いです。 特定のOSやブラウザだけのために、 作り方を別にしないといけないからです。 スマホのカメラとか概観とか、 そういうところで独自性を発揮するのは存分にやってもらいたいです。 でも、ブラウジングの仕様は統一して欲しい。 シェアの大きいデバイスほど、「右へ倣え」を
【WordPressにも共通するCSSカスタマイズの王道】 - Webサイト専門プログラマの言いたい放題
CMSのカスタマイズは、難易度に応じてできることとできないことが分かれます。 テンプレートやプラグインが用意してくれるメニュー画面を操作することで かなりのカスタマイズが叶います。 しかし、それらは全て他人が用意した「想定」の範囲内でしかありません。 他人が想定していない「私の」理想とするカスタマイズを形にするためには ・使っているCMSの仕組みを学ぶ ・HTMLやCSS、PHPなどを学ぶ などといった努力が欠かせません。 でも、皆、仕事を抱えています。 じっくり腰を据えて勉強するには、それなりの覚悟は必要でしょう。 当然、なるべく効率的に学びたいと考えますよね？ 学ぶことなんて腐るほどあるのだから時間は無駄にしたくないはずです。 「何からやったらいいのか？」 それはHTMLとCSSです。 JavaScriptとかPHPはその次です。 HTMLとCSSはプログラミングに共通する 基本的な作
【横並びのボックスの高さを揃える方法】 - Webサイト専門プログラマの言いたい放題
divタグなど、CSSのdisplayプロパティがボックスタイプに分類されるタグは 基本的に縦に並びます。 それを横に並べたいとき、CSSで float:left; を使うのは常套手段ですが、 float には横に配置するという役目しかありません。 そのため、並べたボックスの高さが違うと下の段にあるボックスを 押し下げてしまい、綺麗に並ばないことがあります。 そこで２つの解決法をご紹介します。 ＜方法１＞ float を使わず、display: table-cell; を使う。 ＜方法２＞ jQueryのプラグインを酌み込んで一番高いボックスに自動で高さを揃える。 ozpa-h4.com どちらが良いというものではありません。 どちらも本質的には同じことです。 table-cellはテーブルタグの td と同様の描画（レンダリング）方法を ブラウザに指示する役目があります。 td は「セル
【長いCSSをスッキリ圧縮するツール】 - Webサイト専門プログラマの言いたい放題
とてもよく使うCSSの自動整形ツールです。 tools.maxcdn.com CSSが長く複雑なサイトは1行に整形、 CSSが短いサイトは通常の整形、 というように選択できます。 ブラウザの「お気に入り」に入れて愛用しています。 こんなときに便利 少し複雑なサイトや、規模の大きなサイトの場合、 どうしてもCSSファイルの中身が長くなりがちです。 ファイルが長くなるということは、 作業効率の低下を意味します。 また、焦りが間違いを生むこともあります。 人間ですからね。 この自動整形ツールは、 「ここからここまで」 と決めた範囲をコピーしてブラウザに貼り付けて ボタンを押すだけです。 ある程度コーディングしたら自動整形して 見通しを良くしてから、 また次のコーディングに進む。 という進め方をすると効率よく、 精度を落とすことなくサイト制作ができます。 ↓↓↓「自分で作れる力」を身につけたいあな
【WordPressでオリジナルサイトを作る】 - Webサイト専門プログラマの言いたい放題
HTMLの基礎からしっかりと継続的に学んでいらっしゃる生徒さんが、 いまWordPressでオリジナルデザインのサイトを作る段階までステップアップしています。 ・固定ページと投稿ページの違いと用途 ・カスタムテンプレートの作り方 ・ページのURLとスラッグの関係 ・テンプレートの優先順のルール ・基本的なテンプレートタグの使い方 など、WordPressを使うだけの立場ではなく 「仕事としてお客様のサイトを制作できる」 ことを目指して取り組んでいます。 WordPressで制作をする場合、PHPというウェブ言語を避けて通ることはできません。 PHPは本格的なプログラム言語なので、HTMLの経験者でも最初は苦手意識を持つことが多いのですが、 オリジナルサイトの制作を少しずつ進めていく中で、 無理なく段階的にPHPに慣れていけるようにレッスンをしています。 ↓↓↓「自分で作れる力」を身につけた
【WordPressのカスタムフィールドで並び替える】 - Webサイト専門プログラマの言いたい放題
ご相談を受けたのでテスト実装しました。 イベント紹介の地域ポータルサイトを想定し、 開催日または終了日が近いもの順に検索できる ページです。 通常、WordPressの記事ページ（投稿ページ）は 投稿した日付の順番に表示されますが、 記事ページをイベント案内に使う場合は、 投稿日ではなく、 ・イベントの開催日順に並び替える ・終了したイベントは表示しない というようにしなければ使い勝手が悪いです。 そこで、カスタムフィールドを使って 開催日や終了日、参加料や場所などといった 独自の入力欄を記事ページに追加して、 それらを並び替えに使えるようにします。 例）開催日が近い順にソート（終了したイベントを除く） カスタム投稿タイプ名：event カスタムフィールドの定義名：event_date カスタムフィールドの書式：yy/mm/dd テンプレートの実装： $q = new WP_Query(a
【WordPressでCSSとJavaScriptを外部リンクする】 - Webサイト専門プログラマの言いたい放題
WordPressの投稿エディタにはHTMLだけでなく CSSやJavaScriptのコードを直接記述することが できます。 しかし投稿エディタは本来テキストや画像など 記事の内容を入れるものなので、改行が自動で <br>タグや<p>タグに変換されてしまいます。 そうすると、せっかく書いたCSSやJavaScriptが 構文エラーになってしまい動きません。 そんな場合、CSSやJavaScriptを別々のファイル に分けておいて、<link>タグや<script>タグで 外部リンクさせることができれば解決します。 普通のHTMLで作ったサイトの場合なら、 CSSやJavaScriptをリンクさせたいページの HTMLファイルを開いて、 <head>～～～</head>の中に直接<link>タグや <script>タグを記述すればOKです。 WordPressの場合、多くのテーマ（テンプレー
【レスポンシブに購入ボタンを配置するベストな方法】 - Webサイト専門プログラマの言いたい放題
ランディングページの購入ボタンとか、 ネットショップのカートボタンとか、 「画像の上のちょうどこの場所に配置したい」 ですよね？ ここはもうデザインでそう決めてあるわけですから、 1pxもずれないように配置したいものです。 でも、pxで場所を設定してしまうと、 スマホで見たときにボタンの位置がついてこないので ずれてしまいます。 そんな場合は、pxを％に換算した数値を CSSで指定するというアプローチが有効です。 タグの位置は、CSSの top や left プロパティに 数値で指定をしますが、単位を％にすると、 画面の横幅（正確にはタグを囲むタグの横幅） に対するパーセンテージという意味になります。 だから、パソコンで見たときに px で指定するのと 同じ場所になるように％に換算しておけば、 そのままスマホで見ても同じ位置がキープされます。 「どうやって換算するの？」 と思われるかも知れ
【LPや画像の多いブログに必須。速度改善lazyLoad】 - Webサイト専門プログラマの言いたい放題
画像がブラウザの視野に入る直前まで 読み込まれないように抑制することで、 ページの読み込み時間を改善。 ＜仕組み＞ ブラウザのスクロールが発生するたびに JavaScript（jQuery）でスクロール量を検出。 画面の一番上から画像のタグまでの距離と、 スクロール量を比較して、画像がブラウザの 視野に入ったかどうかを調べるため。 視野に入っていれば、HTML5の data 属性に 設定された「本来の画像ファイルのパス」を src属性に設定。 src属性に画像ファイルのパスが設定されると ブラウザはその画像を読み込みにいく。 以上の仕組みによって、 まだ画面に入っていない画像は後から読み込み される（遅延ロード）ことになるので、 ページが表示されるまでの時間短縮につながる。 cly7796.net ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン
【CSS3でマウスオーバーの簡易アニメーションエフェクト】 - Webサイト専門プログラマの言いたい放題
CSSでこういうエフェクトが表現できるということも踏まえた ウェブデザインができると、お客様に喜ばれるかも。 ※以下のコードが抜けていました（訂正） #post:before { content:''; } どうしてもデザインって、『静止画』のイメージがまだまだ強いようですが、 最近のユーザーさんって、結構「動き」のあるサイトをよく見ておられるので、 言葉ではいわなくても潜在的なニーズとして「エフェクト」を期待している 場合があるんじゃないかと思います。 あまり複雑なエフェクトになると、プログラミング的な要素が強くなるので、 苦手なデザイナーさんは積極的に提案するのを避けるのかも知れませんが、 ウェブプログラマーから見ると、 ちょっとCSSの勉強を一歩進めればもっといい提案ができるのになぁ・・ と思うことがあります。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMY
【ホームページのドメイン変更で絶対忘れてはならないこと】 - Webサイト専門プログラマの言いたい放題
ドメインとは、ホームページのアドレスの一部です。 例：ホームページのアドレスが http://oldpage.com/ の場合、 oldpage.com がドメインです。 もし、ホームページを公開してから後でアドレスを変えたいと思ったら、 新しいドメインを取得して切り替えます。 そうするとホームページは新しいアドレスに変わります。 旧：http://oldpage.com/ 新：http://newpage.com/ 新しいアドレスで見れるようになるので、一見するとこれでOKに思えます。 が、そうではありません。 検索エンジンは既に古いアドレスであなたのホームページを覚えています。 また、よそのサイトからリンクを張ってもらっていた場合、 古いアドレスに向けてリンクされていることになります。 どちらにしても、古いアドレスの情報がインターネット上に残ったままになるので、 新しいアドレスはインタ
【本の難しさ】 - Webサイト専門プログラマの言いたい放題
いかに簡潔にスパッとわかるような 表現ができるか？ が難しいです。 文章だけじゃなく絵や図表も上手く 織り交ぜないと、読者はしんどい。 でもホントに伝えたい大事なことは しつこいぐらい何度も表現を変えて 書いておきたいという欲もあります。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.lesson/ 【2】プログラミング講座CODEMY office-ing.hatenablog.com ⇒動画と個別添削で学べるオンラインレッスン 自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が 業種・経験・地域を問
【検索エンジンを意識したワンランク上のコーディングをしよう】 - Webサイト専門プログラマの言いたい放題
ブログの新着記事一覧など、リスト（箇条書き） の意味を持つ部分はHTMLの<li>タグで記述する ことが多いかと思います。 しかし、 ”<li>には箇条書きという以上の意味はない” ので、 検索エンジンにはただの文字の羅列にしか見えません。 そこで、定義リスト（<dl>,<dt>,<dd>タグ）を 使うと、より意味を明確にすることができます。 例えばこんな場面です。 2016/10/15 新着情報のタイトル 2016/10/14 新着情報のタイトル これを<li>タグで書くと、 <li>2016/10/15 新着情報のタイトル</li> <li>2016/10/14 新着情報のタイトル</li> となりますが、検索エンジンには日付と タイトルの区別がつきません。 どちらも「文章の一部分」に見えます。 一方、定義リストは、 <dt>タグで見出しを表し、 <dd>タグで見出しに対応する内容を表
【JavaScriptで最大値を持つ配列要素を探す】 - Webサイト専門プログラマの言いたい放題
JavaScriptを勉強中の生徒さんと 週末の晩にレッスンをしました。 今回のレッスンは、５問４択の質問の中で ユーザーが選択した回数が最も多かった 選択肢をプログラムで見つけ出す考え方。 配列 count に、各選択肢が選ばれた回数を 数えたものを代入しておきます。 count[0]・・・選択肢１が選ばれた回数 count[1]・・・選択肢２が選ばれた回数 count[2]・・・選択肢３が選ばれた回数 count[3]・・・選択肢４が選ばれた回数 この中から最大値を求めるには、 数学ライブラリ Math の max 関数を使い var max = Math.max(count[0],count[1],count[2],count[3]); とします。 これで max には、count[0]～count[3] のうち最大値が入ります。 本当に知りたいのは最大値が [0]～[3] のどれに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPressの本、執筆日記】 - Webサイト専門プログラマの言いたい放題
