タグ

htmlとWEBデザインに関するNEPPIEのブックマーク (10)

  • レスポンシブWebデザインの作り方(簡単設定方法)

    webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile(ウェブモバイル)は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ

    レスポンシブWebデザインの作り方(簡単設定方法)
  • HTMLにおける「段落」をめぐって

    HTMLにおける「段落」をめぐって HTML文書での段落の表現について、混乱し た議論や解説が少なからず見受けられる。この小文では、 HTMLの仕様で定義されるP要素と、日語文の 段落に関したことを扱う。 HTMLではP要素がparagraphを表す HTMLにおいてparagraphを表す要素はP要素であって、それ以 外には無い。これは疑う余地のない事実である。 段落 = paragraph 英語の "paragraph" に対応する日 語は「段落」である、ということにすると何かと都合が良い。ただ し、「段落」は "paragraph" の訳語とし ては必ずしも適当とは言えず、敢えて「段落」と言わずに「パラグ ラフ」という言い方がなされることもある。しかしながら、paragraphの意味で「段落」という言葉を用いる のは一般の国語辞典にも見ることができ、ほかに適当な言葉が見当 たらな

  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    NEPPIE
    NEPPIE 2012/06/01
    なるほど。改めて復習。
  • hail2u.net - Weblog - floatで並べたリストのセンタリング

    ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

  • WEB色見本 原色大辞典 - HTMLカラーコード

    原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見サイトです。 9種類の色見と色に関する各種サービスから構成されています。 色見コンテンツは ブラウザで定義されているHTMLカラーネーム、 日の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ

    WEB色見本 原色大辞典 - HTMLカラーコード
  • 見出しタグh1など :検索エンジン最適化で順位アップ ::SEO塾(旧)

    CSSソース h1 { font-size: 175%; line-height: 1.2em; } h2 { font-size: 150%; line-height: 1em; } h3 { font-size: 125%; line-height: 1em; } 文字サイズは、「font-size」を用いる。またサイズは、パーセントなどで、相対指定にしておく。「20pt」「16px」など、絶対指定するとアクセシビリティとして難あり。 最後に、行間が空き過ぎないように、「line-height」を。こちらも値は「1em」などの、相対指定で。 見栄え h1・h2・h3は、順位アップ効果が非常に高いが、そのまま使っては、文字の大きさや改行など、表示のうえで問題が出てくる。 だから、スタイルシートが領を発揮するのだ。また見出しタグは、CSSを用いてこそ、構造的記述としても

  • 作って学ぶスマートフォン対応サイトの基本 (1/4)

    iPhone/Android向けサイト制作の基を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境(エディターとWebサーバー)についても紹介します。 用意するもの1:エディター HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。 ・Em Editor / Windows / 4000円(税込) http://jp.emeditor.com/ ・秀丸エディタ / Windows / 4200円(税込) http://hide.maruo.co.jp/ ・TeraPad / Windows / 無料 http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html ・JEdit X / Mac /

    作って学ぶスマートフォン対応サイトの基本 (1/4)
  • 丸数字(丸付き数字)「①②③④⑤」の入力方法

    丸数字(丸付き数字)「①②③④⑤」を機種依存文字ではなく『数値文字参照』で入力する方法の紹介です。 丸数字(丸付き数字)の表記 丸数字(丸付き数字)の表記 ①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 丸数字(丸付き数字)の入力方法 丸数字(丸付き数字)をHTMLで記述する場合は、下記のように記述します。 「①」の箇所が、ブラウザに表示される際に「①」となります。 表示 数値 文字参照 表示 数値 文字参照

    丸数字(丸付き数字)「①②③④⑤」の入力方法
  • CSS HappyLife

    もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった! これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう!好きな恐竜 なんで恐竜!?って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...! 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月~8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです! 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公

  • とほほのWWW入門

    はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (

  • 1