Profile

Cover photo
井上みやび子
Worked at すぐ使える株式会社
Attended 御茶ノ水女子大学
Lives in 東京都
20 followers|134,102 views
AboutPosts

Stream

井上みやび子

Shared publicly  - 
 
Perl で JavaScript / jQuery 風に HTML DOM を操作する
http://hole.sugutsukaeru.jp/archives/839

何か方法あったっけ?と思って調べた結果。
#Perl #JavaScript #jQuery #HTML #DOM

 ·  Translate
Perl で JavaScript / jQuery 風に HTML DOM を操作できるモジュール調査結果。Perl ユーザ向け。 既存のHTMLファイルをちょっとだけ書き換るために、Perl で JavaScript または jQuery...
1
Add a comment...

井上みやび子

Shared publicly  - 
 
レスポンシブWebデザインの表
#responsive #table

レスポンシブWebデザインで表を作るのは結構難しい。
PCに合わせるとモバイルで見にくいし、モバイルの1行でも収まる内容で作ると、PCで見た時に間延びする。

HTMLを個別に手書きしている場合なら何とでもなるが、プログラムで機械的に行を繰り返し出力している場合、表をPC用とモバイル用に2つ出力するのは結構イレギュラーな処理なので、やりたくない。

■解法1
見出し列1つ、内容列1つの表の場合は、PC専用なら

<tr><th>...</th><td>...</td></tr>

と書くところを、<dl> リストを使って

<dt>...</dt><dd>...</dd>

とすれば、幅の広い場合は、dt と dd を横並べ、幅が狭い時は縦に積み上げる事でまあまあの見た目の表にすることができる。

それがこの↓ページで使っている方法。
http://sugutsukaeru.jp/sample/356-about-management-tool/webdir/index-responsive.html

■解法2
一方、1行の列数がもっと多い場合はそう簡単にはいかない。よく見るのはテーブルの周りにスクロールを付ける事だけど、「見にくい」という問題は解決していないよね。特に、テーブル内にボタンなどの機能がある場合は、テーブルを横にスクロールしている時にうっかりボタンに触ったりしてしまう危険もある。

という事で、私が行き着いた解決は、モバイル用には行を複数に分ける事。PCでは見せない行、モバイルでは見せない行をそれぞれ作って、PCでは1行に収まるものをモバイルでは2行にする。

概念としてはこんな↓感じ。

<tr class="pc"><td>列1</td><td>列2</td><td>列3</td><td>列4</td></tr>
<tr class="mobile"><td colspan="2">列1</td><td colspan="2">列2</td></tr>
<tr class="mobile"><td colspan="2">列3</td><td colspan="2">列4</td></tr>

この方法で作ってあるのが、例えば以下のページ。
http://sugutsukaeru.jp/sample/219-new-icon-blog/admin/admin.cgi
 ·  Translate
1
Add a comment...

井上みやび子

Shared publicly  - 
 
サイズの違う画像を幅か高さで揃えて並べるCSS
http://sugutsukaeru.jp/support/401/ #css

結構単純な話なのですが、検索して来る方が多いようなので改めて書いてみました。

最近 Adobe CC を契約したので、画像作るのにハマっています。コード書くのは5分だけれど、画像を作って説明を書くには5時間かかる。うーん。

 ·  Translate
形(縦横比)の違う画像を、幅か高さで揃えてホームページ上に並べる方法。CSSのサンプルと解説。
1
Add a comment...

井上みやび子

Shared publicly  - 
 
CLEditor のプラグイン開発。自社製品「すぐ使えるCGI」に機能追加。ほくほく。
http://sugutsukaeru.jp/sample/214-wysiwyg/admin/admin.cgi?s=2&m=0

CLEditor は無料でそこそこなんでもできて、追加開発が楽という、私好みの #WYSIWYG html エディタ。

#cms #すぐ使えるCGI #CLEditor

 ·  Translate
1
Add a comment...

井上みやび子

Shared publicly  - 
 
Webサイトのデザインを変えずにPureでレスポンシブWeb化した話
http://hole.sugutsukaeru.jp/archives/763

#PureCSS #レスポンシブWeb

最近入れ込んでいる Pure を使ってやっと自社WebサイトをレスポンシブWeb化。
大体どんなことをしたかの話。

- モバイル用トグルメニュー(隠れるメニュー)の計画
- グリッドデザインに基づいて、レスポンシブな領域の配置(Pureの機能)
- モバイル端末では隠してしまう要素の調整(大きな画像、繰り返しの常設メニュー)
- ちょこちょこした表示調整
 ·  Translate
1
Add a comment...

井上みやび子

Shared publicly  - 
 
Pureの使い方(CSSフレームワーク)
http://sugutsukaeru.jp/support/392/
とりあえず急いで Pure ってどんな?という事を知りたい人向け。

Pure はシンプル・軽量で覚えなければならない事は少ないですが、「モバイルファースト」のレスポンシブWebデザイン設定に慣れてないと戸惑うのでそのあたりの説明と、Bootstrap を使っていた人なら多分欲しくなる 「.hidden-xs」 、「.visible-desktop」的なクラスを設定する方法など。

#CSS #フレームワーク #レスポンシブWeb #PureCSS #モバイルファースト #MobileFirst
 ·  Translate
ホームページ更新ツール(CMS)「すぐ使えるCGI」のサポート情報。
1
Add a comment...

井上みやび子

Shared publicly  - 
 
Firefox の開発者ツールで CSS のルールの一部が表示されない場合がある件
https://support.mozilla.org/ja/questions/1110326#answer-859120

#Firebug の開発が終わったので、 #Firefox に組み込みの #developerTools を使うようになったのだが、#CSS のルールが一部しか表示されないページがあるのに気付いた。

Firefox のサポートフォーラム(上記URL)で指摘されている通り色々な原因があるらしいが私のケースは文字コード(エンコーディングスキーム)が原因だった。

CSS ファイル内に正しく @charset を宣言してあっても、これが HTMLページの文字コードと異なると font-family のルール表示が文字化けするし、表示されなくなるルールがある。全く同じ HTMLページで文字コードだけを CSS ファイルの文字コードに一致させると期待通り表示された。
 ·  Translate
1
Add a comment...

井上みやび子

Shared publicly  - 
 
「正しい情報を担保する努力が圧倒的な収益性の前に負け続けることについては、意外と指摘され語られることも無かったように思う」

http://bylines.news.yahoo.co.jp/yamamotoichiro/20161202-00065073/
 ·  Translate
先日来、炎上が続くDeNAのキュレーションサイト群「DeNA Palette」で、ファッション系の「MERY」以外非表示という発表がありましたが、カラクリを知ると問題は根深いように感じます。
1
Add a comment...

井上みやび子

Shared publicly  - 
 
インラインフレーム内のアンカーまでスクロール 【 JavaSciprt 更新】
親ページのアンカーを読み取って、子ページをスクロールする方法。
http://sugutsukaeru.jp/support/320/ #CMS #すぐ使えるCGI #JavaSciprt

一覧の2ページ目以降にもアクセスできるようになりました。ただ、「すぐ使えるCGI」(お知らせ更新ツール)で使っている場合はページとアンカーの対応が記事の追加とともに玉突きでどんどんずれていくので、Perlmalink としては不適当というのがやるせない所。

 ·  Translate
インラインフレーム(iframe、アイフレーム)のあるページにアンカーを付けてリンクし、iframe 内のページをアンカーの位置までスクロールさせる方法。JavaScript を使います。
1
Add a comment...

井上みやび子

Shared publicly  - 
 
インラインフレーム内の画像をライトボックス表示
http://sugutsukaeru.jp/sample/397-responsive-lightbox/

#すぐ使えるCGI #cms #lightbox #iframe

色々試行錯誤したけど、親ページ側から確実に iframe 内のコンテンツを処理するのはかなり難しい。みたい。(なので未完成。)

親ページだけ再読み込みされたり、一旦フォーカスを外れたウィンドウに再び戻ってきた時、イベントが発火する/しない、子フレームのコンテンツが取れる/取れない、親子のロード完了のタイミング、etc...。

jQuery でなくてネイティブ JSを使う方が確実なんだけど、そうするとコードのブラウザ互換性の問題が出てくるのでコーディングがエラク面倒くさくなる。もうちょっと本腰入れて取り組まないと確実になりませぬ。

 ·  Translate
1
Add a comment...

井上みやび子

Shared publicly  - 
 
ディレクトリを csv add する
http://hole.sugutsukaeru.jp/archives/789
そんなに目を見張る方法ではないですが、ディレクトリを再帰的にまるっとさくっとcvs add

#cvs #recursive
 ·  Translate
ディレクトリを recursive に cvs add する方法。 私はいまだにバージョン管理システムとして CVS を愛用しております。 で、CVS...
1
Add a comment...

井上みやび子

Shared publicly  - 
 
モバイルファーストとは何ですか?
http://sugutsukaeru.jp/support/391/

CSS開発を行う時に限り話を単純化し、従来のPC優先開発と「モバイルファースト」で何が違うのかを書きました。単純に言うと、メディアクエリー設定の順番が違う、とそういう事です。

物を整理するのが苦手な私の頭だと、「モバイルファースト」の方がやりやすいです。スーツケースに物を詰めていくのと、スーツケースに詰めたものを取り出すのとどちらが簡単かという問題です。ちなみに前者がPC優先、後者が「モバイルファースト」です(独断)。

#CSS #MobileFirst #PureCSS #レスポンシブWeb #モバイルファースト
 ·  Translate
1
Add a comment...
Story
Tagline
へっぽこ Perl プログラマ 兼 なんちゃって経営者、西日通訳修行中 Ingeniera informática y empresaria
Introduction
すぐ使える株式会社 という会社で「すぐ使えるCGI」とか「すぐ使えるダミーテキスト」とか「すぐ使える多言語対応エディタ」とかを作っています。

Soy ingeniera informática y empresaria como autónoma.
Bragging rights
立ち机で仕事してます。Trabajo en pie.
Education
  • 御茶ノ水女子大学
    1995
Basic Information
Other names
Miyabiko INOUE
Work
Occupation
ITエンジニア
Skills
Perl、Webシステム、データベース
Employment
  • すぐ使える株式会社
    代表取締役
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
東京都
Contact Information
Work
Phone
+81-50-5532-1616
Email
Skype
sugutsukaeru
Address
東京都杉並区西荻北3-32-11-3F-K