20210430のHTMLに関する記事は5件です。

【初心者でもわかる】レンガのように1段ごとに半分ズレる積み方をCSSで再現

どうも7noteです。奇数段と偶数段でずれる組み方の作り方 こういうやつですね。 奇数段と偶数段で半分ずれているのが分かると思います。 appストアなんかでもアプリのアイコンを並べるのに使われてました。 それでは背景画像を使った方法と、複数枚の画像をレンガ風に並べる2つの方法を解説していきます。 ソース 方法1:「背景画像を使う方法」 まず画像で2段分作成します。1つのパーツでみるとこんな感じ。これをリピートさせることで再現が可能になります。 index.html <div class="bg"></div> style.css .bg { width: 150px; /* 幅を指定 */ height: 100px; /* 高さを指定 */ background-image: url(parts.jpg); /* 背景画像でパーツを指定 */ background-size: 40px 32px; /* 1パーツの大きさを指定 */ } 完成例 方法2:「複数画像を並べる方法」 index.html <div class="box"> <ul class="blocks"> <li><img src="A.png"></li> <li><img src="B.png"></li> <li><img src="C.png"></li> </ul> <ul class="blocks"> <li><img src="B.png"></li> <li><img src="C.png"></li> <li><img src="A.png"></li> <li><img src="B.png"></li> </ul> <ul class="blocks"> <li><img src="A.png"></li> <li><img src="B.png"></li> <li><img src="C.png"></li> </ul> </div> style.css .box { width: 170px; /* 幅を指定 */ overflow: hidden; /* はみ出た部分を非表示にする */ } .blocks { margin-bottom: 10px; /* 適度な余白を指定 */ white-space: nowrap; /* 改行を禁止する */ line-height: 0; /* 謎の余白があれば指定 */ } .blocks:nth-child(even) { margin-left: -30px; /* 偶数行を左にずらす */ } .blocks li { width: 50px; /* 幅を指定 */ display: inline-block; /* インラインブロック要素にして横並びにする */ margin-right: 10px; /* 適度な余白を指定 */ } 完成例 まとめ CSSだけで、レンガ積みのような段ごとに半分ズレるデザインを作りました。 この積み方の名前を調べたのですが、わからなかったのでこういうのを何て言うのか知ってる人がいたら教えてください。 半分ズレるので、見切れても問題ないような画像を使うか、見切れる場合でも自動でゆっくりスライドするアニメーションなどと組み合わせる必要がありそうです。 用途に合わせてうまく利用してみてください。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

復習日誌

HTML rel relation(関係)、ファイルを読み込む宣言 href hypertext reference(参照)、読み込むファイル名 “rel” でどんなリソースか説明して、”href” でリソースの場所を示す content 内容の挿入 CSS alt alt属性(オルト属性)とは、画像の代わりとなるテキスト情報のこと text-transform テキストにおける英数字の大文字、小文字の表示を指定するプロパティ min-height 要素の最小幅を設定 margin: 0 auto; ブロックの中央寄せ align-items flexboxアイテムを配置する際に、上部や下部、高さに合わせて自動調整が可能になる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS完全に理解した

一部に人気のあるCSS完全に理解したTシャツのあの絵。 自分みたいにまだプログラミングを始めてそんなに経ってない人とってはCSSを理解するのに 手っ取り早い教材ではないでしょうか? そういうわけで自分なりに調べて再現してみました。 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <link rel="stylesheet" href="kanzenni.css"> <title>test</title> </head> <body> <div class = "main"> <p class = "main-box"> CSS<br>完全に理解した </p> </div> </body> </html> .main{ font-size: 20px; position: relative; border: 1px solid; border-radius: 5px; width: 140px; height: 80px; } .main-box{ padding-left: 30px; white-space: nowrap; position: relative; bottom: 20px; } フォントサイズやボックスのサイズを調整し、p要素をposition relativeで隙間を開けました。 また、文字をボックスの外に突き出すためにwhite-space: nowrap;を記述しました。 white-spaceプロパティとはソース中のテキストについて、自動改行するか複数の空白を一つの空白にするか、改行を空白にするかなど、改行やスペース、タブの扱いを指定するプロパティとのことで、今回はソースの外にはみ出すためにwhite-space: nowrapを記述しました。 結果はこんな感じになりました。 一応成功でしょうかね?
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSだけで回転する立方体を作る

CSSで3D表現する練習として立方体を作成したので、そのメモとして。 立方体を作る ①要素の準備 空間(space)の中に立方体(box)を用意して、立方体の中に面(face)を配置するイメージで作成する。 要素のサイズはboxよりもspaceが大きくなるように適当に設定。 分かりやすいようにspaceとfaceには色付けしている。 html <body> <div class="space"> <div class="box"> <div class="face top">top</div> <div class="face bottom">bottom</div> <div class="face front">front</div> <div class="face back">back</div> <div class="face right">right</div> <div class="face left">left</div> </div> </div> </body> css .space { width:200px; height:200px; background-color:skyblue; } .box { width: 100px; height: 100px; } .face { width: 100%; height: 100%; border: solid 2px black; background-color:forestgreen; } 現段階の表示 ②面の回転 配置にあたって各面をそれぞれ回転させる。 回転にはtransform: rotate**(**deg);を使用する。 今回は3D表現にしたいためspaceにperspective: **px;を適用してZ軸を追加する。 faceを3D空間に配置するためにboxにはtransform-style: preserve-3d;を適用する。 (boxを回転させたのは見やすくするため) css /* 追記内容 */ .space { perspective: 800px; } .box { transform-style: preserve-3d; transform: rotateX(20deg) rotateY(20deg) rotateZ(-20deg); } .face.top { transform: rotateX(90deg); } .face.bottom { transform: rotateX(-90deg); } .face.front { } .face.back { transform: rotateY(180deg); } .face.right { transform: rotateY(90deg); } .face.left { transform: rotateY(-90deg); } 現段階の表示 ③配置を整える positionとtranslate**を活用してそれぞれの面の配置を整える。 また、boxがspaceの中央に配置されるようにspaceに追記する。 枠線が綺麗に重なるようにfaceにbox-sizing:border-box;を適用する。 css /* 追記内容 */ .space { display: flex; justify-content: center; align-items: center; } .box { position: relative; } .face { box-sizing: border-box; position: absolute; } .face.top { transform: translateZ(50px); } .face.bottom { transform: translateZ(50px); } .face.front { transform: translateZ(50px); } .face.back { transform: translateZ(50px); } .face.right { transform: translateZ(50px); } .face.left { transform: translateZ(50px); } 現段階の表示 立方体自体はこれで完成。 立方体を回転させる boxにanimationを適用して立方体に動きをつける。 animation: キーフレーム名 動作時間 イージング 遅延時間 ループ回数 再生方向 プロパティ引継 状態;で指定する。 css /* 追記内容 */ .box { animation: rotation 5s linear 0s infinite normal none running; } @keyframes rotation { 0% { transform: rotateX(0deg) rotateY(-90deg) rotateZ(-180deg); } 25% { transform: rotateX(90deg) rotateY(0deg) rotateZ(-90deg); } 50% { transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg); } 75% { transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg); } 100% { transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg); } } 表示 これで完成。 サンプルコード全文 html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css.css"> <title>3Dbox</title> </head> <body> <div class="space"> <div class="box"> <div class="face top">top</div> <div class="face bottom">bottom</div> <div class="face front">front</div> <div class="face back">back</div> <div class="face right">right</div> <div class="face left">left</div> </div> </div> </body> </html> css .space { width:200px; height:200px; background-color:skyblue; perspective: 800px; display: flex; justify-content: center; align-items: center; } .box { width: 100px; height: 100px; transform-style: preserve-3d; transform: rotateX(20deg) rotateY(20deg) rotateZ(-20deg); position: relative; animation: rotation 5s linear 0s infinite normal none running; } @keyframes rotation { 0% { transform: rotateX(0deg) rotateY(-90deg) rotateZ(-180deg); } 25% { transform: rotateX(90deg) rotateY(0deg) rotateZ(-90deg); } 50% { transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg); } 75% { transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg); } 100% { transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg); } } .face { width: 100%; height: 100%; border: solid 2px black; box-sizing: border-box; background-color:forestgreen; position: absolute; } .face.top { transform: rotateX(90deg) translateZ(50px); } .face.bottom { transform: rotateX(-90deg) translateZ(50px); } .face.front { transform: translateZ(50px); } .face.back { transform: rotateY(180deg) translateZ(50px); } .face.right { transform: rotateY(90deg) translateZ(50px); } .face.left { transform: rotateY(-90deg) translateZ(50px); }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Django]DjangoでHTMLとViews.pyでデータを受け渡しする (コードのみ)

概要 今回は「Django」で「HTML」ファイルと「Views.py」ファイルでデータを受け渡しする方法を見ていきます。 これを学ぶことで、自分の思い通りにデータを扱うことができ、アプリ開発の幅を広げることができます。 ここではコードのみ載せているので、解説が必要な方はぜひ下記の記事を参考にしてください。 [Django]DjangoでHTMLとViews.pyでデータを受け渡しする 中級者向けの知識なので、「Djangoまだ初心者だよ…」という方は以下の記事などを参考にして、基礎部分の知識をつけてから読んでください! [Django初心者]DjangoでTodoリストを作成する 早速見ていきましょう! こーど ではコードを見ていきましょう。 入力用.html . . . <form action="{% url '~' %}" method="post"> {% csrf_token %} <div class="field"> <label>入力1</label><input type="text" name="nyuryoku1" id="nyuryoku1"> <label>入力2</label><input type="text" name="nyuryoku2" id="nyuryoku2"> <label>入力3</label><input type="text" name="nyuryoku3" id="nyuryoku3"> </div> <input type="submit" value="送信"> </form> . . . ```python: views.py def get_nyuuryoku(request): message = 'データ受け取ったよ!' if request.method == 'POST': nyuryoku1 = request.POST['nyuryoku1'] nyuryoku2 = request.POST['nyuryoku2'] nyuryoku3 = request.POST['nyuryoku3'] params = { "nyuryoku1": nyuryoku1, "nyuryoku2": nyuryoku2, "nyuryoku3": nyuryoku3, "message": message, } return render(request, '~', params) ```html: 表示用.html . . . <div class="field"> <h4>{{ nyuryoku1 }}</h4> <h4>{{ nyuryoku2 }}</h4> <h4>{{ nyuryoku3 }}</h4> <h4>{{ message }}</h4> </div> . . . 終わりに 今回はDjango」で「HTML」ファイルと「Views.py」ファイルでデータを受け渡しする方法を見てきました。 具体的に動きを確認できなかったので、わかりにくかったと思います。 今後実際の動きを確認できるようにアップデートしていこうと思うので、待っていてください! それでは!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む