スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
Movable Type の変数タグで MTLink というものがあります。Movable Typeユーザー・マニュアル：テンプレート・タグでは下記のような説明になっています。 Index Templateもしくは特定のエントリーへのURLを自動的に生成するためのタグ。 つまり、インデックス・テンプレートまたはある特定のエントリーに対するリンクを設定したい場合に使うためのタグです。 以下、インデックス・テンプレートおよびエントリーのリンク設定方法について説明します。 インデックス・テンプレートへのリンク インデックス・テンプレートを新しく作成する時に「テンプレートの名前」欄を設定されると思いますが、その名前を MTLink の template 属性に指定することでリンクを生成します。 MTLink を使用しなければ、リンクのURLは <a href="<$MTBlogURL$>profi
毎日ブログを更新しないほうが良いという人の主張は、 「どうでも良い記事を無理やり書くことになってしまって、記事の質が落ちて、ブログ全体のブランドも落ちる」 というものが多いです。 言いたいことはよく分かります。そして、自分が納得できる記事だけを不定期更新していくスタイルにも、大きな短所があることを知っておいた方が良いでしょう。 記事のハードルが上がる 良い記事だけをポストすると言った手前上、公開する記事は面白くないといけません。 定期的に更新しなければならないプレッシャーからは開放されますが、代わりに「常にレベルの高い記事を書かないといけないプレッシャー」が生まれます。 面白い記事を書こうとしても、合格レベルに達せず、ボツ。結局、一記事もポストできない……。 という状況に、陥らないように注意が必要です。 セレンディピティを放棄する 毎日ブログを更新すると、ネタが続かないので、何でも記事にし
2012年に公開されたMovable Typeで使えるレスポンシブなテーマまとめです。 どなたかの参考になれば幸いです。 Rainier Media Queries (CSS) を利用したマルチデバイス対応のテーマ。 PC、スマートフォン、タブレットなどのサイズを検知して、最適なデザイン表示が可能。 また、テーマのロゴやヘッダーバナー画像、ナビゲーションの内容を簡単にカスタマイズできる機能を実装しています。 MT5.2.2からは標準搭載。 小粋空間 Movable Type（MT）テンプレート シンプルなテンプレート。ブログ用とウェブサイト用のテーマがあります。テーマはMT5.13以降に対応。 MT underHat テーマ 005 – 新着情報 新規ブログ作成時のカスタマイズ用テンプレート。 企業サイト等で、新着情報やお知らせ掲載など、ブログまでは行かない簡単な構造のベース用テーマです。
弊社で公開中の人気プラグイン PageBute を用いると、長くなりがちなリストアーカイブなどを、指定した記事数ごとに複数ページに分割することができます。一般的には、記事一覧などのリスト系ページを見やすい単位に分割する目的で使われることが多いと思いますが、使い方によっては、例えばこの例のように、 一つの長いブログ記事を複数のページに分割することにも利用できます。このエントリでは、PageBute プラグインを使って、一つのブログ記事をページングする方法を紹介します。 方法 1. mteval モディファイヤを用いる方法 ブログ記事の個別アーカイブのテンプレートにおいて、ブログ記事の本文/追記を出力する部分のテンプレートタグを以下のように記述します。 <MTPageContents count="1"> <$mt:EntryBody mteval="1"$><$MTPageSeparator
[43] style要素で CSS を HTML文書内に書こう 最終更新日：2019年07月05日 （初回投稿日：2012年07月27日） 今回は <style>要素 を使ってみましょう。これもメタデータ・コンテンツです。 <link>要素は、外部CSSファイルを HTML内に読み込む時に使い、 <style>要素は、CSSを直接 HTMLに書く時に使います。 ずいぶん前に [6] 段落に<p>要素を使おう（ついでにCSSで整えてみよう）でも <head>内に <style>要素でCSSを書く方法を紹介していますが、今回はもう少し詳しく見ていきましょう。 使用する要素 本日のINDEX <style>要素のルール <style>要素の属性 type属性 media属性 title属性 ピンポイントでCSSを使いたい時に <style>要素を <body>要素の中に書く（5.2仕様） ● 2
![[43] style要素で CSS を HTML文書内に書こう](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
SOY CMSは成果を上げるためのCMSです。 「人員を増やさず受注量を増やしたい」「取引を継続的なものにシフトしたい」「受注できる仕事の幅を増やしたい」Web制作会社様のためのCMSです。 Webへの投資の費用対効果を最大化させたいサイトオーナー様も是非ご利用ください。 オープンソースライセンスで公開、配布していますのでご利用は一切無料です。サポートが必要な場合にのみ、有償でサービスをご提供しています。 SOY CMSを使用したサイト構築・リニューアルについて SOY CMSを利用したサイト・ネットショップ構築に関しては開発元もしくは公式パートナーまでお問合せ下さい。 サポート内容、詳細についてはこちらのページをご覧ください。 開発元ではCMSを導入しても更新を継続していくのが難しいという場合の、Webサイト運用体制構築のコンサルティングも提供しています。 更新情報・お知らせ 2024/
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
Top ＞ Movable Type / WordPress / Serene Bach / sb / FC2ブログ / Seesaaブログ / さくらのブログ / livedoor ブログ / BlognPlus（ぶろぐん+） / アメーバブログ テンプレート Movable Type / WordPress / Serene Bach / sb / FC2ブログ / Seesaaブログ / さくらのブログ / livedoor ブログ / BlognPlus（ぶろぐん+） / アメーバブログ / はてなダイアリー / 忍者ブログ テンプレート お越しくださりありがとうございます。本サイトでは MovableType/WordPress/Serene Bach/sb/FC2ブログ/Seesaaブログ/さくらのブログ/livedoorブログ/BlognPlus（ぶろぐん+）/ アメーバブロ
現在配布しているテーマ（テンプレート）の一覧です。 それぞれのテーマに寄って、方向性や目的が違っています。ご自身の利用用途に近いテーマをお選びください。 なお、当サイトのテーマは004までは version 5.02 にて確認し005からは version 5.2 で確認しています。MTOSに関しては、カスタムフィールドを使っていないテーマなら問題なく使えると思いますが未検証です。 また、各テーマに関しては、オリジナルカスタマイズも承ります。この場合は個人の方でも有償になってしまいますが、必要な場合お問い合わせください。 MT underHat テーマ 006 - レスポ このテーマの特長 テーマ「カンバス」をベースに、MT5.2対応。MT6.0.3でも動作確認済み。 レスポンシブウェブデザインに対応したテーマ。 その為、iPhoneやAndroid、タブレット端末からも同じURLで閲覧が
Movable Type テンプレート（MT テンプレート）をこのエントリーで配布しています。 2009.10.21：MT5のテーマを公開しました。 １．価格 個人無償版／有償版での非商用利用／Movable Type Open Source：無償 有償版での商用利用：10000円/1サーバ（税別）※事前に動作確認してください 無償でご利用の場合も、テーマのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。 ２．Movable Type テンプレート（MT テンプレート）のダウンロード 下記のリンクより、Movable Type テンプレート（MT テンプレート）のアーカイブをダウンロードしてください。 Movable Type 5.1 テーマ 修正履歴 2012.10.23 初版 2012.10.25 v7.0.1 3カラム→2カラムのときに
サテライトサイトの主な目的は、自社サイトへの見込み客のアクセスの獲得です。 本サイトに対するSEOや検索エンジン広告だけでは捉えきれない、潜在的な見込み客のアクセスを、サテライトサイトを通して自社サイトに流入させるのです。 例えば、住宅ローンの申込みを獲得するサイトの場合。検索エンジンから見込み客のアクセスを獲得するには、もちろんSEO対策や検索エンジン広告も必須ですが、「ローン」「融資」「住宅ローン」といったキーワードは極めて競合が多く、SEOでも上位表示は難しく、検索エンジン広告でもクリック単価がかさみがちです。 そこで、住宅ローンの申込み意向がある人たちが、どのようにしてインターネット（特に検索エンジン）を利用するかを考えてみます。お金に直接関わる商品なので、少しでもムダを抑え、安心して利用できる商品を選びたいと考えるのが普通でしょう。その為、事前に住宅ローン全般について、インターネ
今までphpで"（ダブルクォート）と、'（シングルクォート）を使い分ける際、多少の基準はあれど、割と雰囲気でやってしまってました。 しかし今日、ちとそれはまずいよなーと感じ、自分の中で明確な使い分け基準を模索することにしました。 ■文字列の場合 こちらをみると、 PHPスクリプト講座：文字列内での変数展開 -- そふぃのphp入門 文字列内での変数展開は 1. "（ダブルクォート）で括った場合とヒアドキュメントでは変数展開される 2. '（シングルクォート）で括った場合には変数展開されない となっています。 すなわち、 ソース <?php $fruit = "りんご"; echo "果物では{$fruit}が好きです。\n"; echo '果物では{$fruit}が好きです。\n'; ?> 実行結果 果物ではりんごが好きです。 果物では{$fruit}が好きです。\n という違いがあるとい
上記の権限を持つユーザーでサインインし、以下の操作でブログを作成します。 ナビゲーションから、ブログを作成するウェブサイトを選択します。 サイドメニューから、 [ブログ] の [新規] を選択します。 ブログの設定項目を入力し、 [ブログの作成]をクリックします。 入力項目 ブログの作成に、必要な項目を入力します。特にブログURL、サイトパスは後から変更するのが困難なので慎重に決定してください。ブログURLにサブドメインを指定するときなど、ウェブサーバーの設定が必要な場合があります。ウェブサーバーの設定は、Movable Typeではなくウェブサーバーの管理者に確認してください。 ブログテーマ テーマを選んで、ブログのデザインをカスタマイズします。テーマには、テンプレートだけでなく、カテゴリーやフォルダ、カスタムフィールドが含まれる場合があります。テーマは、後で変更することができます。 ブ
つまりhtml, head, bodyなどの使い慣れたお決まりのタグは今更書くまでもないということ。 参考: どのようなタグが省略可能か http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission P.S. STORYS.JP、 coincheck などのサービスを運営、開発しています。興味のある方はぜひ 和田まで連絡を！ Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
