どうも7noteです。CSSを使って写真を額縁に入れて飾る方法 きれいな写真をWEBで目立たせたいときにピッタリの方法。 シンプルですが、それらしさがでるかなと思います。 CSSのみで作成する方法を紹介していきます。 CSSで写真を額縁に入れて飾る方法 index.html <div class="frame"><img src="sample.jpg" alt="写真"></div> style.css .frame{ border-top: 20px solid #B37D4D; /* 上のborderを指定 */ border-right: 20px solid #B37D4D; /* 右のborderを指定 */ border-bottom: 20px solid #D2AE7E; /* 下のborderを指定 */ border-left: 20px solid #D2AE7E; /* 左のborderを指定 */ box-shadow: inset 0 0 10px #000; /* 内側に影を指定 */ display: inline-block; /* 写真に合わせるためインラインブロック要素にする */ } .frame img { position: relative; /* z-indexを指定 */ z-index: -1; /* 影を写真の上に重ねるためマイナス値を指定 */ } 解説 borderの特性として、上下左右で色が違う場合重なる部分が斜めに配色されます。 これを利用することで、額縁特有の接続部分を再現することができます。 あとは光の入り方を再現するために左&下と、右&上で色を分けます。 影を指定するのですが、影は普通に入れてしまうと写真の後ろに入ってしまうので、z-indexを利用して写真を後ろに配置し、.frameに対して内向きの影を入れます。これで立体感が少しでます。 まとめ cssだけで簡単に額縁を装飾する方法を解説しました。 こだわった額縁にしたい場合はcssでは難しいので画像を背景画像として指定するなどの必要があります。 CSSで作るメリットとしては、写真の大きさに合わせて額縁も自動で大きさが変わるので作成や変更が簡単なところですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

・初めに この記事は以下の方を対象としています。また、記事修正、コメントやLGTMなどモチベーションにつながるのでポチっとお願いします‼ HTMLの20個のベストプラクティスについて知りたい方 初学者の方 フロントエンドエンジニア志望の方 基本的なことを復習したい方 ・導入 閲覧ありがとうございます。この記事は、初学者がフロントエンド目指してロードマップに沿ってアウトプットしていく記事になります。 こちらの記事はPart5です。最初からご覧になりたいかたは、以下よりどうぞ。 ・記事一覧 part1: Internet【HTTP,Browsers】 part2: Internet【DNS,Domain,Hosting】 part3: HTML【basic】 part4: HTML 【Form validation】 ・Part5 HTML【Conventions and best practices】 今回は、HTMLにおける20個の従うべき慣習について紹介していきます。 参考にさせていただいた記事はこちらです。早速本題に入っていきましょう。 ・注意 これらの慣習は大体同じ方向性で決まってはいますが、完全に同じでなかったり多少の差異を含むことを理解しておいてください。 1．常にDoctypeを宣言する HTMLの概要の際(part3)にも説明したかと思いますが、HTMLのコードを書き始めるときDoctypeの宣言を行います。これは、ブラウザにHTMLのマークアップを正しく読み取ってレンダリングしてもらうのに役に立つからです。 2. <title>タグにしっかりと意味を持たせる <title>タグに記述することは、しっかりと意味を持たせましょう。これは、<title>タグはブラウザ上のバーとタブに表示されるだけでなく、Googleの検索エンジンの結果ページなどで表示されるためです。加えて、検索順位に関わったり、アクセス数に関わったりなどそのサイトで重要な役割を果たすため、わかりやすく覚えやすいものをしっかり考える必要があります。 3．<meta>タグにしっかりと意味を持たせる <title>タグ同様に、<meta>タグにも記述することはしっかりと意味を持たせましょう。<meta>タグの一部が検索エンジンの結果ページに表示されるためです。 特に、description属性はWebページの基本的な説明をしており、検索エンジンやユーザーがページの概要を把握するのに役立ちます。そのため、ページと関連性のあるわかりやすい要約を配置することが重要です。 また、keywords属性にWebページに関連するキーワードやフレーズを配置することでも、検索エンジンやユーザーがWebページの概要を把握するのに役立ちます。description同様わかりやすいフレーズを指定するといいでしょう。 下の画像は実際に表示されるときの例です。引用なので英語なのは悪しからず・・・ 4.<div>を使用してセクションを分ける コードを書く際に重要なことの1つである「コードの見やすさ」を実現するために、コードをセクションごとに分けることが必要です。これは長いコードほど効果が明確になりますが、常に意識しておくといいでしょう。 下のコードは一例に過ぎません。たくさんのコードをみて、見やすいコードとは何かを考えながら書くのが重要になります。 　``` <div id="header"> </div> <div id="container"> <div id="contents"> </div> <div id="navigation-bar"> </div> </div> <div id="footer"> </div> 　``` 5.HTMLにCSSなど種類の違うコンテンツを混ぜない HTMLのコンテンツ部分にCSSのコードを混ぜないようにしましょう。もしCSSを書きたい場合は、別のCSSファイルを作成してそのファイルに記述します。これはコードが見やすくなるだけでなく、ユーザーエージェントがコンテンツをより簡単に処理することができるようになり、結果的にページの評価があがるためです。 下のは悪い例です。このようにしてしまうと、機能はするもののコードが長く見ずらいですし、処理にも時間がかかってしまいます。 <p style = "color：#ff; font-size：14px; font-family：arial、sans-serif;">I love Shohei Ohtani</p> 6. CSSの統合をおこなう 通常のWebサイトのCSSファイルは、1つのメインCSSファイルとその他にいくつかのCSSファイルから構成されていますが、CSSファイルの処理には時間がかかります。そのため、それを解決するためにCSSファイルの統合を行うことが推奨されています。 7. Jsの縮小と統合をおこなう CSSと同様に、HTMLにJavascriptのコードを書くのは推奨されていません。これは、コードの管理のしやすさと通信量の削減のためです。具体的には、JavaScriptのファイルを外部化し、それらをキャッシュ化するようにしておけば、リロード時の通信量がその分削減されます。そのため、基本的にはJavaScriptは外部ファイル化したおいた方が、表示の高速化には繋がりやすいといえます。 また、Javascriptの読み込みは</body>の直前で行われることが推奨されています。これは、例えば先にJavaScriptファイル、その下の行にCSSファイルを読み込むように記述すると、ブラウザとしては、JavaScriptファイルの読み込み時にHTMLパースを一旦停止し、JavaScript処理が終わった後に、CSSを読み込み、解析し適用します。そのため、CSSの適応までにタイムラグが生じ、素のHTML要素が一瞬表示されたりするなど、ページの表示が遅延する可能性が出てきます。 ~略~ <script src="/foo.js"></script> <script src="/hoge.js"></script> </body> </html> 8. 見出し要素は適切に使用する 見出し要素(<h1> ~ <h6>)を使用する際には、それらを適切に使用することを推奨します。例えば、文字を太く、大きくしたいからという理由で<h1>タグを使用したり、サブタイトルに<h6>タグを使用したりすることはよくありません。これは、<h1> ~ <h6>タグが画面読み上げ機能や検索エンジンなど、ユーザーエージェントにとって意味のあるタグであるからです。 それぞれのタグを意味を理解して適切に使用しましょう。 見出しタグの意味を詳しく知りたい方はこちら 9. HTML要素は適切に使用する 8.の内容と被りますが、HTML要素においてもタグは適切に使用しなければなりません。 タグの種類や意味についてはpart3をご覧ください。詳細に解説しております。特にこちらの記事で紹介したタグの多くは、最低限覚えておいたほうがいいものとなっているので、しっかり押さえておきましょう。 10. すべてに<div>タグを使用しない 開発の多くでは<div>タグでまとまりをラップすることをはじめとして、<div>タグを使用することが多いです。しかし、多く使用するからといって適当に使用することは推奨できません。例えば、タイトルに<div>タグを使うのはナンセンスです。<h1>を使用しましょう。 11. ナビゲーションには<ul>を使用する Webサイトに置かれていないものはないといえるナビゲーション(下画像)ですが、ナビゲーションを作成する際は<ul>を使用しましょう。これは、ナビゲーションが(あまりそうは見えないものの)順序のないリストであるためです。また、<ul>タグとCSSを使用することで、よく見かけるようなきれいなナビゲーションを簡単に作成することができます。 以下は簡単なナビゲーションバーの作成方法です。コードと結果を載せています。 <ul id = "main_nav"> <li> <a href = "＃" class = "active">Home</a> </ li> <li> <a href = "＃">About</a> </ li> <li> <a href = "＃">Portfolio</a> </ li> <li> <a href = "＃">Service</a> </ li> <li> <a href = "＃">Blog</a> </ li> <li> <a href = "＃">Contact</a> </ li> </ul> main_nav { position:absolute; right:30px; top:40px;} #main_nav li { float:left; margin-left:2px; } #main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;} #main_nav li a.active, #main_nav li a:hover{ background-color:#0b86cb; } 12. タグは閉じる すべてのタグは閉じなければなりません。エディタ上でしっかりとエラーになるとは思いますが、気づかずにブラウザ上に反映した場合もエラーになることが多いです。しかし、一部のブラウザ上では正常に動いてしまうことがあるため、確認は怠らないようにしましょう。 13. マークアップには原則小文字を使用する 開発の際に、マークアップは小文字で行いましょう。大文字で書いた場合でもエラーにはなりませんが、コードの読みやすさに影響が出ます。 しかしすべてが小文字というわけではなく、大文字を使用する場合や小文字大文字の混合を使用する場合もあります。ですから、基本的には小文字で、場合によっては大文字も使用するという使い分けが必要であることを理解しておきましょう。 14. <img>にはaltを指定する <img>タグに使用するalt属性は、ページに表示されることがほとんどないため必要ないように思えますが、セマンティック(コンピューターにコードを正しく解釈させる技術)なコードには不可欠です。また、alt属性は伝わりやすく書く必要があります。例えばalt="picture"というよりは、alt="two books on the table"のように具体的にその画像を説明したほうが良いでしょう。 15. 必要な場合は<a>にtitleを使用する 14.と似たようなものですが<a>にはtitleを使用しましょう。これは、リンク先のページがどのようなページかあらかじめ書いておくことで、ユーザーの使いやすさやアクセシビリティが向上するためです。 しかし、<a href="foge.co.jp" title="ここをクリック">ここをクリック</a>のように、同じ文字を続けて書くのは意味がありませんし、どのようなページに飛ぶのかが明記されていません。そのため、この場合は <a href="foge.co.jp" title="すべての記事の一覧">ここをクリック</a>のように明記するか、使用しないほうが良いでしょう。 16. フォームでは<fieldset>と<label>を使用する これまた似たような慣習ですが、フォーム(Webform)には<fieldset>と<label>を使用しましょう。これはコードの見やすさと、ユーザーの使いやすさを実現させるために必要です。例えば、ユーザーがフォームに書き込むときに、その書き込む場所がどのようなテキストフィールドなのかを<label>で説明することで、簡単に入力を行うことができます。 また、フォームも多くのテンプレートがありますので、見たりカスタマイズしたりして勉強してみましょう。 17. IEモジュラーを使用する (これはあまり必要ないかもしれませんが) IE(InternetExplorer)のバージョンによっては、うまく動作しないコードやタグなどがあるため、そのバージョンにあった書き方をすることが必要です。しかし、それをおおもとのコードにべた書きしてしまうと、バージョンアップや書き方が変わるたびに書き直さないとならないため、IEのためのモジュラーを作成しましょう。 18. コードを検証する これは、HTMLというよりは開発すべてに言えると思いますが、コードの見直しや検証は頻繁に行いましょう。例え一文字違ってもエラーやバグの原因になりますし、頻繁に行わないと、どこでどんなミスをしてしまっているのかがわからなくなってしまい、エラーの特定に大幅な時間を要してしまうことになります。 大文字と小文字の区別やタイプミスはありがちですよね・・・ 19. コードは見やすくきれいに コードは、エラーなく動かすということが大切ですが、見やすいというのも、その開発に携わる人が多ければ多いほど重要になってきます。コードが見づらいと、開発の際に躓きやすくなりますし、他の人が見たときにどのような挙動をするのかがわかりづらく、時間のロスにつながります。そのため、例え練習だとしても日頃からきれいなコードというのは心がけましょう。 いいコードとは? 詳しくはこちらをご覧ください。 20. コメントアウトは適度に コメントアウト(//これはコメントアウトです)は、非常に便利でコードの見やすさにつながりますが、使用は適度にしましょう。 例えば、タグにはそれぞれに意味があるので、そのタグについてのコメントアウトでの補足は意味がないよねということです。 まとめ 今回は、HTMLの従うべき20の慣習についてまとめてきました。最初に述べたように、これらは慣習であって決まりではありません。最も大切なことは、その開発で示されている決まりに従うことです。 このような、慣習をもとにしてより見やすく、最適な良いコードを書いていきましょう‼ 次回予告 次回はCSSのbasicについてです。次回もよろしくお願いします。(これはたいへんそう・・・) 参考文献 ・webFx 20 HTML Best Practices You Should Follow ・サイトの表示高速化につながる18のこと

ローカルで開発中地味に改善するのに困ったのでメモ 実装したいもの ・自己紹介に入力した内容を修正したい このように書いていました。 edit.blade.php <textarea> {{ old($profile) ?? $profile->text }} </textarea> このように先頭に変なスペースが出てきます。 改善方法 ・一行で書く。 たったこれだけでした。 edit.blade.php <textarea>{{ old($profile) ?? $profile->text }}</textarea> フロントをまだ使いこなせていないのでメモしていきます。

JSを使わず　 animationプロパティを使ってマウスホバーした時画像がスライドするを作ってみました。 animation と @keyfram を使って画像をスライダーしてみた。これのcodeをQiitaに掲載 #webエンジニア#animation #HTML pic.twitter.com/6yOEGZtEZW— トモゑ☛Web作成の37? (@swan2pink) May 14, 2021 codepenでコードを書いてみました See the Pen VwpazmV by トモゑ☛Web作成の37? (@swan2pink) on CodePen. .main1 { position: relative; width: 300px; height: 300px; overflow: hidden; ※ } .second { position: absolute; top: 0; left: 0; } @keyfram　でスライドした際の画像格納場所をどうすれば良いかを悩みました。 結果、overflow: hiddenを親要素につけたら上手に納まりました。 参考資料 overflow:hiddenやscrollが効かない原因と対応方法 まとめ こんなcodeもシンプルで良いですよとかありましたらご連絡ください とっても喜びます！ 今回は以上です ありがとうございます！！

普段バックエンドをやっていてフロントエンドが苦手な人間の備忘録（忘備録）です。 コンテンツ・カテゴリー MDN Web Docs - コンテンツカテゴリー HTML5ではブロック要素とインライン要素による分類が廃止されましたが1、その代わりとなるのがコンテンツ・カテゴリーやコンテンツ・モデルによる分類です。HTML5の要素（タグ）の "ほとんど" は、以下7つのカテゴリーに分類されます。 メタデータ・コンテンツ フロー・コンテンツ セクショニング・コンテンツ（区分コンテンツ） ヘディング・コンテンツ（見出しコンテンツ） フレージング・コンテンツ（記述コンテンツ） エンベッディッド・コンテンツ（埋め込みコンテンツ） インタラクティブ・コンテンツ（対話型コンテンツ） ひとつの要素が複数のカテゴリーを跨いで分類されることもあるため、各カテゴリーの関係性を図にすると以下のようになります。 <html>、<li> などは、どのカテゴリーにも属さない要素であり、逆に<a>、<span>などは、複数カテゴリーに属する要素となります。 MDN Web Docs - ＜html＞: HTML 文書 / ルート要素 MDN Web Docs - ＜li＞ MDN Web Docs - ＜a＞: アンカー要素 例として＜span＞タグのリファレンスを見てみます。 span要素のコンテンツ・カテゴリーは、フローコンテンツ と 記述コンテンツ（フレージングコンテンツ） のふたつに属すると書かれています。 また、許可されている内容（子要素）には 記述コンテンツ が、許可されている親要素には 記述コンテンツを受け入れるすべての要素、またはフローコンテンツを受け入れるすべての要素 との記載があります。 次に、各コンテンツ・カテゴリーの概要を見てみましょう。 1. メタデータ・コンテンツ タイトルやメタデータ、表示方法や本文外の情報などを表すコンテンツ。 主に<head>要素内で使用することが多い。 このカテゴリーに属する要素 <base>, <link>, <meta>, <noscript>, <script>, <style>, <title> 2. フロー・コンテンツ テキスト関連や埋め込みコンテンツなど、主に<body>内で使用されることの多いコンテンツ。 このカテゴリーに属する要素 <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> および文字列。 下記の要素は、特定の条件が満たされている場合にのみ、このカテゴリーに属する。 <area> : 要素の子孫の場合 <link> : itemprop 属性がある場合 <meta> : itemprop 属性がある場合 <style> : scoped 属性がある場合 3. セクショニング・コンテンツ（区分コンテンツ） 文章区分や節など、セクション（区切り）を表すコンテンツ。 このカテゴリーに属する要素 <article>, <aside>, <nav>, <section> 4. ヘディング・コンテンツ（見出しコンテンツ） 見出しを表すコンテンツ。 このカテゴリーに属する要素 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 5. フレージング・コンテンツ（記述コンテンツ） 文章中で使用するコンテンツ。HTML4やXHTMLの「インライン要素」に近い概念で、これら記述コンテンツが集まることによって段落が構成される。 このカテゴリーに属する要素 <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列（空白文字だけで構成されたものを除く）。 下記の要素は、特定の条件が満たされたときのみ、このカテゴリーに属する。 <a> : 記述コンテンツだけを含む場合 <area> : 要素の子孫である場合 <del> : 記述コンテンツだけを含む場合 <ins> : 記述コンテンツだけを含む場合 <link> : itemprop 属性がある場合 <map> : 記述コンテンツだけを含む場合 <meta> : itemprop 属性がある場合 6. エンベッディッド・コンテンツ（埋め込みコンテンツ） 文書に他のリソースを取り込んだり、他のマークアップ言語や名前空間を挿入したりするコンテンツ。主な用途としては、画像、動画、音声などの文書内への埋め込み。 このカテゴリーに属する要素 <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video> 7. インタラクティブ・コンテンツ（対話型コンテンツ） ユーザとやり取りをするためのコンテンツ。リンクやフォームなど、ユーザーが操作することのできるものが基本となる。 このカテゴリーに属する要素 <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, <textarea> 下記の要素は、特定の条件下にある場合のみ、このカテゴリーに所属。 <audio> : controls 属性がある場合 <img> : usemap 属性がある場合 <input> : type 属性が hidden 状態ではない場合 <menu> : type 属性が toolbar 状態ではない場合 <object> : usemap 属性がある場合 <video> : controls 属性がある場合 コンテンツ・モデル HTML5では「コンテンツ・モデル」という概念もあります。 HTML Living Standard の中の 3.2.5 Content models に記載がありますが、コンテンツ・モデルとは要素の予想されるコンテンツの説明 (a description of the element's expected contents) とされていて、要するに「子要素として入れられる内容にはどんなものが許可されるか」を説明するのがコンテンツ・モデルだと考えれば良いかと思います。 例えば＜p＞タグのリファレンスを見てみると、「許可されている内容」に「記述コンテンツ」とありますが、これが<p>タグのコンテンツ・モデルということになります。 <p>タグの中に<span>タグを入れるような良くある実装も、かつてのHTML4などではブロック要素(p)の中にインライン要素(span)を入れるという説明をしていましたが、HTML5においては、「子要素として許可されているのは記述コンテンツであるため<p>タグの中に<span>タグ（記述コンテンツ）を入れられる」と説明できるということです。 <p> <span>pタグの中には「記述コンテンツ」を入れられる。</span> </p> 透過的コンテンツ・モデル HTML5には透過的コンテンツ・モデル ( transparent content model ) という概念もあります。 該当するのは以下の要素です。 a 要素 ins 要素 del 要素 object 要素 video 要素 audio 要素 map 要素 noscript 要素 slot 要素 canvas 要素 自律的カスタム要素 これらの要素のようにコンテンツ・モデルが「透過」であるとされる場合、各要素の「許可されている内容」（子要素）はあくまで親要素に準じるというカタチになります。 踏み込んだ説明をすると「透過的な要素が削除されたりその子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML5 として構造化されているもの」が透過なコンテンツモデルを持つそうですが、いったんは、子要素として許可されるコンテンツは親要素の性質を受け継いで決められるという点が理解できれば良いかと思います。 今度は HTML Living Standard で＜a＞タグに関するリファレンス (4.5.1 The a element) を見てみます。 Content model: Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified. とあると思いますが、Transparentと書かれている箇所が「透過」という意味になりますので、<a>タグはコンテンツ・モデルが透過＝子要素として許可されるコンテンツは親要素次第だということになります。（対話型コンテンツは除く、とも書いてあります。） 例えば下記のようなマークアップは、HTML4などのブロック要素/インライン要素の感覚で言えば間違ったマークアップのように見えるかもしれませんが、HTML5で<a>タグのコンテンツモデルは透過となるため、<a>タグは親要素の<div>のコンテンツ・モデルを引き継いで、<p>タグ等のフローコンテンツを子要素として持てるようになります。 <div> <a> <p>a要素は透過的コンテンツ・モデル</p> </a> </div> その他のコンテンツ・カテゴリーやコンテンツ・モデル その他にも、二次的なカテゴリーがあるとか、セクショニング・ルート（区分化ルート）、パルパブル・コンテンツ、スクリプト対応要素、知覚可能コンテンツ、フォーム関連コンテンツ...など触れられていない話題もありますが、もっと自身の理解が深まったらまた書くかもしれません。 参考URL HTML - Living Standard ＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その1】 ＜初心者向け＞知っておきたいHTML5の基本【マークアップ編 その2】 HTML5 に於ける"透過的な内容"。 トランスペアレントについて 透過的コンテンツモデルの仕様について知りたいです 『ブロック要素とインライン要素による分類が廃止』とは書きましたが、それぞれの要素が持つ表示特性としては、引き続き「ブロック要素」「インライン要素」という分類が可能です。MDN Web Docs - ブロックレベル要素 / MDN Web Docs - インライン要素 ↩