CSSによる文字の折り返し制限・改行の禁則処理の指定方法まとめ | WEMO
中途半端な位置で改行してほしくない！ という場合の対処法。 ポイントとなるCSSは以下の２つ。 word-break: keep-all; line-break: strict; word-breakプロパティについて normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 break-all 言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 keep-all 言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。 line-breakについて normal 標準の禁則処理をします。 strict 厳密な禁則処理をします。 ※ strictを指定すると、日本語の「ー」や「っ」でもちゃんと単語の一部として認識されま
HTMLとCSSのコピペでできるモーダルウィンドウのデザイン3種
モーダルの中身 ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ HTML <center> <a href="#modal-01" class="modal-button"> モーダルを表示 </a> </center> <div class="modal-wrapper" id="modal-01"> <a href="#!" class="modal-overlay"></a> <div class="modal-window"> <div class="modal-content"> <p class="modal_title">モーダルの中身</p> <p> あああああああああああ
Sass(SCSS)のmixin, extendなどまとめ - Qiita
Sass(SCSS)のややこしそうな機能まとめ。 変数 共通な色や数値などを定義しておける。 他に、文字列や真偽なども定義可能。
background-imageの取り扱い一覧 - Qiita
HTML、CSSでdivを作成して、そのdivの背景にimageを入れたいときってありますよね。 でも、ぴったりサイズの画像だったら良いんですが、、、 大体の場合は全くぴったりじゃなくて、表示させてい部分そこじゃないよ！ アップ過ぎるよ！ ズームインしすぎだよ！って時の方が多いですよね。。 例えば、この画像。 pixabay 小さいdivの背景にしてしまうと、、、 こんな感じになっちゃったり、、 いや、もふもふ度はわかるけども、、 そんな時にどうやったら、上手に背景画像として表示できるのかをまとめました。 background-repeat まず画像をリピートしたい時。もしくは、したくない時。 したくない時は
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
HTML5【 レイアウト 】2～article、aside、section、nav - プログラマカレッジ
HTML5 【 レイアウト 】1 ～ 新要素を使った書き方のイメージで、HTML5の新要素を使ってWebページのレイアウトを組む際の書き方をざっと紹介しました。今回は、そこで使用した<article> <aside> <section> <nav>について、少し詳しくみていきたいと思います。 なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。 １．article article要素は、それだけで内容が完結している部分に使います。 ページのメインコンテンツや、ブログの１つの記事など、それだけで完結した内容であれば、article要素を使うのに適しています。 1ページに何回使ってもOKです。 HTMLは下の通りです。 <article>は１つだけ
システム設計中ですが、検証として塗り絵を作ってみましたよ。
塗り絵はこのアプリのキモですから ハードウェア的なシステム構成は決まりました。 サーバの選定とかも大事ですが、ここで、塗り絵部分を試しに作ってみました。 まずは遊んでみますか？＞塗り絵をやってみる なんでかと言うと、塗り絵部分を作る言語を決めたいのだけど、どれが使えるかわからないので、とりあえず候補に挙がっているものが、本当に使い物になるか試してみたかったからです。 作ってみたのは、HTML5+JavaScriptの組み合わせ。これだと、web上に公開できるので、ここでも紹介しやすいかなと思って。 結論から言うと、微妙？ 後で説明しますが、線を引くときにムラができるのが気になる。 あと気になるのが、古いAndoridだと動作が遅くなるかもしれないということ。 せっかくネイティブでアプリを作るんだから、サクッと動いて欲しいですよね。 アプリ制作の過程をチラ見せ。 せっかくなので、JavaSc
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください） 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html
【HTML5】formのactionをsubmitボタン毎に変える方法(JavaScript不要)
submit前にJavaScriptで書き換える方法がポピュラーなようですが、HTML5ではもっと簡単な方法があります。SPA全盛の現代にはあまりそぐわないですが、ご紹介しておきます。 SubmitボタンでActionをオーバーライドする 実は、HTML5から新たに属性が追加されており、これを指定することでFormのパラメータをオーバーライドすることができます。 以下のようなフォームの内容を、押したsubmitボタンによって複数のエンドポイントに送信できるボタンを追加してみます。 <form action="xxx" method="post"> <input type="text" name="param1" value="value1"> <input type="text" name="param2" value="value2"> <input type="text" name="
<embed>－HTML5タグリファレンス
<embed>タグは、外部アプリケーションやインタラクティブなコンテンツ、例えば、Flashなどのプラグインを必要とするデータをHTML文書に埋め込む際に使用します。 よく利用されるプラグインデータには、 動画データにはMPEGファイル（.mpg）・FLASHファイル（.swf）・QuickTimeファイル（.mov）等、 音声データにはWAVEファイル（.wav）・AIFFファイル（.aif）・AUファイル（.au）・MIDIファイル（.mid）・ RealAudio（.ra） 等があります。 これらの動画データや音声データは、 ブラウザに追加インストールされたプラグインで再生しますが、再生するデータの形式により必要なプラグインは異なります。 データを埋め込むには、src属性でリソースのURLを指定して、type属性でMIMEタイプを指定します。 src属性とtype属性を同時に指定する
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
HTML5のお勉強 articleとsectionとか - Qiita
前回に引き続きHTML5の勉強。 めっちゃわかりやすい記事があったのでこれ見よう。 構造化タグ HTML5の特徴の1つとして構造化タグと呼ばれるものがある。 今までのHTMLでは、 <html> <body> <div id="header">...</div> <div id="nav">...</div> <div id="container">...</div> <div id="footer">...</div> </body> </html> 上記のようにユーザー側が構造を決め、（おそらく多くは）<div>にidやclassで構造名をつけ、 「ここからはヘッダ、ここからはフッタ…」といったように分類していたが、 HTML5では構造化タグと呼ばれる新しい要素（タグ）が追加され、 「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。 つ
HTML5【 レイアウト 】1～新要素を使った書き方のイメージ - プログラマカレッジ
▲目次へ戻る ２．HTML文書がシンプルに HTML5で加わった新要素のおかげで、HTML文書がシンプルに書けるようになりました。 下のようなレイアウトを想定してみます。 いままでのHTML4やXHTML1では、次のような書き方をしていました。 div要素でブロックを区切り、それぞれにid名を付け、CSSでレイアウト指定をするというやり方です。 この方法ですと、ボックスの名前はそれぞれ任意に付けられます。また、各ボックスの記述が長いです。 一方、HTML5では次のような書き方をします。 新しい要素が追加されたため、div要素を使わずに、これらの新要素で構成できます。 ナビゲーション部分はnav要素、メインコンテンツ部分はarticle要素、サブ的なコンテンツ部分はaside要素、各コンテンツ内の見出しを区切るsection要素、があります。 ヘッダ、フッタ部分は、header要素、foot
First step CSS - Section 4
今までは，<H1>（見出し），<EM>（強調）といった文書中である役割をもつ要素にスタイルを指定した。ここでは“スタイルを適用する範囲”を示し，ほかの役割を持たない HTML の要素を導入する。 <DIV> と <SPAN> は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから～ここまで”の形で使われる。 ここで“文書中での役割をもたない”というのは，たとえば <UL> はくくった範囲に“箇条書きである”という“役割”を与えるが，<DIV> と <SPAN> は決まった役割を与えない。 <DIV> と <SPAN> は，スタイルシートの範囲指定のほかに，ある範囲が“何語で書かれているか”を示すのにも用いられる。
HTML5の新規タグ「section、article、header、footer」の使い方 | それからデザイン スタッフブログ
さて今回は、HTML5で追加されたタグ、section/article/header/footerの使い方を改めて復習しようとおもいます。 Web制作の現場でも、HTML5がだいぶ普及してきたことによって、使う機会が多くなっている実感があります。 さて、HTML5とこれまでのXHTMLの違いを簡単に説明すると、『HTML構造がより明確に区別され簡略化された』ということでしょう。 HTML4やXHTMLのタグ要素だけでは対応しにくいことを再定義したものが、HTML5です。 つまり、「HTML5とは、現在のWeb制作者の悩みを解決してくれるもの」といってもよいでしょう！ なので、みんなで使いましょう…ってことですね。 さて、HTML5の目玉の一つである。新規タグですが、「これどういう場面で使ったらいいの！！！」とか「sectionとかarticleとか、意味わかんねーよ！」とか、そういう心の叫
TM Life - HTML5 File API を使ってファイル読み込み
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. HTML5 で追加された File API. これを使えば ローカルファイルの情報, 中身を取得して JavaScript でいじることができます. 今後, HTML5 の普及とクラウド化が進むにつれて重要な機能になることは間違いありません. サンプルを作ってみたのでよかったらぜひ. ドラッグ & ドロップにも対応しているよん♪♪ Chrome でローカル上で作業する場合, セキュリティ上ドラッグ & ドロップに反応しない場合があります. その場合, Chromeの起動オプションに –allow-file-access-from-files を指定することで読み込めるようになります. SAMPLE And D
Google Chromeのデベロッパーツールで使えるショートカットキー - 448.jp blog
Google Chromeには、Web開発者向けにデベロッパーツールという機能が付属していまして、まぁ簡単に言うとFirebugのChrome版的な。総合的な機能や使い勝手は、Firebugの方がいいかなーって感じなんですが、最近メインブラウザをChromeにしてるのでいちいちDOM見たりするのにFirefoxを起動するのも面倒くさい。 ちゅーわけで、デベロッパーツールをばんばん使っていくために、ショートカットキーを調べたのでポストします。 まず、デベロッパーツールを開くだけなら「F12」。実はFirebugと同じショートカットキーで動くんですねー。もしくは「Ctrl + Shift + I」でもOKです（MacはControl + Option + I）。もちろん再度「F12」を押すことで表示／非表示を繰り返すトグル動作になります。 続いて、拙者が一番使うDOMインスペクタモード（HTM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
[HTML]Formの入力要素に字数制限はあるのか - うぃずのひとりごと