Web制作のしっかりとしたスキルを身につけたい、スキルアップのきっかけが欲しい人にオススメの本来年に備えて、Web制作のしっかりとしたスキルを身につけたいと考えているWeb制作者・クリエイターの人にオススメの本を紹介します。 Web制作のコンテンツ・デザイン・コーディングの知識やテクニックを単に学ぶだけでなく、その理由や考え方もしっかり分かります。 本書はページ制作におけるコンテンツ設計、デザイン、コーディング、運用・改善・最適化まで、Web制作に携わる幅広い人に役立つ内容となっています。 ランディングページに絞られているためか、内容はどの章も非常に濃い一冊です。
tableをレスポンシブでも破綻しないようにする簡易的な1手法 – WEBUTUBUTU
レスポンシブテーブルテスト レスポンシブ設定は便利なものです。1ソースでいろいろな幅の画面(=デバイス)に対応できますから、サイトがブログであればメリットがあります。 WordPressにもレスポンシブ設定が施されているものもありますし、自分でカスタム、あるいは一からテーマ作成すれば同様に利用できるでしょう。 もちろん、WordPressにこだわる必要もなく、何らかの手段で画面サイズをブレークポイントとして可変可能であれば成立します。 が、これは構造部分だけの話で、HTMLタグの種類によっては実現の難しいものもあります。 今回は代表的なtableについて少々。なお、特に目新しい方法ではありませんので、「その程度か」というレベルです。 [2015.1.1追記:「記事に手を入れずに対応する方法」を追記] [2015.1.1修正:コード内のscrollをautoに変更] 簡易的な方法でtable
レスポンシブのテーブルをcssで作ってみた（2列のみ）STINGER5対応
主婦があれこれ日常のことや趣味のサイト作成のことなどを節操なく書き綴っているブログの運営です。また、一歳半になる娘のお世話も重要な仕事であります。 PCでの表示 PCではおなじみの表示です。 スマホでの表示 スマホではこのように1列になり、幅の狭い画面でも見やすくしました。 HTML部分 <div class="res-table"> <table> <tr> <th>左側1</th> <td>右側-1</td> </tr> <tr> <th>左側2</th> <td>右側-2</td> </tr> <tr> <th>左側3</th> <td>右側-3</td> </tr> </table> </div> css部分 /*-------------------------------------- スマホでの表示 --------------------------------------
スマートフォンのtable要素をレスポンシブにできない問題 | 高橋文樹.com
この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。 ワンソースで済む Googleが推奨してる 駄目だなーと思うところはこんなです。 PHPのように動的なサイトの場合、非表示の要素でも演算対象になる 古いAndroidブラウザが怖い まあ、Webプログラミングの場合は携帯サイトを作っていたわけで、スマートフォンだからどうこうということでもないかなと思います。 ちなみにこのサイトは一応スマートフォンとPCで表示が変わりますが、CSSのメディアクエリはほとんど使ってなくて、bodyタグにデバイス種別のクラスをつけることで対処してます。Nginxのプロキシキャッシュはデバイスで分けてます。 さて、レ
CSSのみでレスポンシブ対応したテーブルデザインを作る３つの方法 | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
CSSのみでレスポンシブなテーブルデザインを。
サンプルページ まずはサンプルから。 内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。 >>REDLINE MAGAZINE | レスポンシブ対応テーブルサンプル ネタ元のCODEPENページ。 >>A Pen by Captain Anonymous ソース 自分とこのサンプルからソース部分を。まずはhtmlソース。 <table> <thead> <tr> <th>イベント名</th> <th>開催日</th> <th>場所</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td data-label="イベント名">なんたらイベント</td> <td data-label="日時">2015/04/08(水) </td> <td data-label="場所">大阪府大阪市どこどこ</td> <td data
表の各列幅を均等にする
HTMLで作成したテーブルの列幅が均等になるよう指定するには、CSSのtable-layoutプロパティを使えば良いだけなのでとても簡単です。すべてを均等に配分できるだけでなく、特定の列幅だけを任意のサイズに固定した上で、残りの列幅を自動で均等に割り振ることもできて便利です。 そこで今回は、HTMLのtable要素で作成した表の列幅を、CSSを使って自在に指定する方法をご紹介いたします。 【目次】 幅を計算しなくても自動で均等にできるtable-layoutプロパティ 均等配分例1：テーブル全体で均等な列幅を指定 均等配分例2：特定の列は横幅を固定し、残りに均等な幅を指定 table-layoutプロパティの値は、自動(auto)か固定(fixed)か テーブルの列幅を均等にするtable-layoutプロパティの書き方 備考：特定の列だけ横幅を固定したい場合の注意 列の均等表示例と具体的
Webディレクター必見！Webサイトの改善でチェックすべき4つのポイント | creive【クリーブ】
Webサイトは、構築して終わり・・ということはなく、常に改善していかなければなりません。 課題を見つけ、PDCAを上手く回しながら、目標の達成に向けて最適な解を見つけていく必要があります。 特にWebディレクターは、サイトの改善やグロースについて常に考え、エンジニアやデザイナーと連携し、目標を達成していかなければなりません。 しかし、Webディレクターとして働き始めた人は、実際にどうやってWebサイトを改善すればよいかわからない人もいるかと思います。 そこで今回は、Webサイトの改善点や数値の把握に役立つ分析ツール「Ptengine」を使って、webサイトの改善において最低限チェックすべき4つのポイントを説明します。 前提：まずは目標を設定する 課題を見つけ、PDCAを回しながら改善を行うためには、まず目標を設定しなければなりません。 例えば、企業サイトであればお問い合わせ数や資料DL数、
[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法 | ヨッセンス
こんにちは。WordPressの記事も、たま～には書くヨス（プロフィールはこちら）です。 今現在（2013年10月）、WordPressのプラグインは22個入っています。プラグインはやっぱ少ない方が、サイト表示が軽くなるのでちょっとずつ減らしていきたいと思っています。超長期的にｗ。 さて今回は、全ページに自動でOGP情報を書き出してくれるコードを紹介します! OGPってなに? さっそくですが、「OGPってなに?」というところからお話します。だって、ネット業界に7年もいた私も一年前まで知りませんでしたから。 そうなんです。このOGPという言葉はそんなに古くから言われていた言葉ではないんです。というか必要もなかったんです。Facebookを始めとしたSNSが大流行する前までは。 SNSで表示したい情報を載せるとこ OGPは「Open Graph Protocol（オープン・グラフ・プロトコル）
![[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法 | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/49b8218618ac5fb85b3f8142d9547b6fa332b27d/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fogp-250.gif)
WordPressでサイト公開前に設定しておくべき8つのチェック項目
WordPressでサイトやブログを作って、いざ公開しようとしている人は、すべての設定が本当に終わっていますか？ サイトを成長させるためのアクセスアップやSEO対策には、最低限設定しておかなければならないことがいくつかあります。 しかし、サイト制作が慣れていないうちはついつい忘れがち。 後から後悔しないためにも、今回はWordPress初心者向けに、サイト公開前に必ず設定しておきたい8つの項目を参考記事とともにご紹介します。 どれも必要不可欠なものばかりですので、改めて見直してみてください。 【そもそも前提としてやっておきたい、SSL（https）化について】 WordPressサイトをhttpからhttpsにしよう！【対応手順を丁寧に説明】 パーマリンクの設定 パーマリンクは、簡単に説明すると記事ごとに付与されているURLのことです。 このパーマリンクですが、初めのうち（記事がひとつも投
あなたのインスピレーションが刺激されるであろう9つのWebサイト
こんにちは。 今回は、何かを制作する際に、アイデアのヒントになったりインスピレーションを刺激されるサイトを9つほどご紹介します。 The Book Cover Archive 世界の本の装丁をアーカイブしたサイト。 本の表紙からは、インスピレーションを受けることが多いです。 → The Book Cover Archive Ads of the World 世界の広告デザインをアーカイブしたサイトです。 地域、国別、業種、広告媒体別に分かれていて、様々なデザインに触れることができます。 → Ads of the World motions アイコンやインフォグラフィックなどのアニメーションの動きを、アーカイブしたギャラリーサイトです。 キャッチコピーは、あなたに「気持ちいい動き」のインスピレーションを。 → motions 404design 「404 not found」のページを集めた
【フリー素材】無料で使えるおすすめクリスマスアイコン2015 | WebClips_Design
クリスマスアイテムがきれいに並んだ無料で使えるクリスマスアイコンセットを厳選して紹介します。 ※無料で使える素材を選んでますが、ライセンスついては各サイトにてご自身で確認して下さい。
移転先へ自動移動(転送/リダイレクト)させる方法 [ホームページ作成] All About
ウェブ上でのリダイレクト(Redirect)とは、あるURLから別のURLに転送することです。アクセスされた瞬間に自動移動させることで、転送された事実に気付かれないくらい一瞬で移動させることもできますし、転送の予告を数秒間ほど案内した後に自動移動させることもできます。 また、その移転が恒久的なのか一時的なのかを示すこともできます。この種別は、検索エンジンに対して「移転前のURLと移転先のURLのどちらを登録すれば良いのか？」を知らせる役にも立ちます。 ウェブサイトを移転した場合など、指定したURLに自動的に転送させたい ウェブサイト全体や、特定のページにアクセスしてきたユーザを、指定のURLに自動転送したい場合があります。例えば、以下のような場合です。 ウェブサイトを引っ越して、URLが変更になった場合 ウェブサイトの構造を改変して、一部のファイル名やディレクトリ名が変更になった場合 UR
![移転先へ自動移動(転送/リダイレクト)させる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f74e537da7194542f88bb75ca52c83e8f100bf7/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F7%2F7%2F0%2Ftopimg_original.png)
jquery.matchHeight.jsの使い方まとめ
横並びの要素の高さを揃えてくれるjQueryプラグイン「jquery.matchHeight.js」の使い方をメモ。 jquery.matchHeight.jsは下記からダウンロードできます。 liabru/jquery-match-height · GitHub HTML内に必要なファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./jquery.matchHeight-min.js"></script> HTML 横並びにする要素を指定します。 <ul id="sample"> <li><img src="http://placehold.it/150x150"></li> <li><img src="htt
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
ページ読み込み後にjavascript(jQuery)を実行する方法
こんにちは。まりもです。 ひさしぶりにweb系の備忘録です。 わざわざ記事にすることじゃないかもしれませんが、javascriptなんて全然理解してなくてjQueryもなんとな〜く使ってる無能コーダーな僕には有用な事で、しかも物忘れが激しいので残しておきます。 jQueryのプラグインを多用してると、その実行のタイミングが思い通りに行かなくてイラッとする事ってあると思う。 例えば、ブロックの高さを揃えるプラグインや、画像のサイズを一定にして並べてくれるギャラリーなど。 他にも、CSSでブロックの大きさを制御しているのに、html・CSS・javascriptの読み込みタイミングが微妙にずれてレイアウトが崩れることもある。 ハイスペックなマシンで高速インターネット接続だと大丈夫だったりするけど、汎用スペックマシンの共有ネットワークだったり、スマホやタブレット端末だと処理が追いつかないから崩れ
プレースホルダー (placeholder) の表示とCSSでの装飾方法 [ホームページ作成] All About
プレースホルダー (placeholder) の表示とCSSでの装飾方法プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。 プレースホルダー (placeholder) とは placeholder (プレースホルダー) とは、何も入力されていない状態のテキスト入力欄に最初から薄く表示されている案内文字のことです。HTMLではplaceholder属性を使うことで簡単に表示でき、CSSで色を変えることもできます。プレースホルダとして表示されて
![プレースホルダー (placeholder) の表示とCSSでの装飾方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc39f871ce14ffa0194b7537f119acadc2e6cc97/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F4%2F2%2F201611231423%2Ftopimg_original.png)
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Novapattern - Curated Collection of High-Quality Patterns
webtoolnavi.com
